问题描述
我已经看到一些问题,询问如何围绕给定点旋转形状,并决定自己问这个自我解答问题。那么-关于HTML5画布,或者实际上是任何二维表面,我如何围绕任意x,y点旋转形状?
解决方法
事实证明,答案很简单,但是涉及到一些数学运算,可能会使某些人失望。我正在使用Konvajs HTML5 canvas库,但是该代码很容易传输到您自己的lib中。另外,此示例被描述为旋转形状,但实际上是旋转一个点-形状的原点-因此,您可以将其用于任何围绕点旋转的情况。
rotateAroundPoint()函数可以完成工作-片段中的其余代码都可以作为工作示例。
将其移出,我们可以看到输入是形状-尽管它可以是具有x,y和旋转特性的任何对象,以度为单位的旋转角度和旋转点-还是具有x和y值的对象
当我们绕该点旋转时,我们将进行原位旋转,然后进行平移(或移动)。这些必须按此顺序进行。另外,由于2D绘图的工作方式,我们必须为移动确定新的位置,这取决于形状的绘图原点。
要计算新的x和y位置,需要使用需要弧度而不是度数的正弦和余弦函数。因此,我们将度数乘以PI / 180即可得到。
// Rotate a shape around any point.
// shape is a Konva shape
// angleDegrees is the angle to rotate by,in degrees
// point is an object {x: posX,y: posY}
function rotateAroundPoint(shape,angleDegrees,point) {
let angleRadians = angleDegrees * Math.PI / 180; // sin + cos require radians
const x =
point.x +
(shape.x() - point.x) * Math.cos(angleRadians) -
(shape.y() - point.y) * Math.sin(angleRadians);
const y =
point.y +
(shape.x() - point.x) * Math.sin(angleRadians) +
(shape.y() - point.y) * Math.cos(angleRadians);
shape.rotation(shape.rotation() + angleDegrees); // rotate the shape in place
shape.x(x); // move the rotated shape in relation to the rotation point.
shape.y(y);
}
就是这样!播放片段-最佳全屏观看。选择要旋转的形状,然后单击几次旋转按钮以观看它围绕其原点旋转(如果我们只是更改旋转角度而没有其他操作,则为自然旋转点)。然后单击重置按钮,然后单击画布以将蓝色目标移动到画布或形状上的其他位置,然后再旋转一些以查看效果。
还有一个Codepen版本here。
// Code to illustrate rotation of a shape around any given point. The important functions here is rotateAroundPoint() which does the rotation and movement math !
let
angle = 0,// display value of angle
startPos = {x: 80,y: 45},shapes = [],// array of shape ghosts / tails
rotateBy = 20,// per-step angle of rotation
shapeName = $('#shapeName').val(),// what shape are we drawing
shape = null,ghostLimit = 10,// Set up a stage
stage = new Konva.Stage({
container: 'container',width: window.innerWidth,height: window.innerHeight
}),// add a layer to draw on
layer = new Konva.Layer(),// create the rotation target point cross-hair marker
lineV = new Konva.Line({points: [0,-20,20],stroke: 'cyan',strokeWidth: 1}),lineH = new Konva.Line({points: [-20,20,0],circle = new Konva.Circle({x: 0,y: 0,radius: 10,fill: 'transparent',cross = new Konva.Group({draggable: true,x: startPos.x,y: startPos.y});
// Add the elements to the cross-hair group
cross.add(lineV,lineH,circle);
layer.add(cross);
// Add the layer to the stage
stage.add(layer);
$('#shapeName').on('change',function(){
shapeName = $('#shapeName').val();
shape.destroy();
shape = null;
reset();
})
// Draw whatever shape the user selected
function drawShape(){
// Add a shape to rotate
if (shape !== null){
shape.destroy();
}
switch (shapeName){
case "rectangle":
shape = new Konva.Rect({x: startPos.x,y: startPos.y,width: 120,height: 80,fill: 'magenta',stroke: 'black',strokeWidth: 4});
break;
case "hexagon":
shape = new Konva.RegularPolygon({x: startPos.x,sides: 6,radius: 40,strokeWidth: 4});
break;
case "ellipse":
shape = new Konva.Ellipse({x: startPos.x,radiusX: 40,radiusY: 20,strokeWidth: 4});
break;
case "circle":
shape = new Konva.Ellipse({x: startPos.x,radiusY: 40,strokeWidth: 4});
break;
case "star":
shape = new Konva.Star({x: startPos.x,numPoints: 5,innerRadius: 20,outerRadius: 40,strokeWidth: 4});
break;
};
layer.add(shape);
cross.moveToTop();
}
// Reset the shape position etc.
function reset(){
drawShape(); // draw the current shape
// Set to starting position,etc.
shape.position(startPos)
cross.position(startPos);
angle = 0;
$('#angle').html(angle);
$('#position').html('(' + shape.x() + ',' + shape.y() + ')');
clearTails(); // clear the tail shapes
stage.draw(); // refresh / draw the stage.
}
// Click the stage to move the rotation point
stage.on('click',function (e) {
cross.position(stage.getPointerPosition());
stage.draw();
});
// Rotate a shape around any point.
// shape is a Konva shape
// angleRadians is the angle to rotate by,in radians
// point is an object {x: posX,point) {
let angleRadians = angleDegrees * Math.PI / 180; // sin + cos require radians
const x =
point.x +
(shape.x() - point.x) * Math.cos(angleRadians) -
(shape.y() - point.y) * Math.sin(angleRadians);
const y =
point.y +
(shape.x() - point.x) * Math.sin(angleRadians) +
(shape.y() - point.y) * Math.cos(angleRadians);
shape.rotation(shape.rotation() + angleDegrees); // rotate the shape in place
shape.x(x); // move the rotated shape in relation to the rotation point.
shape.y(y);
shape.moveToTop(); //
}
$('#rotate').on('click',function(){
let newShape = shape.clone();
shapes.push(newShape);
layer.add(newShape);
// This ghost / tails stuff is just for fun.
if (shapes.length >= ghostLimit){
shapes[0].destroy();
shapes = shapes.slice(1);
}
for (var i = shapes.length - 1; i >= 0; i--){
shapes[i].opacity((i + 1) * (1/(shapes.length + 2)))
};
// This is the important call ! Cross is the rotation point as illustrated by crosshairs.
rotateAroundPoint(shape,rotateBy,{x: cross.x(),y: cross.y()});
cross.moveToTop();
stage.draw();
angle = angle + 10;
$('#angle').html(angle);
$('#position').html('(' + Math.round(shape.x() * 10) / 10 + ',' + Math.round(shape.y() * 10) / 10 + ')');
})
// Function to clear the ghost / tail shapes
function clearTails(){
for (var i = shapes.length - 1; i >= 0; i--){
shapes[i].destroy();
};
shapes = [];
}
// User cicks the reset button.
$('#reset').on('click',function(){
reset();
})
// Force first draw!
reset();
body {
margin: 10;
padding: 10;
overflow: hidden;
background-color: #f0f0f0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/konva@^3/konva.min.js"></script>
<p>1. Click the rotate button to see what happens when rotating around shape origin.</p>
<p>2. Reset then click stage to move rotation point and click rotate button again - rinse & repeat</p>
<p>
<button id = 'rotate'>Rotate</button>
<button id = 'reset'>Reset</button>
<select id='shapeName'>
<option value='rectangle'>Rectangle</option>
<option value='hexagon'>Polygon</option>
<option value='ellipse' >Ellipse</option>
<option value='circle' >Circle</option>
<option value='star' selected='selected'>Star</option>
</select>
Angle : <span id='angle'>0</span>
Position : <span id='position'></span>
</p>
<div id="container"></div>