[英]Keep KineticJS shapes inside canvas
Is there a simple way to make sure that your shapes stay inside the canvas, when using the drag&drop functionality from KineticJS? 使用KineticJS的拖放功能时,是否有一种简单的方法来确保形状停留在画布中?
Standard, the shape leaves the canvas a bit until your mouse hits the canvas border. 标准情况下,形状会稍稍离开画布,直到您的鼠标碰到画布边框为止。 I would like that to be the shapes border, instead of the mouse.
我希望它是形状边框,而不是鼠标。
Is there a way to make that happen? 有没有办法做到这一点?
Use dragBoundFunc
explained in the KineticJS tutorial 使用
dragBoundFunc
在解释KineticJS教程
And the code: 和代码:
dragBoundFunc: function(pos) {
console.log(bbox.getWidth());
var xBound = stage.getWidth() - bbox.getWidth();
var yBound = stage.getHeight() - bbox.getHeight();
// Check X boundries
if (pos.x > xBound) {
var newX = xBound;
} else if (pos.x <= 0) {
var newX = 0;
} else {
var newX = pos.x;
}
// Check Y boundries
if (pos.y > yBound) {
var newY = yBound;
} else if (pos.y <= 0) {
var newY = 0;
} else {
var newY = pos.y;
}
return {
x: newX,
y: newY
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.