使用EaselJS调整可拖动的填充大小 [英] Resize a draggable fill with EaselJS

问题描述

我有一个项目，我使用EaselJS在容器内创建一个填充（矩形）和文本。我的目标是使这个矩形和文本可拖动以将其移动到画布上。这已经做好了，工作得很好。
我的问题是当我使用onMouseOver处理程序使用 scaleX 和 scaleY 调整矩形大小时。这确实是完成的，但是矩形刚刚从最初的位置移动到其他位置...

我已经阅读我需要使用 regX 和 regy 属性来覆盖这个，但在我的代码的上下文中，我根本不能。有人可以告诉我我在做错什么？

这是我的 JSFiddle示例，所以你可以看到正在发生什么。只需将鼠标拖动到矩形上，看看我的意思。它必须是容易实现的东西，但我不确定如何，请帮助我。

谢谢！ =）

解决方案

你问题是，你正在绘制你的直觉不在0 | 0，标准的方式是从0 | 0开始绘制形状，然后通过 .x 和 .y

  rectOpt0.graphics.beginFill（＃C51A76）。rect（140,160,78,35）; 
 =>更改为
 rectOpt0.graphics.beginFill（＃C51A76）。rect（0,0,78,35）; 
  

此外，我将容器放在140 | 160 + regX / Y偏移量：

  containerOpt0.regX = 78/2; // regX / Y有缩放到中心点
 containerOpt0.regY = 35/2; 
 containerOpt0.x = 140 + 78/2; // placement + regX offset / correction 
 containerOpt0.y = 160 + 35/2; 
  

这是更新的小提琴： http://jsfiddle.net/WfMGr/2/

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!!! =)

解决方案

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/

这篇关于使用EaselJS调整可拖动的填充大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！