在画布边界范围内移动对象 [英] Move object within canvas boundary limit
本文介绍了在画布边界范围内移动对象的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图将移动对象限制在画布中,但是我在移动具有顶部和左侧限制区域的对象时遇到了一些困难,当我缩放具有较大尺寸的对象时,我也无法限制对象的移动.画布左侧和顶部的移动对象
I am trying to limit the moving object within the canvas but i am getting some difficulty to moving object with limit area on top and left side and when i scale the object with big size that time also i am not able to limit the moving object on left and top side of the canvas
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)
}
});
推荐答案
只需在您的js文件中添加以下代码,并根据画布的高度和宽度更改比例X(左)和Y(上)的值. /p>
Just add the below code in your js file and change the value of scale X(left) and Y(top) according to your canvas height and width.
// 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
这篇关于在画布边界范围内移动对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文