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

2つのこと：

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コンテナに追加して、SpriteEventを聴くことができるようにする必要があります。

以下のコード試してみてください。

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

を