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