1

そこで、SVGを使用して描画ツールを作成したいと思います。パスのd属性を変更するために、かなり単純なアプローチを使用しています。

$("div#drawarea").bind("mousemove", function(ev) {

  ev.preventDefault();

  ev.stopPropagation();

  var pX= (ev.pageX - this.offsetLeft);

  var pY= (ev.pageY - this.offsetTop);

  $path.attr("d", $path.attr("d") + " L" +pX+ "," + pY); //using jquery-svg here to change the d attribute

});

ご覧のとおり、これはmousemove関数で行います。コードは機能しますが、マウスが高速で移動していると応答しなくなり、実際に滑らかな線にしたいときに多数の直線が作成されます。これは、mousemoveイベントで実行している多数の文字列連結が原因で発生していると思います（クリックが長く、実際には数千文字も保持されていると、パスのd属性が非常に大きくなる可能性があります）。

d属性を直接操作する代わりに、パスの最後に新しい値を追加するネイティブな方法があるかどうか疑問に思っています。jquery-svgソースコードを確認しましたが、ライブラリは内部でも単純な文字列連結モードを使用しているようです。そのため、そのメソッドを使用してもメリットはありません。

また、これが当てはまるのか、それともブラウザがトリガーできるmousemoveイベントの量を制限しているだけなのか（Xミリ秒ごとに1回？）、パフォーマンスの最適化によってこれが改善されるのではないかと思います。

4

2 に答える 2

2

SVG パスなどの DOMメソッドを使用します。より複雑なコードを記述する必要がありますが、ブラウザーはパス属性全体を再解析する必要はありません。たとえば Firefox はこれを利用しており、他のブラウザも同様です。

于 2012-08-20T21:25:09.730 に答える
1

SVG-Path データ属性 (リアルタイム アプリケーションの場合) を更新するための最速の方法は何かという質問に他の誰かがつまずいた場合に備えて、それについて小さなテストを実行します。

http://jsperf.com/svg-path-test

はい、文字列として設定するということは、解析する必要があることを意味します。これは DOM SVG インターフェイスの場合ではありませんが、最初の方法は依然としてはるかに高速です。おそらく、インターフェイスはポイントが追加されるたびに DOM を更新し、プロセス全体を遅くします。

于 2016-01-29T16:21:56.500 に答える