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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前