EaselJs：（スケーリングまたは回転の後で）キャンバス内でのイメージの移動を制限する方法は？

Question

私はEaselJs（thisに似ています）を使って簡単な画像クロッピングツールを作成しています。これまでは、小さな問題を除いてほとんどのコードを書いてきました。ドラッグすると画像がコンテナ内に残るようにします。言い換えれば、イメージの下に背景を表示したくないということです。

私のコードを参照してください。

var img = new Image(); 
 
var canvas, stage, bmp; 
 

 
img.src = 'http://i.imgur.com/wMW4nDL.jpg?timestamp=' + Math.random(); 
 
img.crossOrigin = 'anonymous'; 
 

 
img.onload = function() { 
 
    canvas = document.getElementById('canvas'); 
 
    stage = new createjs.Stage(canvas); 
 
    bmp = new createjs.Bitmap(img).set(); 
 

 
    bmp.on("pressmove", function(evt) { 
 
    var ct = evt.currentTarget; 
 

 
    ct.x = evt.stageX; 
 
    ct.y = evt.stageY; 
 

 
    stage.update(); 
 
    }); 
 

 
    bmp.on('mousedown', function(evt) { 
 
    var ct = evt.currentTarget, 
 
     local = ct.globalToLocal(evt.stageX, evt.stageY), 
 
     nx = ct.regX - local.x, 
 
     ny = ct.regY - local.y; 
 
    //set the new regX/Y 
 
    ct.regX = local.x; 
 
    ct.regY = local.y; 
 
    //adjust the real-position, otherwise the new regX/Y would cause a jump 
 
    ct.x -= nx; 
 
    ct.y -= ny; 
 
    }); 
 
    
 
    bmp.regX = img.width/2; 
 
    bmp.regY = img.height/2; 
 
    bmp.x = bmp.y = 300; 
 
    bmp.scaleX = bmp.scaleY = 0.5; 
 
    
 
    bmp.rotation = 90; 
 
    stage.addChild(bmp); 
 
    stage.update(); 
 
}

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> 
 

 
<canvas id="canvas" width="600" height="200" style="cursor:move;border:2px solid red">Canvas is not supported</canvas>

は、コードを実行し、画像を下にドラッグしておきます。すぐにイメージがキャンバスの外に出て、キャンバスの下に白いキャンバスが見えるようになります。画像の上端がキャンバスに対して（0、0）より大きい場合、画像のドラッグを停止したい。ボトムの場合と同じですが、キャンバスボトムをたどってもイメージの下端がドラッグされている場合、ドラッグを停止したいと考えています。画像はそれがキャンバスの外になったときにドラッグを停止したように、

は、どのように私は自分のコードを更新することができますか？（左上、左下、右上または右下両方から）

Answer 1

私は最近createJSと似た何かをしました。すべての可能な移動シナリオに適用

if (ct.x > 0){ 
    ct.x = 0; 
} 

そしてもちろん：基本的に何がやりたいことは、このように、pressmoveリスナーに画像の動きを制限することです。以下は

は、私はこれらの正確な境界を強制するために使用私自身のコードの一部です。しかし、私のコードでは、ズームインされた画像の範囲を強制しなければならなかった点が異なります。たぶんそれはあなたにいくらか役立つでしょう。

function handleMouse(me) 
    { 

     switch (me.type){ 
      case "mousedown": 
       _initialX = _stage.mouseX; 
       _initialY = _stage.mouseY; 
       break; 
      case "pressmove": 
       if (_imageOrientation == "portrait"){ 
        handlePortraitMovement(); 
       } else if (_imageOrientation == "landscape"){ 
        handleLandscapeMovement(); 
       } 

       _overlayerImageCopy.x = _imagesContainer.x; 
       _overlayerImageCopy.y = _imagesContainer.y; 

       _initialX = _stage.mouseX; 
       _initialY = _stage.mouseY; 
       _stage.update(); 
       break; 
     } 

    } 

    function handlePortraitMovement() 
    { 
     var alphaOfMovement; 
     if (_stage.mouseX - _initialX > 0){ 
      //up movement 
      alphaOfMovement = -1; 
     } else { 
      //down movement 
      alphaOfMovement = 1; 
     } 
     _imagesContainer.y += _stage.mouseY - _initialY; 
     if (_imagesContainer.y >= _maxMovementPosition){ 
      _imagesContainer.y = _maxMovementPosition; 
     } 
     if (_imagesContainer.y < -_maxMovementPosition + _canvas.height * (1 - _imagesContainer.scaleY)){ 
      _imagesContainer.y = -_maxMovementPosition + _canvas.height * (1 - _imagesContainer.scaleY); 
     } 
     if ((alphaOfMovement == 1) && (-_imagesContainer.x + SQUARE_SIZE < SQUARE_SIZE * _imagesContainer.scaleX)){ 
      _imagesContainer.x += _stage.mouseX - _initialX; 
      if (-_imagesContainer.x + SQUARE_SIZE > SQUARE_SIZE * _imagesContainer.scaleX) { 
       _imagesContainer.x = SQUARE_SIZE - SQUARE_SIZE * _imagesContainer.scaleX; 
      } 
     } 
     if (alphaOfMovement == 1 && _imagesContainer.x > 0){ 
      _imagesContainer.x = 0; 
     } 
     if (alphaOfMovement == -1 && _imagesContainer.x < 0){ 
      _imagesContainer.x += _stage.mouseX - _initialX; 
     } 
    } 

    function handleLandscapeMovement() 
    { 
     var alphaOfMovement; 
     if (_stage.mouseY - _initialY > 0){ 
      //left movement 
      alphaOfMovement = -1; 
     } else { 
      //right movement 
      alphaOfMovement = 1; 
     } 
     _imagesContainer.x += _stage.mouseX - _initialX; 
     if (_imagesContainer.x >= _maxMovementPosition){ 
      _imagesContainer.x = _maxMovementPosition; 
     } 
     if (_imagesContainer.x < -_maxMovementPosition + _canvas.width * (1 - _imagesContainer.scaleX)){ 
      _imagesContainer.x = -_maxMovementPosition + _canvas.width * (1 - _imagesContainer.scaleX); 
     } 
     if ((alphaOfMovement == 1) && (-_imagesContainer.y + SQUARE_SIZE < SQUARE_SIZE * _imagesContainer.scaleY)){ 
      _imagesContainer.y += _stage.mouseY - _initialY; 
      if (-_imagesContainer.y + SQUARE_SIZE > SQUARE_SIZE * _imagesContainer.scaleY) { 
       _imagesContainer.y = SQUARE_SIZE - SQUARE_SIZE * _imagesContainer.scaleY; 
      } 
     } 
     if (alphaOfMovement == 1 && _imagesContainer.y > 0){ 
      _imagesContainer.y = 0; 
     } 
     if (alphaOfMovement == -1 && _imagesContainer.y < 0){ 
      _imagesContainer.y += _stage.mouseY - _initialY; 
     } 
    }