src/examples/kitchensink/app/view/FreeDrawComponent.js

   1 //<feature charts>
   2 (function () {
   3
   4     function smoothenList(points) {
   5         if (points.length < 3) {
   6             return ["M", points[0], points[1]];
   7         }
   8         var dx = [], dy = [], result = ['M'],
   9             i, ln = points.length;
  10         for (i = 0; i < ln; i += 2) {
  11             dx.push(points[i]);
  12             dy.push(points[i + 1]);
  13         }
  14         dx = Ext.draw.Draw.spline(dx);
  15         dy = Ext.draw.Draw.spline(dy);
  16         result.push(dx[0], dy[0], "C");
  17         for (i = 1, ln = dx.length; i < ln; i++) {
  18             result.push(dx[i], dy[i]);
  19         }
  20         return result;
  21     }
  22
  23     var sprite, list = [], old1 = [0, 0], old2 = [0, 0];
  24     /**
  25      * Demonstrates smoothening and cubic bezier Curve rendering
  26      */
  27     Ext.define('Kitchensink.view.FreeDrawComponent', {
  28         extend: 'Ext.draw.Component',
  29         config: {
  30             background: 'white',
  31             listeners: {
  32                 element: 'element',
  33                 'drag': function (e) {
  34                     if (sprite) {
  35                         var me = this,
  36                             p = e.touches[0].point,
  37                             xy = me.element.getXY(),
  38                             x = p.x - xy[0],
  39                             y = p.y - xy[1],
  40                             dx = this.lastEventX - x,
  41                             dy = this.lastEventY - y,
  42                             D = 40;
  43                         if (dx * dx + dy * dy < D * D) {
  44                             list.length -= 2;
  45                             list.push(p.x - xy[0], p.y - xy[1]);
  46                         } else {
  47                             list.length -= 2;
  48                             list.push(this.lastEventX = p.x - xy[0], this.lastEventY = p.y - xy[1]);
  49                             list.push(this.lastEventX + 1, this.lastEventY + 1);
  50                         }
  51
  52                         var path = smoothenList(list);
  53                         sprite.setAttributes({
  54                             path: path
  55                         });
  56                         if (Ext.os.is.Android) {
  57                             Ext.draw.Animator.schedule(function () {
  58                                 this.getSurface('overlay').renderFrame();
  59                             }, me);
  60                         } else {
  61                             me.getSurface('overlay').renderFrame();
  62                         }
  63                     }
  64                 },
  65                 'touchstart': function (e) {
  66                     if (!sprite) {
  67                         var cmp = this,
  68                             p0 = cmp.element.getXY(),
  69                             p = [e.pageX - p0[0], e.pageY - p0[1]];
  70                         list = [p[0], p[1], p[0], p[1]];
  71                         this.lastEventX = p[0];
  72                         this.lastEventY = p[1];
  73                         cmp.getSurface('overlay').element.setStyle({zIndex: 1});
  74                         sprite = cmp.getSurface('overlay').add({
  75                             type: 'path',
  76                             path: ['M', list[0], list[1], 'L', list[0] + 1e-5, list[1] + 1e-5],
  77                             lineWidth: 30 * Math.random() + 10,
  78                             lineCap: 'round',
  79                             lineJoin: 'round',
  80                             strokeStyle: new Ext.draw.Color(Math.random() * 127 + 128, Math.random() * 127 + 128, Math.random() * 127 + 128)
  81                         });
  82                         old1 = old2 = p;
  83                         cmp.getSurface('overlay').renderFrame();
  84                     }
  85                 },
  86                 'dragend': function (e) {
  87                     var cmp = this;
  88                     cmp.getSurface().add({
  89                         type: 'path',
  90                         path: sprite.attr.path,
  91                         lineWidth: sprite.attr.lineWidth,
  92                         lineCap: 'round',
  93                         lineJoin: 'round',
  94                         strokeStyle: sprite.attr.strokeStyle
  95                     });
  96                     cmp.getSurface().setDirty(true);
  97                     cmp.getSurface().renderFrame();
  98                     sprite.destroy();
  99                     cmp.getSurface('overlay').renderFrame();
 100                     sprite = null;
 101                 }
 102             }
 103         },
 104
 105         onResize: function () {
 106             var size = this.element.getSize();
 107             this.getSurface().setRegion([0, 0, size.width, size.height]);
 108             this.getSurface('overlay').setRegion([0, 0, size.width, size.height]);
 109             this.renderFrame();
 110         }
 111     });
 112 })();
 113
 114
 115 //</feature>