ズーム時に拡大縮小するキャンバスの境界線の作成方法は？ （fabric.js）

Question

私はこの件に関するいくつかの記事を読んだことがありますが、私はまだ私の特定の問題の解決策を解明していません。

ここはplnkです。

http://plnkr.co/edit/ScJGKwR74H8UjsaJqfZF?p=preview

ここでの目的は、あなたが画像をズームすることができることですが、ドラッグ時に画像が空白なしですべての回でキャンバス内の表示されたまま。問題はコードのこの部分で実際に起こっています。私はズームボタンをクリックすると

obj = e.target; 

    obj.setCoords(); 

    var boundingRect = obj.getBoundingRect(); 
    var zoom = canvas.getZoom(); 
    var viewportMatrix = canvas.viewportTransform; 

    boundingRect.top = (boundingRect.top - viewportMatrix[5])/zoom; 
    boundingRect.left = (boundingRect.left - viewportMatrix[4])/zoom; 
    boundingRect.width /= zoom; 
    boundingRect.height /= zoom; 

    var pHeight = obj.canvas.height * zoom, 
     pWidth = obj.canvas.width * zoom, 
     nHeight = obj.canvas.height - pHeight, 
     nWidth = obj.canvas.width - pWidth; 

    // top-left corner 
    if (boundingRect.top < nHeight || boundingRect.left < nWidth) { 
    obj.top = Math.max(obj.top, nHeight + obj.top - boundingRect.top); 
    obj.left = Math.max(obj.left, nWidth + obj.left - boundingRect.left); 
    } 

、私は画像が画面外にドラッグすることにしたいが、空白を残したことがないように、負の数の出力を持っていると思います。私はそれが半分働いているが、境界限度は常に画像の拡大縮小版に計算されるようにそれを得る方法がわからないのですか？

誰かが間違っていることを指摘できますか？

おかげ

Answer 1

は、私はそれがどちらの方向にキャンバスの外に行くから、それを防ぐための右下の角を使用するようにやや左上隅のロジックをリファクタリングしようとしました。代わりに、画像の上部がキャンバスの大きさの違いを超えてしまったかどうかをチェックするの、それが画像の下部にはのオフに来ているかどうかをチェックします。基本的

var canvasHeight = obj.canvas.height/zoom, 
    canvasWidth = obj.canvas.width/zoom, 
    rTop = boundingRect.top + boundingRect.height, 
    rLeft = boundingRect.left + boundingRect.width; 

    // Where top left corner check used to be 
    if (rTop < canvasHeight || rLeft < canvasWidth) { 
    obj.top = Math.max(obj.top, canvasHeight - boundingRect.height); 
    obj.left = Math.max(obj.left, canvasWidth - boundingRect.width); 
    } 

：ように見えます拡大されたキャンバスの底部。

http://plnkr.co/edit/cjAWEqrdnL6skKQYsFM2?p=preview