ノードが作成される前に、パスが描画されたときのパスの長さを計算して表示したいと思います。その背後にある考え方は、ノードを正確に配置する場所を知るために、ユーザーが作成する前に各パスセグメントの長さを確認できるようにすることです。
私はgettotallengthメソッドを使用していますが、これはノードがクリックされた後のパスの長さを計算し、ユーザーがすでに作成したパスの長さのみを表示できるようにします。
私はjQueryを使用しています。
乾杯!
ノードが作成される前に、パスが描画されたときのパスの長さを計算して表示したいと思います。その背後にある考え方は、ノードを正確に配置する場所を知るために、ユーザーが作成する前に各パスセグメントの長さを確認できるようにすることです。
私はgettotallengthメソッドを使用していますが、これはノードがクリックされた後のパスの長さを計算し、ユーザーがすでに作成したパスの長さのみを表示できるようにします。
私はjQueryを使用しています。
乾杯!
要素をvisibility="hidden"またはopacity="0"にして、見えないようにするだけです。最後のセグメントの長さを知りたい場合は、パス全体を測定してから、最後のセグメントのないパスの非表示のコピーを測定して減算します。
最後に描かれた点からマウスの点までの線の場合は、基本的な数学= SQRT((x1-x2)^ 2 +(y1-y2)^ 2)を使用します。
唯一のトリックは、画面座標からユーザー座標に変換することです。これが私が使っている関数で、(これまでのところ)本当にうまく機能しています...
function getMousePos(evt)
{
var svgPoint = document.documentElement.createSVGPoint();
evt = evt || window.event;
if (typeof evt.pageX != 'undefined') // Firefox
{
svgPoint.x = evt.pageX;
svgPoint.y = evt.pageY;
}
else // IE et al
{
svgPoint.x = document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset || 0;
svgPoint.y = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset || 0;
}
return svgPoint.matrixTransform(document.documentElement.getScreenCTM().inverse());
};