Set limite oggetto trascinare nella Fabric.js

Question

Sono nuovo in js tessuto vuole impostare il limite di resistenza

ho anche provare con https://github.com/kangax/fabric.js/wiki/Working-with-events

non

in grado di ottenere la soluzione.

Si prega di controllare l'immagine allegata, l'oggetto può spostarsi a prescindere ma dovrebbe essere visualizzato in rosso solo area. Voglio questo. aiutami ... grazie in anticipo !!

Answer 1

Ciò che ha funzionato per me è creare un listener di eventi per l'evento object:moving. Quando la mossa è in corso, aggiorni le variabili goodtop e goodleft e quando sei fuori dai limiti per riposizionare l'oggetto sugli ultimi punti buoni.

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

Mentre la risposta di Orangepill è corretta, produce un "balbuzie" quando l'oggetto colpisce i limiti di oggetto. Se si dispone di un riquadro di delimitazione rettangolare (e non di un oggetto di delimitazione complesso) un'alternativa è consentire all'oggetto di essere trascinato lungo i limiti e "scorrere" lungo il riquadro di delimitazione. Lo fai limitando i valori delle coordinate e lasciando che l'altra dimensione si muova come al solito. Un frammento di esempio apparirebbe in questo modo:

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 E 'semplice come un acqua provare questo

basta usare questo 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> 

Spero che questo vi aiuterà . Codifica Njoy :) ora puoi avere la stessa area di ritaglio per ogni oggetto supportato da Fabric.js per la trasformazione e lo spostamento. provalo :).

Answer 4

La risposta di Felix Fung era un punto di partenza, ma ci sono molte cose da considerare. Ecco una versione che rappresenta alcuni di loro.

Gestisce la tela con una trasformazione della vista (ovvero, ingrandita/panoramica) e gli oggetti che hanno origine dal centro invece di sinistra/dall'alto. Inoltre, vincola gli oggetti più larghi/più alti del viewport in alto/a sinistra anziché in basso a destra.

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));   
    } 
});