規模與三角函數編程問題/卡住

我真的被困在這個問題上我有。我正在嘗試開發一個使用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

規模與三角函數編程問題/卡住

回答

相關問題