Reputation: 10882
I want to be able to draw some geometry on canvas, using ExtJS draw package. But I also want to provide some interactivity, such as moving of a drawn circle or highlighting of geometry when a user clicks on it. But I could not achieve this. For example, this is what I've tried:
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!");
}
}
}]
});
When I click on the circle, nothing happens. So, my question is whether it is possible and if yes, how can we do this?
Upvotes: 0
Views: 786
Reputation: 4760
Two things that you will need to make this work:
1 - The listeners must be added to the draw container and not to the sprite itself. (The events will be spriteclick
, spritedblclick
, spritetap
, spritemousedown
, spritemouseup
and so on.. check a list here: http://docs.sencha.com/extjs/6.2.0/classic/Ext.draw.Container.html#event-spriteclick).
2 - You will need to add the Ext.draw.plugin.SpriteEvents to your Draw container so it will be able to listen to SpriteEvents.
Try the code below:
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();
}
}
}
});
Upvotes: 2