0

Kinetic JS を使い始めたばかりです。

このリンクを見ると：例

コードの一部は次のとおりです。

function update(group, activeHandle) {
    var topLeft = group.get(".topLeft")[0],
        topRight = group.get(".topRight")[0],
        bottomRight = group.get(".bottomRight")[0],
        bottomLeft = group.get(".bottomLeft")[0],
        image = group.get(".image")[0],
        activeHandleName = activeHandle.getName(),
        newWidth,
        newHeight,
        imageX,
        imageY;

    // Update the positions of handles during drag.
    // This needs to happen so the dimension calculation can use the
    // handle positions to determine the new width/height.
    switch (activeHandleName) {
        case "topLeft":
            topRight.setY(activeHandle.getY());
            bottomLeft.setX(activeHandle.getX());
            break;
        case "topRight":
            topLeft.setY(activeHandle.getY());
            bottomRight.setX(activeHandle.getX());
            break;
        case "bottomRight":
            bottomLeft.setY(activeHandle.getY());
            topRight.setX(activeHandle.getX());
            break;
        case "bottomLeft":
            bottomRight.setY(activeHandle.getY());
            topLeft.setX(activeHandle.getX());
            break;
    }

残りのコードは jsdFiddle リンクにあります。私はおそらく、あからさまに明白な何かを見逃しています!

アンカーで囲まれた 2 つの画像が表示されます。サイズを変更したりドラッグしたりするときに、画像が黒い四角形 (境界線) を超えてはなりません。画像が以前にサイズ変更されていない限り、ドラッグは機能します。

サイズ変更された画像はまだ境界を越えています。サイズ変更された画像をドラッグ アンド ドロップすると、独自の非表示の境界が作成されることがあります (画像のサイズを変更する人がサイズ変更に右下のアンカーを使用しない場合)。

私が間違ったことを誰かが見ることができますか？

助けてくれてありがとう！

4

2 に答える 2

1

dragBoundFunc の「位置」は、画像ではなく、グループの左上です。

画像のサイズを変更するときにグループのサイズを変更するわけではないため、その「位置」は常に、画像ではなくグループの元のサイズと相対位置を参照します。

それはあなたの drawBoundFunc 計算を捨てています。

于 2013-07-09T02:23:32.047 に答える
1

あなたが抱えている問題は、アンカーを引っ張って画像のサイズを変更しているときに、次のように画像の位置を設定していることです:

if(activeHandleName === "topRight" || activeHandleName === "bottomRight") {
    image.setPosition(topLeft.getX(), topLeft.getY());
} else if(activeHandleName === "topLeft" || activeHandleName === "bottomLeft") {
    image.setPosition(topRight.getX() - newWidth, topRight.getY());
}

画像の位置は（グループに対して）更新されていますが、グループはdragBoundFuncセットを持つものです。これは、「見えない境界」理論を説明しています。画像はグループ内で再配置およびサイズ変更されていますが、グループの位置は静的なままです。グループをドラッグすると、境界が新しい画像サイズと一致しません。

このようにポジションを更新する理由はありますか？上記の行にコメントすると、サイズ変更してからドラッグする問題が修正されました。画像のサイズを変更でき、ドラッグ境界はそのまま残ります。少なくとも、必要な場合は、代わりに and force をsetPosition使用して、 1 つの位置のみを処理するようにする必要があります (画像は、左上隅である 0,0 のグループ位置に固定されます)。group.setPositionimage.setPosition(0,0);

私が気付いたもう 1 つの問題は、画像に負の幅または高さの値を指定できないことです。これを修正するには、次のようにします。

image.setSize(Math.abs(newWidth), Math.abs(newHeight));

さらに、画像に負の値を設定することはできないため、アンカーが互いに負の方向に移動しないように制限する必要があります。これを行うには、いくつかの簡単な座標検出ロジックを実行します。

if(topRight.getX() < topLeft.getX()+10) {
    topRight.setX(topLeft.getX()+10);
}
if(bottomRight.getX() < topLeft.getX()+10) {
    bottomRight.setX(topLeft.getX()+10);
}
if(bottomRight.getY() < topLeft.getY()+10) {
    bottomRight.setY(topLeft.getY()+10);
}
if(bottomLeft.getY() < topLeft.getY()+10) {
    bottomLeft.setY(topLeft.getY()+10);
}

dragBoundFunc最後の問題については、画像のサイズを変更しても境界を超えてはいけません。アンカーに似たものを簡単に追加できると思います。または、この段落のすぐ上のアンカー座標ロジックを処理した方法と同様のことを行うことができます。dragBoundFuncメソッドはよりクリーンになると思います。

ここに更新されたフィドルがありdragBoundFuncますが、アンカー用に実装していませんが、うまくいけばそれを理解できるでしょう!

http://jsfiddle.net/projeqht/aBkYb/

于 2013-07-09T02:27:36.937 に答える