代码之家 › 专栏 › 技术社区 › 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

推荐文章

Mohammad Eftekharian · 在python中在两个画布之间移动图像

4 月前

PPExpress · 设置默认值后动态更新jscolor调色板

1 年前

Astrina · ipycanvas什么时候在画布上画画?或者如何强制?

1 年前

That New Coder · 如何在原生JavaScript中阻止精灵从画布上移动?

1 年前

walid naceri · 使用画布和javascript单击对象

1 年前

Özkan Hürcan · 节点画布registerFont在服务器上不工作

1 年前

Aswathi · 当显示画布时,Focus()和blur()一起触发firefox

1 年前

J. Maria · html2canvas不会在同一域中呈现iframe的内容

1 年前

Tung Le · 如何创建一个小地图来显示Angular中div的所有内容?

1 年前

Yahia · 为什么ctxpixel没有绘制图像

1 年前