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();
            }
        }
    }
});