ExtJS绘制包和鼠标事件

Question

我希望能够使用ExtJS draw package在画布上绘制几何几何图形。但我也想提供一些交互性，例如移动一个绘制的圆圈或在用户点击时突出几何图形。但我无法做到这一点。例如，这是我试过的：

Ext.create({ 
    xtype: 'draw', 
    renderTo: document.body, 
    width: 600, 
    height: 400, 
    sprites: [{ 
     type: 'circle', 
     cx: 100, 
     cy: 100, 
     r: 50, 
     fillStyle: '#1F6D91', 
     listeners: { 
      click: function() { 
       alert("click!"); 
      } 
     } 
    }] 
}); 

当我点击圆圈时，没有任何反应。所以，我的问题是这是否可能，如果是的话，我们该怎么做？

Answer 1

两件事情，你需要做这项工作：

1 - 听众必须加入到抽奖箱，而不是精灵本身。 （事件将是spriteclick,spritedblclick,spritetap,spritemousedown,spritemouseup等等..检查列表在这里：http://docs.sencha.com/extjs/6.2.0/classic/Ext.draw.Container.html#event-spriteclick）。

2 - 您需要将Ext.draw.plugin.SpriteEvents添加到Draw容器，以便能够侦听SpriteEvents。

尝试下面的代码：

var drawContainer = Ext.create('Ext.draw.Container', { 
    plugins: ['spriteevents'], 
    renderTo: Ext.getBody(), 
    width: 200, 
    height: 200, 
    sprites: [{ 
     type: 'circle', 
     fillStyle: '#79BB3F', 
     r: 50, 
     x: 100, 
     y: 100 
    }], 
    listeners: { 
     spriteclick: function (item, event) { 
      var sprite = item && item.sprite; 
      if (sprite) { 
       sprite.setAttributes({fillStyle: 'red'}); 
       sprite.getSurface().renderFrame(); 
      } 
     } 
    } 
});