javascript - ExtJS绘制包和鼠标事件

Question

我希望能够使用 ExtJS draw package 在 Canvas 上绘制一些几何图形。但我还想提供一些交互性，例如当用户单击绘制的圆圈时移动其或突出显示几何图形。但我无法实现这一目标。例如，这是我尝试过的:

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 - 监听器必须添加到绘制容器而不是 Sprite 本身。 (事件将是 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();
            }
        }
    }
});