【发布时间】：2017-08-07 13:43:52
【问题描述】：
我一直试图将一个对象（在画布上用织物 js 构建）保持在边界内。它已在移动和旋转它时实现。我得到了Move object within canvas boundary limit 的帮助来实现这一目标。但是当我开始缩放对象时，它只是不断超出边界。我不明白必须做什么才能将其仅保持在边界内，即使在缩放时也是如此。请帮助我编写代码以防止这种行为。如果能附上demo就好了。
<html>
<head>
<title>Basic usage</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.min.js"></script>
</head>
<body>
<canvas id="canvas" style= "border: 1px solid black" height= 480 width = 360></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.item(0).set({
borderColor: 'gray',
cornerColor: 'black',
cornerSize: 12,
transparentCorners: true
});
canvas.setActiveObject(canvas.item(0));
canvas.renderAll();
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);
}
});
</script>
</body>
</html>
我的演示附在这里。 ： https://jsfiddle.net/3v0cLaLk/
【问题讨论】：
-
你看下面的解决方案“在画布边界限制内移动对象”stackoverflow.com/a/36011859/3389046？
-
是的蒂姆，我试过这个解决方案，但这似乎不起作用。一旦你的对象被拉伸到边界之外，它就会失去控制。
-
您能否进一步解释一下您所说的“它失控”是什么意思？你的意思是它走出了画布？？？
-
感谢蒂姆的回复。是的。它只是继续扩展，然后如果您离开鼠标，则看不到端点以将其放回原处。在小提琴中尝试一下。保持一侧接触边界并从另一端增加尺寸。让它越界。大概到那时你就会明白会发生什么。
-
@AnkitJoshi 为什么需要
Math.max？例如：obj.top = obj.top - obj.getBoudingRect().top还不够。我找不到一个案例，其中Math.max(obj.top, obj.top-obj.getBoundingRect().top);obj.top 将被视为obj.getBoundingRect().top is always negative
标签： javascript html5-canvas fabricjs