代码之家 › 专栏 › 技术社区 › Loveen Dyall

使用坐标以编程方式旋转形状

programmatically shapes rotation canvas javascript

Loveen Dyall · 技术社区 · 7 年前

如果我有一些使用坐标数组定义的形状,例如。

[[-30, -30], [-30, 30], [30, 30], [30, -30]]

[[0,1],[0,3],[1,2],[2,3]]

做一个正方形。

如何通过编程告诉形状以0->的角度在中心旋转*;359在javascript中?

*或者更好的是,有没有一个函数可以让我选择旋转的中心?

目前,我已成功使用以下工具使形状环绕画布:

var x_rotate = Math.sin(angle * Math.PI /180);
var y_rotate = Math.cos(angle * Math.PI /180);

// for each coordinate
//add x_rotate and y_rotate if coordinate > 0 or subtract if coordinate < 0

3 回复 | 直到 7 年前

Oliver Ni 7 年前

给你,旋转点 x, y 围绕点 centerx, centery degrees

Desmos link with x as a , y as b , centerx as p , centery as q , and degrees as s

function rotatePoint(x, y, centerx, centery, degrees) {
    var newx = (x - centerx) * Math.cos(degrees * Math.PI / 180) - (y - centery) * Math.sin(degrees * math.PI / 180) + centerx;
    var newy = (x - centerx) * Math.sin(degrees * Math.PI / 180) + (y - centery) * Math.cos(degrees * math.PI / 180) + centery;
    return [newx, newy];
}

Nina Scholz 3 年前

你可以用一个 formular 用于围绕原点旋转点。

function rotate(array, angle) {
    return array.map(function (p) {
        function d2r(a) { return a * Math.PI / 180; }
        return [
            Math.cos(d2r(angle)) * p[0] - Math.sin(d2r(angle)) * p[1],
            Math.sin(d2r(angle)) * p[0] - Math.cos(d2r(angle)) * p[1],
        ];
    });
}
console.log(rotate([[-30, -30], [-30, 30], [30, 30], [30, -30]], 45));
console.log(rotate([[-30, -30], [-30, 30], [30, 30], [30, -30]], 90));

.as-console-wrapper { max-height: 100% !important; top: 0; }

-1

Rajesh Meena 7 年前

使用css转换

https://www.w3schools.com/cssref/css3_pr_transform.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

推荐文章

Niko · 边框css更改速度快于变换旋转

7 年前

NOOBAF · 将数组传递给函数(C)

7 年前

Axel M · WPF自动旋转无极边界线ArgRadientBrush顺时针旋转,不旋转其余部分

7 年前

Mevia · 画布水平旋转img

7 年前

ThePurpleArcher · 统一if语句中四元数和eulerAngles的问题

7 年前

Nikolay Baranenko · Kafka循环垃圾收集日志

7 年前

E. Huckabee · SceneKit:使用平移手势将相机朝其面对的方向移动

7 年前

Thomas Schütt · javafx-如何将偏航、俯仰和滚动增量(而不是euler)应用于节点旋转轴,而不是场景旋转轴?

7 年前

Vinayak B · 确定片段重新启动是由于屏幕旋转还是浏览页面滑动?

7 年前

user9187461 · 管线旋转30度

7 年前