规模与三角函数编程问题/卡住

我真的被困在这个问题上我有。我正在尝试开发一个使用SVG的缩放圆形照片裁剪器，并且有两个手柄，一个用于使裁剪圆圈变大/变小，另一个用于移动它。四处移动很简单，但缩放是问题。规模与三角函数编程问题/卡住

https://skitch.com/sverbeek/ga5qt/photo.html

我有上述系统的设置，（注意刻度把手是未连上之一，因为它已经移动），并且它沿65 °一个平面中移动（其可以稍后改变取决于它是如何工作）。这部分工作正常，但现在我已经完全了解它的实质。我得到了缩放工具开始移动的位置和它与X，Y相关的位置之间的区别（例如，如果我将它移动到/ 0，它将从0,0到10，例如-10（负Y和正X），而另一侧则相反）。

但我需要以某种方式在打开移动该差值成若干0.3和2.3之间，其中0＃将被降低（打算左/底）和1/2＃将上升/右。我需要它与手柄成比例，因此手柄始终连接在一起。

但我如此坚持我只是想不出哪里去。我在http://jsfiddle.net/FW4UB/

来源

2012-01-11 Steven

演示你的意思是这样的吗？ http://jsfiddle.net/armkn/ – Duopixel 2012-01-11 18:35:27

我想我知道了，当你缩放时，手柄会沿着外围移动一点点？但是这会从光标下方移动手柄，为什么不把它们沿45度的倍数放置呢？ – Duopixel 2012-01-11 18:40:39

这正是我的意思Duopixel，现在我想这是清除它的一些和解决与紫线缩放速度较慢的问题的问题。我可以问你改变了什么吗？ – Steven 2012-01-12 12:40:37

做了的jsfiddle要找到规模手柄的位置，你不需要三角函数，只是反转Y轴。 x轴相同的缩放工具：

i.handles.scaleTool.translate(newX-i.handles.scaleTool.ox,newY-i.handles.scaleTool.oy); 
//Same formula except for a *-1 in the y axis 
i.handles.dragTool.translate(newX-i.handles.scaleTool.ox,(newY-i.handles.scaleTool.oy)*-1);

相应地扩大的圆圈，你需要用勾股定理，其中指出A2 + B2 = C2，其翻译在你的代码看起来像...

myset[0].attr({"r": Math.sqrt(Math.pow((myset[0].attr("cx")-cx),2) + Math.pow((myset[0].attr("cy")-cy),2))-15});

您可以查看这里http://jsfiddle.net/A3TPh/

来源

2012-01-12 18:13:33 Duopixel

规模与三角函数编程问题/卡住

回答

相关问题