javascript - キャンバス境界のみにドラッグ アンド ドロップ イメージを実装する方法

Question

ドラッグ アンド ドロップ機能を実装しましたが、今必要なのはキャンバスからのドラッグを無効にする機能です。

左上隅の私の写真の座標は x: 0、y: 0 ですが、座標の左側に移動するとマイナスになります (例: X: -1、-2 ... -100)。

私がやりたいことは、Canvas の外で画像を移動できないようにすることです。

任意のアイデアまたはさらに優れたコードを歓迎します

Answer 1

あなたはほとんどそれに答えました。画像の x 位置が -2 の場合、0 に戻します。

// Checks if the picture is beyond the x boundary's...
if (picture.x < 0) { 
    picture.x = 0; 
} else if ((picture.x + picture.width > canvas.width) {
    picture.x = canvas.width - picture.width;
}

同じことが y 軸にも当てはまります。