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