我正在尝试阻止旋转的Label被拖出屏幕,但我无法弄清楚如何在旋转状态下获取对象 的MinX,MaxX,MinY和MaxY 即可。 getHeight& getWidth仅返回旋转之前的值。
以下是一个说明问题的示例:
var stage = new Kinetic.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
var layer = new Kinetic.Layer();
var labelLeft = new Kinetic.Label({
x: 95,
y: 180,
opacity: 1.0,
listening: true,
draggable: true,
rotationDeg: -45,
text: {
text: 'Pointing Arrow',
fontFamily: 'Calibri',
fontSize: 20,
padding: 5,
fill: 'white'
},
rect: {
fill: 'blue',
pointerDirection: 'left',
pointerWidth: 20,
pointerHeight: 38,
stroke: 'black',
strokeWidth: 2
},
dragBoundFunc: function (pos) {
var newY = pos.y < 50 ? 50 : pos.y;
return {
x: pos.x,
y: newY
};
}
});
layer.add(labelLeft);
// add the layer to the stage
stage.add(layer);
在这个例子中,我使用dragBoundFunc来阻止标签被拖到y = 50之上。但由于标签已旋转,其实际最高点(MinY)已更改,因此您可以将其向上拖动并部分偏离视图。
我真正需要的是一个能够返回绝对当前MinX,MaxX,MinY和MaxY的函数 - 考虑到旋转角度和文本长度并不总是相同。
有人可以帮忙吗?
答案 0 :(得分:3)
以下是计算旋转矩形(标签)的边界框大小的方法。
var w = label.getWidth();
var h = label.getHeight();
var rads = label.getRotation();
var c = Math.abs(Math.cos(rads));
var s = Math.abs(Math.sin(rads));
var newWidth = h * s + w * c;
var newHeight = h * c + w * s;
然后假设您总是围绕中心旋转,左/上边界是:
var centerX = label.getX()+label.getWidth()/2;
var centerY = label.getY()+label.getHeight()/2;
var MinX = centerX - newWidth/2;
var MinY = centerY - newHeight/2;
[免责声明:这只是我的头脑 - 相应地审查它! ]