設置對象拖動極限Fabric.js

Question

我在布JS新希望設置的阻力限制

我還與https://github.com/kangax/fabric.js/wiki/Working-with-events

沒能得到解決方案嘗試。

請檢查附加的圖像，對象可以移動任何軟件，但它應該只顯示在紅色區域。我想要這個。幫助我...提前感謝！

Answer 1

曾經爲我工作的是爲object:moving事件創建事件監聽器。當移動發生時，您將更新goodtop和goodleft變量，一旦出現界限將對象重新定位到最後的優點。

var goodtop, goodleft, boundingObject; 

canvas.on("object:moving", function(){ 
    var obj = this.relatedTarget; 
    var bounds = boundingObject; 
    obj.setCoords(); 
    if(!obj.isContainedWithinObject(bounds)){ 
     obj.setTop(goodtop); 
     obj.setLeft(goodleft); 
     canvas.refresh();  
    } else { 
     goodtop = obj.top; 
     goodleft = obj.left; 
    } 
}); 

Answer 2

儘管Orangepill的回答是正確的，但當對象碰到對象邊界時，它會產生「口吃」。如果您有一個矩形邊界框（而不是複雜的邊界對象），另一種方法是允許沿着邊界拖動對象並沿着邊界框「滑動」。您可以通過限制座標值並讓其他維度像往常一樣移動。一個例子片段看起來像這樣：

var canvas = new fabric.Canvas("bounded"); 

var boundingBox = new fabric.Rect({ 
    fill: "none", 
    width: 600, 
    height: 400, 
    hasBorders: false, 
    hasControls: false, 
    lockMovementX: true, 
    lockMovementY: true, 
    evented: false, 
    stroke: "red" 
}); 

var movingBox = new fabric.Rect({ 
    width: 100, 
    height: 100, 
    hasBorders: false, 
    hasControls: false 
}); 

canvas.on("object:moving", function() { 
    var top = movingBox.top; 
    var bottom = top + movingBox.height; 
    var left = movingBox.left; 
    var right = left + movingBox.width; 

    var topBound = boundingBox.top; 
    var bottomBound = topBound + boundingBox.height; 
    var leftBound = boundingBox.left; 
    var rightBound = leftBound + boundingBox.width; 

    // capping logic here 
    movingBox.setLeft(Math.min(Math.max(left, leftBound), rightBound - movingBox.width)); 
    movingBox.setTop(Math.min(Math.max(top, topBound), bottomBound - movingBox.height)); 
}); 

canvas.add(boundingBox); 
canvas.add(movingBox); 

See this example in JSFiddle here

Answer 3

SEE THE WORKING EXAMPLE 作爲水試試這個

只是用這個js

<script type="text/javascript"> 
    //use global variable for canvas object 


    var canvas; 
    var ctx; 
function onLoad() { 
    //get fabric canvas with id mycanvas 


    canvas = new fabric.Canvas('mycanvas'); 


    canvas.on("mouse : down",function{ 

    //get canvas 2d context 
    ctx = canvas.getContext("2d"); 

    ctx.beginPath(); 
    ctx.rect(115,60,221,390);//specify bounded rectangle 
    ctx.closePath(); 
    ctx.clip(); 
    ctx.save(); 
    }); 
    //now restore the context on mouse up 

    canvas.on("mouse : up",function(){ 
     ctx.restore();//restore the context 
    }); 
} 



</script> 

希望這將幫助你就這麼簡單。 Njoy編碼:) 現在，您可以爲Fabric.js支持的每個對象使用相同的剪輯區域進行轉換和移動。 試試吧:)。

Answer 4

Felix Fung的回答是一個起點，但有很多事情要考慮。這是一個的其中的一個版本。

它處理具有視口變換（即，縮放/平移）的畫布和以中心爲原點而不是左/頂點原點的對象。它還限制對象比頂部/左側的視圖更寬/更高，而不是底部/右側。

canvas.on("object:moving", function(e) { 
    var obj = e.target; 
    var canvas = obj.canvas; 
    var top = obj.top; 
    var left = obj.left; 
    var zoom = canvas.getZoom(); 
    var pan_x = canvas.viewportTransform[4]; 
    var pan_y = canvas.viewportTransform[5]; 

    // width & height we are constraining to must be calculated by applying the inverse of the current viewportTransform 
    var c_width = canvas.width/zoom; 
    var c_height = canvas.height/zoom; 


    var w = obj.width * obj.scaleX 
    var left_adjust, right_adjust 
    if(obj.originX == "center") { 
    left_adjust = right_adjust = w/2; 
    } else { 
    left_adjust = 0; 
    right_adjust = w; 
    } 

    var h = obj.height * obj.scaleY; 
    var top_adjust, bottom_adjust; 
    if(obj.originY == "center") { 
    top_adjust = bottom_adjust = h/2; 
    } else { 
    top_adjust = 0; 
    bottom_adjust = h; 
    } 

    // if you need margins set them here 
    var top_margin = 0; 
    var bottom_margin = 0; 
    var left_margin = 0; 
    var right_margin = 0; 


    var top_bound = top_margin + top_adjust - pan_y; 
    var bottom_bound = c_height - bottom_adjust - bottom_margin - pan_y; 
    var left_bound = left_margin + left_adjust - pan_x; 
    var right_bound = c_width - right_adjust - right_margin - pan_x; 

    if(w > c_width) { 
    obj.setLeft(left_bound); 
    } else { 
    obj.setLeft(Math.min(Math.max(left, left_bound), right_bound));   
    } 

    if(h > c_height) { 
    obj.setTop(top_bound); 
    } else { 
    obj.setTop(Math.min(Math.max(top, top_bound), bottom_bound));   
    } 
});