2012-01-11 11 views
1

私はこの問題を本当に抱えています。私は、SVGを使用するスケーリングサークルのフォトクロッパーを開発しようとしています。これは、クロップサークルを大きくしたり小さめにしたり、それを動かしたりする2つのハンドルを持っています。移動部分はシンプルですが、スケーリングが問題です。 Scale&Trig Programming Issue/Stuck

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

私は(それが移動したように、スケールハンドルが取り付けられていないものである気づく)、上記システムのセットアップを持っており、それは65 °の平面に沿って移動する(後に変更される可能性があり、それがどのように動作するかによって)。その部分はうまく動作しますが、今私はそれのぎざぎざさまで下がります。私は、スケールツールがどこから移動し始めたかと、X、Yに関連してどこが終わったのかという違いがあります(たとえば、0,0は開始位置になります。移動すると0,0から10になります)例えば-10(負のYと正のX)と反対側の反対)。

しかし、私は何とかその動きの違いを0.3と2.3の間の数字に変えなければなりません。ここで、0は減少します(左/下に行く)、1/2は上/右になります。ハンドルに常に比例するようにハンドルが常に付いている必要があります。

しかし、私はとても固執しています。私はちょうどどこに行けるか把握できません。 http://jsfiddle.net/FW4UB/

+1

をデモを見ることができますか? http://jsfiddle.net/armkn/ – Duopixel

+0

私はそれを得ると思います、ハンドルは、あなたが拡大するにつれ、周縁に沿って少し動くでしょうか?しかし、それはカーソルの下からハンドルを動かすでしょう、なぜ45度の倍数にそれらを置くのですか? – Duopixel

+0

これはまさに私がDuopixelを意味しているものですが、今はそれをいくつか掃除して、紫色の線でゆっくりと問題を解決することだと思います。あなたが何を変えたのか聞いてもいいですか – Steven

答えて

1

スケールハンドルの位置を見つけるには、trigは必要ありません。ちょうど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/