1

ドラッグとサイズ変更のために、AngularJS を d3 と統合しようとしています。rectSVG要素でドラッグ可能で、サイズ変更ハンドルを使用してサイズ変更できるオブジェクトを作成できました。サイズ変更ハンドルは正常に機能しますが、北または東方向にサイズ変更しようとすると、サイズ変更が不安定になります。問題のデモとして次の Plunk を作成しました: http://plnkr.co/tG19vpyyw0OHMetLOu2U。(私が遭遇した問題を示すために単純化したので、サイズ変更ハンドルは 1 つだけです。)

ドラッグは正常に機能し、西方向と南方向のサイズ変更も同様に機能します (デモには示されていません)。

コミュニティに尋ねて、以前に誰かがこれに遭遇したかどうかを確認することにしました。皆さん、ありがとうございました。

4

1 に答える 1

2

問題は、rect要素自体とそれを囲むg要素を変更していることです。rectのサイズの設定と の位置の設定の間には、非常に短い遅延がありgます。これは、2 つの別々のコマンドで実行する必要があるためです。この遅延の間に、ドラッグ四角形に対するカーソル位置が変化dragし、一貫性のない中間状態に対応する値で新しいイベントが発生します。これは直後に修正され (両方の要素の属性が調整されるとすぐに) drag、不一致を修正する新しいイベントが発生しますが、ちらつきとして目立ちます。

これを修正する最も簡単な方法は、要素のサイズと位置の両方を変更し、要素rectには何も変更しないことです。gこれは、ドラッグ長方形の位置も調整することを意味し、コードの見栄えが悪くなりますが、タイミング/不整合の問題は回避されます。

そうmyrectなる

var myRect = d3.select(document.createElementNS("http://www.w3.org/2000/svg", "rect"))
            .attr("data-ng-width", "{{square.w}}")
            .attr("data-ng-height", "{{square.h}}")
            .attr("stroke", "yellow")
            .attr("stroke-width", 3)
            .attr("fill-opacity", 0)
            .attr("data-ng-x", "{{square.x}}")
            .attr("data-ng-y", "{{square.y}}");

とresizer

var resizer = myGroup.append("rect")
            .attr("width", 5)
            .attr("height", 5)
            .attr("stroke", "blue")
            .attr("stroke-width", 1)
            .attr("fill-opacity", 0)
            .attr("cursor", "nw-resize")
            .attr("x", "{{square.x-2.5}}")
            .attr("y", "{{square.y-2.5}}")
            .call(nresize);

こちらのソリューションでコードを更新しました。

于 2013-07-04T17:38:33.350 に答える