在raphael js中调整/拖动矩形

Question

我很新于JavaScript和RaphaelJS，对于我的混乱代码我感到抱歉，但我需要完成下一个任务：我需要绘制一个矩形，并制作一种方法来拖放和调整大小。而且这种方式必须在平板电脑上运行。我想在底部和右侧绘制2个小圆圈，并使用它们调整此矩形的大小，但我遇到了数学问题，因为下面的代码存在一些问题：http://jsfiddle.net/x5zHp/（只有一个圆圈）。

当我拖动矩形时，您可以看到鼠标和矩形不同时移动，鼠标箭头滑出。

请指出我的错误以及可能的最佳代码解决方案，我会非常感激任何帮助。 我找到了一个名为Free Transform的插件，但我想自己完成这个任务，因为最终我需要对其进行一些处理，并且使用此插件将很难工作（例如，我将更改圆圈的大小或使其不可见，因为它必须易于在平板电脑上使用手指捕捉圆圈） 提前感谢您的帮助，对我的英语表示歉意

更新

最终我让它工作了：http://jsfiddle.net/y5Jag/7/。我还添加了一个不可见的圆圈，因此很容易捕捉到可见的圆圈（实际上我将在平板电脑上使用它）。我唯一真正讨厌的是代码。它非常混乱。

this.ox = this.attr('cx');
this.oy = this.attr('cy');
this.rox = Spectrum.resizer.attr('cx');
this.roy = Spectrum.resizer.attr('cy');
this.rwidth = Spectrum.rect.attr('width');
this.rheight = Spectrum.rect.attr('height');

有什么建议可以美化这个...

- Victor

Answer 1

如果我理解你的问题正确，你已经接近答案了，你只需要将距离乘以二，因为正方形两边都被缩放了...

this.scale = params.scale.y + dy*2 / rect.attr('height');

http://jsfiddle.net/y5Jag/

- methodofaction

---

不完全正确，请尝试将此矩形水平和垂直移动。如果您将其水平移动，则鼠标指针始终位于矩形内，如果您将其垂直移动，则会滑出矩形。还有另一件事-我不知道如何解释，但是当您转换矩形时，然后将其拖动，然后再次转换（并多次执行此操作），您会注意到奇怪的行为，如嗯抽搐或类似的东西。数学上肯定有问题... - Victor

其实我重写了我的代码，这里是新的例子http://jsfiddle.net/y5Jag/3/。这一次我尝试了：this.attr({x: this.ox + dx/Spectrum.scale.x, y: this.oy + dy/Spectrum.scale.y}); 然后当我用鼠标移动矩形时它看起来没问题，但是如果你再进行几次变换，矩形就会不知怎么地改变坐标，我完全搞不清楚为什么 :( 试着玩一下这个例子，你就会看到.. - Victor

Raphael 2.0+ 应用矩阵变换到元素上，但似乎在某些时候会计算错误的变换。我能想到的唯一解决方法是设置矩形的高度、宽度、x 和 y 值，而不是进行缩放，看看是否有效。很抱歉我不能提供更多帮助。 - methodofaction