Konva-使用旋转并保持在范围内 [英] Konva - Using Rotate and keeping within bounds
问题描述
我正在使用Konva在网页上创建区域.我为矩形创建了一个dragBoundFunc函数，用于检查pos.x和pos.y以及画布和rect的宽度，并且效果很好-矩形在拖动时只停留在我想要的区域.
I am using Konva to create an area on a webpage. I create a dragBoundFunc function for my rectangle checking pos.x and pos.y and width of canvas and rect and this works fine - the rectangle only stays in this area as I want it to when dragged.
我将矩形旋转90度时出现了问题.现在，当我检查getClientRect().width和getClientRect().height时，宽度小于高度，但这是预期的，但是除非我检测到旋转结束并更改我的形状offsetY，否则它不会一直拖动到画布的尽头值设为65，然后可以正常工作.
My problem comes when I rotate the rectangle 90 degrees. Now width is less than height when I check getClientRect().width and getClientRect().height which is expected but it now won't drag all the way to the end of my canvas unless I detect end of rotation and change my shapes offsetY value to 65 and then it works fine.
旋转后是否更改offsetY和offsetX是解决此问题的正确方法，如果是，我该如何计算将其设置为什么?
Is changing offsetY and offsetX after rotation the right approach to fix this problem and how do I calculate what to set them to if yes?
dragBoundFunc: function(pos) {
var iw = 600 - (my_shape.getClientRect().width);
var ih = 400 - my_shape.getClientRect().height;
var newX = pos.x > iw ? iw : pos.x;
var newY = pos.y > ih ? ih : pos.y;
return {
x: newX > 0 ? newX : 0,
y: newY > 0 ? newY : 0
};
}
推荐答案
这是一个可行的解决方案.请注意，这仅适用于0、90、180和270度或倍数的固定旋转. 任何旋转角度"的解决方案；需要trig或矩阵数学来计算该点的旋转值，等等.
Here is a working solution. Note that this works only for fixed rotations of 0, 90, 180 and 270 degrees or multiples. A solution for 'any-angle-of-rotation; would require trig or matrix maths to compute rotated values of the point, etc.
/*
This is the drag bounds func
*/
function theDragFunc(pos) {
var thisRect = {x: this.x(), y: this.y(), width: this.width(), height: this.height()};
// copy the boundary rect into a testRect which defines the extent of the dragbounds
// without accounting for the width and height of dragging rectangle.
// This is changed below depending on rotation.
var testRect={
left: boundary.x,
top: boundary.y,
right: boundary.x + boundary.width,
bottom: boundary.y + boundary.height
};
// the userRotation value is calculated in the rotation button onclick
// to be one of 0, 90, 180, 270
switch (userRotation){
case 0: // for 0 degrees compute as per a normal bounds rect
testRect.right = testRect.right - thisRect.width;
testRect.bottom = testRect.bottom - thisRect.height;
break;
case 90: // for 90 degs we have to modify the test boundary left and bottom
testRect.left = testRect.left + thisRect.height;
testRect.bottom = testRect.bottom - thisRect.width;
break;
case 180: // for 180 degs we have to modify the test boundary left and top
testRect.left = testRect.left + thisRect.width;
testRect.top = testRect.top + thisRect.height;
break;
case 270: // for 270 degs we have to modify the test boundary right and top
testRect.right = testRect.right - thisRect.height;
testRect.top = testRect.top + thisRect.width;
break;
}
// get new pos as: if pos inside bounday ranges then use it, otherwise user boundary
// left edge check
var newX = (pos.x < testRect.left ? testRect.left : pos.x);
// right edge check
newX = (newX > testRect.right ? testRect.right : newX);
// top edge check
var newY = (pos.y < testRect.top ? testRect.top : pos.y);
// bottom edge check
newY = (newY > testRect.bottom ? testRect.bottom : newY);
// return the point we calculated
return {
x: newX,
y: newY
}
}
// From here on is just the canvas setup etc.
// set ub the main rect - the one we drag and rotate
var target = {x: 70, y: 70, width: 70, height: 40};
// set ub the boundary rect - used in the rectfunc later
var boundary = {x: 20, y: 20, width: 460, height: 160};
// Set up the stage
var s1 = new Konva.Stage({container: 'container1', width: 500, height: 200});
// add a layer.
var layer1 = new Konva.Layer({draggable: false});
s1.add(layer1);
// show the extent of the boundary
var funcRect = new Konva.Rect({
x:boundary.x,
y: boundary.y,
width: boundary.width,
height: boundary.height,
stroke: 'red'})
layer1.add(funcRect)
// Make some easy-to-grok values for the boundary func.
boundary.minX = boundary.x;
boundary.maxX = boundary.x + boundary.width;
boundary.minY = boundary.y;
boundary.maxY = boundary.y + boundary.height;
// show the target rect
var targetRect = new Konva.Rect({
x:target.x,
y: target.y,
width: target.width,
height: target.height,
stroke: 'green',
draggable: true,
// Apply a linear graient fill to give a sense of rotation.
fillLinearGradientStartPoint: { x : -50, y : -50},
fillLinearGradientEndPoint: { x : 50, y : 50},
fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
dragBoundFunc: theDragFunc // the function is at the bottom top of the code
})
layer1.add(targetRect)
// Draw the stage
s1.draw();
var userRotation = 0;
$('#btnRotate').on('click', function(e){
targetRect.rotate(90)
s1.draw();
var rectRotation = targetRect.rotation();
// user can rotate > 360 so we will nomalise the rotation down to range 0 - 270
userRotation = (rectRotation / 90);
userRotation = (userRotation % 4) * 90;
$('#info').html("Rect rotation " + rectRotation + " same as " + userRotation);
})
p
{
padding: 4px;
}
#container1
{
display: inline-block;
width: 500px;
height: 200px;
background-color: silver;
overflow: hidden;
}
#pallette
{
height: 52px; width: 500px;
border: 1px solid #666;
margin-bottom: 10px;
z-index: 10;
}
.draggable
{
width:50px;
height: 50px;
display: inline-block;
border: 1px solid #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<p>Drag bounds function on rotated rect. Red rectangle is the extent of the bounds function. Drag the rect to the boundary and notice it is captured. Now click to rotate by 90%. A simple rect-based dragFunc would fail because the origin of the rect is not top-right. The solution function solves this.
</p>
<p>
<button id='btnRotate'>Rotate by +90 degrees</button> <span id='info'>0</span> degrees.
</p>
<div id='container1'></div>
这篇关于Konva-使用旋转并保持在范围内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
