在画布上旋转

发布于 2024-12-01 20:28:58 字数 410 浏览 2 评论 0原文

我正在画布上画一些形状，但旋转让我感到害怕。从教程中，我发现由于我愚蠢的头脑而找不到解决方案，或者它们没有显示交互式转换，或者两者兼而有之。

我编写了使用 mousedown-mousemove-mouseup 事件绘制一些形状的代码，但我想在 mousemove 时旋转> 点位于... (x1, y1) - 起点和(x2, y2) 终点。请随意升级下面的代码：

context.strokeRect(x1, y1, x2-x1, y2-y1);

那么，在按住按钮的同时，我到底可以为这些矩形编写什么来跟随点 (x2, y2) 呢？

原文

I'm drawing some shapes on canvas, but rotation freaks me up. From tutorials I found cannot find solution because of my stupid head or they are not showing interactive transformation, or both.

I made the code that draws some shapes with mousedown-mousemove-mouseup events, but I want to rotating while mousemove point is on... (x1, y1) - starting point and (x2, y2) ending point. Please be free to upgrade the code below:

context.strokeRect(x1, y1, x2-x1, y2-y1);

So what exactly could I write for those rectangles to follow point (x2, y2) while holding the button?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等往事风中吹 2024-12-08 20:28:59

我找到了解决方案，请按照代码操作：

var xd = x2-x1,
yd = y2-y1;
var theta = Math.atan2(yd, xd); 
var deg = theta*180/Math.PI;
var xyd = Math.sqrt((xd*xd)+(yd*yd));


context.lineWidth = 1;
context.lineCap = "square";
context.strokeStyle = "#856020";
context.save();
context.translate(x1,y1);
context.rotate(theta);
context.strokeRect(0,0,xyd,yd);
context.restore();

I found solution, follow the code:

var xd = x2-x1,
yd = y2-y1;
var theta = Math.atan2(yd, xd); 
var deg = theta*180/Math.PI;
var xyd = Math.sqrt((xd*xd)+(yd*yd));


context.lineWidth = 1;
context.lineCap = "square";
context.strokeStyle = "#856020";
context.save();
context.translate(x1,y1);
context.rotate(theta);
context.strokeRect(0,0,xyd,yd);
context.restore();

回复收藏 0 原文

~没有更多了~