PDA

View Full Version : Drag and resize of image in Ext.draw.Component



chetan.nellekeri
17 Nov 2013, 4:06 AM
Hi, I am using Ext.draw.Component to draw image and mainly to take advantage of <svg> of HTML5..
How do I Resize and drag the image in the component.

I used draggable: true of Ext.draw.Sprite for dragging... and Ext.resizer.Resizer for resizing the image, but it is not working...

Below is code snippet for which I want to apply resize and drag capabilities using mouse



Ext.onReady(function () {
Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
width: 200,
height: 200,
items: [{
type: "image",
src: "http://icons.iconarchive.com/icons/icons-land/transport/256/Truck-icon.png",
width: 200,
height: 200,
x: 0,
y: 0
},
{
type: "image",
src: "http://www.gettyicons.com/free-icons/108/transport/png/256/lorry_green_256.png",
width: 200,
height: 200,
x: 0,
y: 300
}]
});
});

vadimv
17 Nov 2013, 8:38 AM
Enjoy:



Ext.onReady(function () {
Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
width: 200,
resizable: {
dynamic: true,
pinned: true,
handles: 'all'
},
draggable: {
constrain: true,
constrainTo: Ext.getBody()
},

height: 200,
items: [{
type: "image",
src: "http://icons.iconarchive.com/icons/icons-land/transport/256/Truck-icon.png",
width: 200,
height: 200,
x: 0,
y: 0
},
{
type: "image",
src: "http://www.gettyicons.com/free-icons/108/transport/png/256/lorry_green_256.png",
width: 200,
height: 200,
x: 0,
y: 300
}]
});
});

chetan.nellekeri
17 Nov 2013, 10:48 PM
Sorry Vadimv,

I am not looking to drag or resize the entire component.. I want to drag and resize the individual image inside the component...

vadimv
17 Nov 2013, 11:39 PM
To drag a sprite, look at Ext.draw.Sprite.draggable and inside its code to understand how to.
For resize as far as I know, at sprite level there's nothing by default implemented. You will need to add a few points as resize references and attach to them mouse events and then inside the handlers change sprites attributes

chetan.nellekeri
18 Nov 2013, 1:10 AM
Thanks Vadimv,
But draggable of Ext.draw.Sprite is not working... Thats what i mentioned in my first post...
And regarding mouse events, Mousedown is firing.. But mouseup is not firing when image is dragged....

Thanks
Chetan

vadimv
18 Nov 2013, 6:22 AM
Yes, draggable seems to have a problem, let's wait for now and see if the bug will be confirmed(posted already) And btw, you can't use Ext.resizer.Resizer for SVG sprites, it works only for html elements.

chetan.nellekeri
18 Nov 2013, 7:22 AM
Ya I tried dat too.. Do you have a working example..?

Generally Resizer will wrap image tag inside a div tag and add 4 more div tags(top, left, bottom, right)..
When I applied Resizer it added only 4 div tags below image tag.. The main div tag was missing...

I have created a method like below and passed sprite object to it.. Is it the correct way or did I miss anything..



applyResize: function(sprite){
console.log(sprite.id);
var basic = Ext.create('Ext.create', 'Ext.resizer.Resizer', {
el: sprite.el,
width: 200,
height: 100,
minWidth:100,
minHeight:50
});

vadimv
18 Nov 2013, 7:33 AM
Like I said, you are trying to resize and drag SVG tags not HTML tags, which means that Resizer won't work for you

vadimv
18 Nov 2013, 11:35 PM
Yep the draggable bug is confirmed: http://www.sencha.com/forum/showthread.php?276219-4.2.x-Sprite.initDraggable-throws-an-error-when-sprite-is-added-to-surface.

chetan.nellekeri
19 Nov 2013, 2:42 AM
Thanks For reporting =D>