Resize a draggable fill with EaselJS

问题

I've got a project where I'm using EaselJS to create a fill (rectangle) and text over it inside a container. My objective is to make this rectangle and text draggable to move it over the canvas. This is already done and working well. My problem is when I try to resize the rectangle using scaleX and scaleY using a onMouseOver handler. This is indeed done, BUT the rectangle just moves away from it's initial point to some other location...

I've read I need to use the regX and regY properties to override this, but in the context of my code I just can't. Can somebody please tell me what I'm doing wrong??

Here's my JSFiddle example so you can see exactly what's going on. Just drag the mouse over the rectangle to see what I mean. It must be something easy to achieve but I'm not certain how, please help me.

THANKS!!! =)

回答1:

You issue is, that you are drawing your rects not at 0|0, the "standard" way is to draw your shape starting at 0|0 and then position the shape itself somewhere through .x and .y

rectOpt0.graphics.beginFill("#C51A76").rect(140,160,78,35);
=> changed to
rectOpt0.graphics.beginFill("#C51A76").rect(0,0,78,35);

and additionally I then placed the container at 140|160 + the regX/Y offset:

containerOpt0.regX = 78/2; //regX/Y to have is scale to the center point
containerOpt0.regY = 35/2;
containerOpt0.x = 140 + 78/2;  //placement + regX offset/correction
containerOpt0.y = 160 + 35/2;

here's the updated fiddle: http://jsfiddle.net/WfMGr/2/

来源：https://stackoverflow.com/questions/15794748/resize-a-draggable-fill-with-easeljs

标签

javascript

drag-and-drop

resize

easeljs