点線を描画する HTML5 キャンバス拡張機能を採用して適応させましたが、http://jsfiddle.net/VxCYL/2/に示すようにいくつかの問題があります。
例 1: 2 点間の距離が非常に小さい場合にドットが「束ねられる」ことを回避するにはどうすればよいですか (30,50 から 32,50 に移動する最初のコーナーを参照)。描画するか次のポイントに移動するかを決定するときに、最後のポイントからの距離を確認する必要があるのでしょうか。ポイントがたくさんあると、出力がぎこちなく見えます。
例 2: from.x が to.x よりも小さい、または from.y が to.y よりも小さい場合、つまり、逆方向に描画すると、moveTo が期待どおりに動作しません。つまり、示されている例では、線はまだ結合されている必要があります。上。
ありがとう。
最初の問題は、現状のライブラリでは簡単に修正できません。「角を丸める」ときに現在のドット/ダッシュの状態を蓄積して追跡できるように、ポイントの配列を取るラッパーメソッドが必要です。（時間が許せば、これを行うメソッドを書きます。そうする場合は、この回答を編集して通知コメントを追加します。）
を変更することにより、現在の現在のコードでこれを処理することはできませんdashArray。
たとえば[2,9]、パターンの名目上の dashArray では、11px ごとに繰り返されます。最初の行が 115px の場合、パターンのコピーを 10 個、ドットを 2px、ダッシュを 3px 描画したことを意味します。したがって、次のドットを描画する前に、次の行を 6px オフセットで開始する必要があります。[0,6,2,9,2,9,2,9,2,9,2,9,...]次の行の長さをカバーするまで、dashArray が必要になります。:/
2 番目の例は、明らかにコードのバグです。これを示す少し単純なデモを次に示します。
これを修正するには、xStepが負のときにdxが負であることを確認する必要があります。次の 1 行を追加します。
if (dx<0) xStep = -xStep;
ありがとう、あなたは紳士です。驚くべきことに、私は似たようなことを試しましたが、無知で dx<0 を dx<1 に設定しました。
この Fiddle に示されているもう 1 つの問題があります。
x または Y がインラインの場合、何もレンダリングされません。
最後の問題は解決されました。修正は、勾配を計算するときに Infinity または -Infinity に対応することでした。
var 勾配 = (dy / dx); 傾き = 傾き == 無限大 || 勾配 == -無限大 ? dy : スロープ;