1

現在、ほとんどの SVG フレームワークはドラッグ アンド ドロップを提供しています。RaphaelJs 、 Extjs Drawing 、および SVG.js ( http://www.svgjs.com/ ) を使用しました。すべてのフレームワークは、要素自体にバインドすることでイベント処理メソッドを提供します。例えば：

dragStart: function(event){
    //'this' refers to the element itself
    this.doSomething();
    this.moveTo(event.x,event.y);
};

ただし、この結果、何百もの要素といくつかのロジック処理が脇にある場合、ブラウザーのパフォーマンスが大幅に低下します。私の要素は複合要素になります。つまり、長方形内のテキストまたはパスが含まれる可能性がありますが、長方形はドラッグされたときにイベントのターゲット (またはこれ) になる必要があります。要素には、onclick、onDblClick、onHover など、リッスンする他のイベントがあります。

私の質問は、これを最適化する方法はありますか? アプリケーションが上で述べた多くの複合要素を表示すると、ユーザー エクスペリエンスが低下します。

アップデート：

上記で話した手段を使用してアプリケーションを構築しました。イベント ハンドラーを各オブジェクトにバインドします。要素が onhover および onmousedown イベントをリッスンしている場合、結果はあまりユーザー フレンドリーではありません。アプリケーションを最適化することを考えていますが、方法がわかりません。効果はFFの方がはっきりしており、クロームの方が優れています。

4

1 に答える 1

0

本当にSVGが必要ですか? Fabric.jsは、Canvas 要素に基づくスケーリング、回転、ドラッグ アンド ドロップ、およびグループ化のための素晴らしい API です。

于 2014-11-05T19:51:17.420 に答える