- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何获得旋转矩形的 Angular 坐标(以矩形中心为枢轴)?
我已经尝试了下面链接中的所有解决方案,但似乎没有任何运气。
Rotating a point about another point (2D)
Find corners of a rotated rectangle given its center point and rotation
这是代码
// make a rectangle with zero rotation
const rect1 = new Konva.Rect({
x: 200,
y: 200,
width: 100,
height: 50,
fill: "#00D2FF",
draggable: true,
rotation: 0,
name: "rect"
});
// convert degree to rad
const degToRad = (deg: number) => deg * (Math.PI / 180);
// here's the code i use to rotate it around its center (from https://konvajs.org/docs/posts/Position_vs_Offset.html)
const rotateAroundCenter = (node: Rect, rotation: number) => {
const topLeft = {
x: -node.width() / 2,
y: -node.height() / 2
};
console.log(`current X: ${node.x()}, current Y: ${node.y()},`)
const currentRotatePoint = rotatePoint(topLeft, degToRad(node.rotation()));
const afterRotatePoint = rotatePoint(topLeft, degToRad(rotation));
const dx = afterRotatePoint.x - currentRotatePoint.x;
const dy = afterRotatePoint.y - currentRotatePoint.y;
node.rotation(rotation);
node.x(node.x() + dx);
node.y(node.y() + dy);
layer.draw();
console.log(`the actual position x: ${node.x()}, y: ${node.y()}`);
};
// the code that i expected to give me the corner point
const computeCornerPoint = (r:Rect) => {
// for now we want to compute top left corner point(as it's the easiest corner to get)
let corner = {
x: r.x(),
y: r.y()
};
// the coordinate of rectangle's center (in stage coordinate)
const cx = r.x() + r.width() / 2;
const cy = r.y();
// sine and cosine of the rectangle's rotation
const s = Math.sin(degToRad(r.rotation()));
const c = Math.cos(degToRad(r.rotation()));
// rotate the corner point
let xnew = c * (corner.x - cx) - s * (corner.y - cy) + cx;
let ynew = s * (corner.x - cx) + c * (corner.y - cy) + cy;
console.log(`based on this function calculation: xnew : ${xnew}, ynew: ${ynew}`);
return [xnew, ynew];
}
根据上面的代码,如果初始旋转为0,并且我将矩形顺时针旋转30度,那么实际位置将与computeCornerPoint中的值相同,即(219, 178),如果我再次顺时针旋转30度,实际位置将是(246, 169),而computeCornerPoint中的值将是(275) ,175)。
最佳答案
在 Canvas 的世界中,生活是矩形的,因此我们需要做的就是预测 Angular 位置,知道左上角的形状和旋转 Angular ,然后应用一些高中数学。旋转点的数学运算在函数rotatePoint()中。代码片段的其余部分是为其使用和结果说明而设置的。
也许在全屏模式下运行代码片段会更好。
// Function to rotate a point.
// pt = {x,y} of point to rotate,
// o = {x, y} of rotation origin,
// a = angle of rotation in degrees.
// returns {x, y} giving the new point.
function rotatePoint(pt, o, a){
var angle = a * (Math.PI/180); // Convert to radians
var rotatedX = Math.cos(angle) * (pt.x - o.x) - Math.sin(angle) * (pt.y - o.y) + o.x;
var rotatedY = Math.sin(angle) * (pt.x - o.x) + Math.cos(angle) * (pt.y - o.y) + o.y;
return {x: rotatedX, y: rotatedY};
}
// This is just about drawing the circles at the corners.
function drawCorners(rect, angle){
var rectPos = rect.position();
var x = 0, y = 0;
for (var i = 0; i < 4; i = i + 1){
switch (i){
case 0:
x = rectPos.x; y = rectPos.y;
break;
case 1:
x = rectPos.x + rect.width(); y = rectPos.y;
break;
case 2:
x = rectPos.x + rect.width(); y = rectPos.y + rect.height();
break;
case 3:
x = rectPos.x; y = rectPos.y + rect.height();
break;
}
var pt = rotatePoint({x: x, y: y}, {x: rectPos.x, y: rectPos.y}, angle)
circles[i].position(pt)
}
}
// rotate and redraw the rectangle
function rotateUnderMouse(){
// Get the stage position of the mouse
var mousePos = stage.getPointerPosition();
// get the stage position of the mouse
var shapePos = rect.position();
// compute the vector for the difference
var rel = {x: mousePos.x - shapePos.x, y: mousePos.y - shapePos.y}
// Now apply the rotation
angle = angle + 90;
circle.position({x: mousePos.x, y: mousePos.y});
circle.show();
// and reposition the shape to keep the same point in the shape under the mouse
var newPos = ({x: mousePos.x + rel.y , y: mousePos.y - rel.x})
rect.position(newPos);
rect.rotation(angle);
// re-calculate and draw the circle positions.
drawCorners(rect, angle)
stage.draw()
}
function setup() {
// Set up a stage and a shape
stage = new Konva.Stage({
container: 'canvas-container',
width: 650,
height: 300
});
layer = new Konva.Layer();
stage.add(layer);
newPos = {x: 80, y: 100};
rect = new Konva.Rect({
width: 140, height: 50, x: newPos.x, y: newPos.y, draggable: true, stroke: 'silver', fill: 'cyan'
})
// not very dry, setting up the corner circles.
circle = new Konva.Circle({x: newPos.x, y: newPos.y, radius: 10, fill: 'magenta'})
circles[0] = circle.clone();
circles[0].fill('lime')
layer.add(circles[0]);
circles[1] = circle.clone();
circles[1].fill('gold')
layer.add(circles[1]);
circles[2] = circle.clone();
circles[2].fill('blue')
layer.add(circles[2]);
circles[3] = circle.clone();
circles[3].fill('darkviolet')
layer.add(circles[3]);
layer.add(rect);
layer.add(circle);
circle.hide()
drawCorners(rect, 0)
stage.draw()
rect.on('mousedown', function(){
rotateUnderMouse()
})
}
var stage, layer, rect, circles = [], angle = 0;
setup()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/4.0.13/konva.js"></script>
<p>Click the rectangle - it will rotate 90 degrees clockwise under the mouse and coloured circles will be drawn consistently at the corners. These circles have their position calculated rather than derived from the visual rectangle corner positions. NB: No dragging !</p>
<div id="canvas-container"></div>
关于javascript - 康瓦 : get corners coordinate of a rotated rectangle,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59098408/
我有这部分代码将 div 围绕一个圆圈对齐: angle = 0; mangle = 0; for(i = 1; i<= count; i++) { $("#p" +i).css
为什么平衡得到一个AVL树的过程叫做旋转 ? (当你在它时,什么是 单 和 双 旋转?) 我的每一本教科书都公然使用这个词,没有任何解释。 最佳答案 这是在你的树的子树中改变根的操作,这是非常简单的操
作为进入处理的一个小作业,我必须编写一些代码才能获得以下内容: 使用 public void setup() { size(300,200); noFill(); rect(100,
我遇到了 Google Chrome 控制台报告的问题。我使用的是 Ubuntu 12.04。控制台中的问题是: Uncaught TypeError: Cannot read propert
在统一编辑器中,当我启用“Pivot”时,游戏对象将围绕“枢轴点”位置旋转,当我启用“Center”时,游戏对象将围绕“中心点”旋转 但是如果我使用脚本旋转,它总是围绕“中心点”旋转,例如,这是我的场
rotate() 算法会从左边选择序列的元素。它的工作机制如图 1 所示。 图 1 rotate()算法的工作方式(点此查看大图) 为了理解如何旋转序列,可以将序列中的元素想象成手镯上的珠子。rota
在三个JS中,是否可以用鼠标旋转对象而不是用OrbitControls.js旋转相机( https://threejs.org/docs/#examples/controls/OrbitControl
我正在学习 CSS 过渡和转换。这是 HTML: Transformatons and Transitions animate animate2 d
我们有一个图像,它似乎在旋转时消失了一秒钟。这个问题存在于 IE8 中,但在 IE9 和其他支持 HTML5 的浏览器中工作正常。我们使用了 jQuery 旋转插件。 HTML CSS #obj {
作为评估的一部分,我被赋予了这项任务......“‘旋转’按钮应该翻转元素的纵横比。” 为了完成这个,我定位了元素并切换了一个类名(旋转),然后添加了这个 CSS... .main-inner.rot
我从 Unity 插件 Final IK 中看到了这行代码。 整个函数是这样的: //Limits rotation to a single degree of freedom (along axis
我正在尝试在动画关键帧内同时应用 -webkit-filter:hue-rotate() 和 -webkit-transform:rotate()。不幸的是,即使是 Chrome Canary 也无法
我正在尝试制作看起来像这样的波斯尼亚和黑塞哥维那国旗。 我正在努力实现星星的排列方式。它们位于 45 度倾斜轴上,但星星本身没有旋转。 以下是我正在尝试的最低限度代码,但它也会旋转星星。 有什么办法可
我正在尝试使用 ratcave for python 创建一个项目。但是当我导入 ratcave 时,出现以下错误: AttributeError: 'scipy.spatial.transform.
我正在尝试使用 ratcave for python 创建一个项目。但是当我导入 ratcave 时,出现以下错误: AttributeError: 'scipy.spatial.transform.
我的问题是我使用支持 CSS2 和 javascript 但不支持 css3 的 html 到 pdf 生成器 (acts_as_flying_saucer),所以我不能使用 transform: r
我做了以下转换: // Translate my cube to origin myCubeModelMatrix = glm::translate( myCubeModelMatrix, vec3(
我正在将一些基于 PIL 的代码转换为 NumPy,但我发现 skimage.transform.rotate函数比 PIL 的 Image.rotate 慢显着。 作为一个粗略的比较,使用 skim
前言 .我知道过去曾多次问过这个问题,但没有一个解决方案实际上对我有用。自从提出类似问题(根据耗时过滤的 Google 搜索)以来,也已经有好几年了,因此大多数较旧的答案都已过时。如果有任何方法可以让
我试图将元素从其起始旋转点旋转 360 度,而不是从 0deg。例如,如果起点是 90deg,它会从 90deg 旋转到 90deg(整圈)。 我的目标是使用简单的@keyframes 动画来旋转元素
我是一名优秀的程序员,十分优秀!