ले जाएँ वस्तु

Question

मैं कैनवास के भीतर चलती वस्तु को सीमित करने के कोशिश कर रहा हूँ, लेकिन मैं ऊपर और बाईं ओर की सीमा क्षेत्र के साथ वस्तु के लिए कुछ परेशानी हो रही है और कर रहा हूँ जब मैं बड़ा आकार के साथ वस्तु पैमाने पर उस समय भी मैं के अनुसार कैनवास के बाईं और शीर्ष की ओर चलती वस्तु को सीमित करने के

canvas.observe("object:moving", function(e){ 
     var obj = e.target; 
     // if object is too big ignore 
     if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){ 
      return; 
     } 

     var halfw = obj.currentWidth/2; 
     var halfh = obj.currentHeight/2; 
     var bounds = {tl: {x: halfw, y:halfh}, 
      br: {x: obj.canvas.width-halfw, y: obj.canvas.height-halfh} 
     }; 

     // top-left corner 
     if(obj.top < bounds.tl.y || obj.left < bounds.tl.x){ 
      obj.top = Math.max(obj.top, bounds.tl.y); 
      obj.left = Math.max(obj.left, bounds.tl.x) 
     } 


     // bot-right corner 
     if(obj.top > bounds.br.y || obj.left > bounds.br.x){ 
      obj.top = Math.min(obj.top, bounds.br.y); 
      obj.left = Math.min(obj.left, bounds.br.x) 
     } 
}); 

Answer 1

बस अपने js फ़ाइल में नीचे दिए गए कोड को जोड़ने और पैमाने एक्स (बाएं) और वाई (ऊपर) का मूल्य बदल नहीं पा रहा हूँ अपने कैनवास ऊंचाई और चौड़ाई।

// canvas moving limit 

canvas.observe("object:moving", function(e){ 
     var obj = e.target; 
     // if object is too big ignore 

     var halfw = obj.currentWidth/2; 
     var halfh = obj.currentHeight/2; 
     var bounds = {tl: {x: halfw, y:halfh}, 
      br: {x: obj.canvas.width , y: obj.canvas.height } 
     }; 

     // top-left corner 



      // alert("text"); 
     if(obj.top < bounds.tl.y || obj.left < bounds.tl.x){ 
      obj.top = Math.max(obj.top, '10' ); 
      obj.left = Math.max(obj.left , '50') 
     } 


     // bot-right corner 
     if(obj.top > bounds.br.y || obj.left > bounds.br.x){ 
      obj.top = Math.min(obj.top, '360' ); 
      obj.left = Math.min(obj.left, '470') 
     } 

}); 
// end canvas moving limit 

Answer 2

canvas.on('object:moving', function (e) { 
     var obj = e.target; 
     // if object is too big ignore 
     if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){ 
      return; 
     }   
     obj.setCoords();   
     // top-left corner 
     if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){ 
      obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top); 
      obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left); 
     } 
     // bot-right corner 
     if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width){ 
      obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top); 
      obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left); 
     } 
}); 

Answer 3

यहाँ आप पा सकते हैं समाधान: -

var canvas = window._canvas = new fabric.Canvas('c'); 
canvas.selection = false; 

fabric.Object.prototype.set({ 
    transparentCorners: false, 
    cornerColor: 'red', 
    cornerSize: 12, 
    padding: 0 
}); 
text = new fabric.Text('Sample',{ 
    top: canvas.height/2, 
    left: canvas.width/2, 
    fill: '#000000' 
}); 

canvas.add(text); 
canvas.setActiveObject(text); 

canvas.observe('object:scaling', function (e) { 
    var obj = e.target; 
    if(obj.getHeight() > obj.canvas.height || obj.getWidth() > obj.canvas.width){ 
    obj.setScaleY(obj.originalState.scaleY); 
    obj.setScaleX(obj.originalState.scaleX);   
    } 
    obj.setCoords(); 
    if(obj.getBoundingRect().top - (obj.cornerSize/2) < 0 || 
    obj.getBoundingRect().left - (obj.cornerSize/2) < 0) { 
    obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top + (obj.cornerSize/2)); 
    obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left + (obj.cornerSize/2));  
    } 
    if(obj.getBoundingRect().top+obj.getBoundingRect().height + obj.cornerSize > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width + obj.cornerSize > obj.canvas.width) { 

    obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top - obj.cornerSize/2); 
    obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left - obj.cornerSize /2);  
    } 
}); 

canvas.observe('object:moving', function (e) { 
    var obj = e.target; 
    if(obj.getHeight() > obj.canvas.height || obj.getWidth() > obj.canvas.width){ 
    obj.setScaleY(obj.originalState.scaleY); 
    obj.setScaleX(obj.originalState.scaleX);   
    } 
    obj.setCoords(); 
    if(obj.getBoundingRect().top - (obj.cornerSize/2) < 0 || 
    obj.getBoundingRect().left - (obj.cornerSize/2) < 0) { 
    obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top + (obj.cornerSize/2)); 
    obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left + (obj.cornerSize/2));  
    } 
    if(obj.getBoundingRect().top+obj.getBoundingRect().height + obj.cornerSize > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width + obj.cornerSize > obj.canvas.width) { 

    obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top - obj.cornerSize/2); 
    obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left - obj.cornerSize /2);  
    } 
}); 

http://jsfiddle.net/jw1827fm/1/

Answer 4

मैं सिर्फ बालाजी का कोड थोड़ा बेहतर अब

canvas.on('object:moving', function (e) { 
    var obj = e.target; 

    // if object is too big ignore 
    if(obj.getScaledHeight() > obj.canvas.height || obj.getScaledWidth() > obj.canvas.width){ 
     return; 
    }   
    obj.setCoords();   
    // top-left corner 
    if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){ 
     obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top); 
     obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left); 
    } 
    // bot-right corner 
    if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width){ 
     obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top); 
     obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left); 
    }}); 

Answer 5

के रूप में मैं जरूरत से काम करता है संशोधित टी उसका, यहां बालाजी के कोड के आधार पर मेरा ओवरवर्क किया गया कार्य ऑफसेट सेट करने के लिए है, इसलिए वस्तुओं को केवल आंशिक रूप से कैनवास के भीतर दिखाया जा सकता है।

canvas.on('object:moving', function (e) { 
     var obj = e.target; 

     // if object is too big ignore 
     if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){ 
      return; 
     }   

     // set offset for moving out the canvas (20 % of object persists in canvas) 
     var offsetWidth = obj.getBoundingRect().width * 0.8; 
     var offsetHeight = obj.getBoundingRect().height * 0.8; 

     obj.setCoords();   

     // top-left corner 
     if(obj.getBoundingRect().top < -offsetHeight || obj.getBoundingRect().left < -offsetWidth){ 
      obj.top = Math.max(obj.top, obj.top-(obj.getBoundingRect().top+offsetHeight)); 
      obj.left = Math.max(obj.left, obj.left-(obj.getBoundingRect().left+offsetWidth)); 
     } 
     // bot-right corner 
     if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height + offsetHeight || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width + offsetWidth){ 
      obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top+offsetHeight); 
      obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left+offsetWidth); 
     } 
});