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