0

この 2 日間、私が戦ってきた問題は少し奇妙で、タイトルでどのように指定すればよいかよくわかりませんでした。

x 値と y 値を持つオブジェクトの形式でポイント (line.attrs.points) の配列を持つ KineticJs Line があります。特定のキネティック要素をドラッグしているときに、線に動的にポイントを追加して再描画したいと考えています。(例:線は次のようになります:\ _ _ _ /そして特定の条件下で別の形状をドラッグしているときに、動的にポイントを追加してそのように見せたい:\ _ / \ _ /)したがって、その条件が満たされた場合他の形状の dragmove イベントでは、次のコードを使用します。

line.attrs.points.push({x:xValue, y:yValue});
line.attrs.points.sort(function(a,b){
    return a.x > b.x; // I tried with a.x - b.x and with short if-s which return only -1, 0 or 1, still nothing happened
});
line.setPoints(line.attrs.points);
layer.draw();

しかし、ポイントはソートされていないため、線はいくつかの x に移動し、次に小さい x に戻り、再び前に進みます。これは、ポイントのソート後に期待した動作ではありません!

奇妙なことに、console.log(line.attrs.points); を使用すると、3 つの連続したポイントの追加 (追加ごとに +2 ポイント) の場合、次の出力が得られます。

[Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

しかし、配列を開くと、各配列に 10 個のオブジェクトがあります。6 つのオブジェクトの配列を開いて内部に 10 個のオブジェクトを表示するにはどうすればよいでしょうか (私は Google Chrome のデフォルト コンソールを使用しています)。console.log が非同期であり、すべての追加が行われた後にそれらをログに記録する可能性はありますか?

主な問題は、ポイントの種類が機能していないことですが、それでも、コンソールがなぜそれほど奇妙な動作をするのかを理解できてうれしいです.

事前に感謝し、長い説明を申し訳ありません!

4

1 に答える 1