2017-10-30 9 views
0

私は繰り返すSVGパスを生成しようとしています。これを行うために、私は次のポイントに最後の点から直線を描きたいしかしそう...グラフ上の点の交点を計算する

enter image description here

のような行を作成するために、グラフ上の2点の最小値をプロットしています次のSVGで繰り返しパスを実行し、それを行うには、現在のグラフが終了し、次の開始位置にあるYの位置を見つける必要があります。

enter image description here

xと2点のy座標に基づいて、どのようにy座標を計算ない(つまり、赤だと、この例では40であるべきである)

大幅理解任意の助け!

答えて

1

タイルサイズがa x aであると仮定すると、最初のタイルの左下から調整システムを構築できます。また、最初の行の終了が(x1,y1)であり、この新しい調整システムでは、2行目の開始が(a+x2,y2)になるとします。私が意味することを理解するために、次の絵画の傑作(:D)を見てください。 enter image description here OK、今あなたがこれら2点のラインの公式書き込むことができます。

y-y1=((y2-y1)/(a+x2-x1))(x-x1) 

axを交換しyための式を解くには何が必要になるでしょう:

y=((y2-y1)/(a+x2-x1))(a-x1)+y1 

UPDATE

表現した値から、次の式を使用できます。置き換えx1=70, x2=20, y1=100, y2=0, a=100

+0

ちょっと@Sinapseお返事ありがとうございます。私はあなたの数式を試した後に少し混乱していますが、それはおそらく私のひどい数学の知識と私の混乱する質問にまで下がっています。それぞれのグラフは別々のグラフなので、両方のグラフの座標は同じです:この例ではポイント1は '{x:20、y:0}'ポイント2は '{x:70、y:100} 'です – DanV

+0

@Bob__ oopsそれを逃した、答えを更新しました;) – Sinapse

+0

@ Danvは答えを更新しました – Sinapse