在画布上绘制一个旋转的 Path2D 对象
Posted
技术标签:
【中文标题】在画布上绘制一个旋转的 Path2D 对象【英文标题】：Drawing A Rotated Path2D Object on canvas 【发布时间】：2021-11-05 10:38:41 【问题描述】：我有一个画布，我想在其中绘制一个旋转的 svg。
为了实现这一点，我创建了一个 Path2D 对象并使用 context.fill() 选项来绘制 svg。
此外，我使用 context.translate(x , y) 来定位 svg。
现在，我的问题是如何旋转这个？
我找到了一些解决方案，它指出首先使用context.translate(x , y)设置变换点，然后使用context.rotate(deg)进行旋转。
现在，两个翻译发生冲突。
这是我迄今为止尝试过的代码。此代码旋转 svg 元素。但是从它的右上角。我希望它从中心旋转：
Codepen 链接 - https://codepen.io/asiancat54x/pen/jOwyeaR
这里是代码sn-p
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas></canvas>
<script>
const canvas = document.querySelector("canvas")
const ctx = canvas.getContext("2d")
const path = new Path2D()
path.addPath(new Path2D('M 25.214844 0.0664062 C 23.191406 0.332031 20.324219 1.554688 17.460938 3.378906 C 15.777344 4.441406 14.132812 5.679688 12.535156 7.082031 C 11.585938 7.917969 11.566406 7.929688 11.273438 7.929688 C 11.140625 7.929688 10.589844 7.824219 10.046875 7.691406 C 9.230469 7.492188 8.996094 7.457031 8.628906 7.472656 C 7.753906 7.519531 7.9375 7.367188 3.777344 11.53125 C 1.277344 14.035156 0.0546875 15.300781 0.0273438 15.402344 C -0.0351562 15.664062 0.0429688 15.851562 0.253906 15.941406 C 0.351562 15.988281 1.636719 16.222656 3.089844 16.445312 C 6.042969 16.90625 6.269531 16.917969 6.859375 16.648438 C 7.042969 16.5625 7.28125 16.429688 7.378906 16.355469 C 7.484375 16.273438 7.632812 16.207031 7.707031 16.207031 C 7.808594 16.207031 8.582031 16.949219 10.773438 19.140625 C 12.378906 20.75 13.703125 22.113281 13.703125 22.164062 C 13.703125 22.21875 13.636719 22.335938 13.5625 22.429688 C 13.34375 22.683594 13.132812 23.152344 13.054688 23.542969 C 12.984375 23.886719 12.996094 24.015625 13.402344 26.621094 C 13.636719 28.113281 13.851562 29.421875 13.878906 29.535156 C 13.945312 29.761719 14.082031 29.851562 14.355469 29.851562 C 14.527344 29.851562 14.851562 29.539062 18.292969 26.097656 C 21.648438 22.761719 22.066406 22.324219 22.210938 22.007812 C 22.496094 21.398438 22.492188 21.167969 22.183594 19.863281 C 22.027344 19.191406 21.925781 18.660156 21.949219 18.589844 C 21.972656 18.519531 22.285156 18.136719 22.644531 17.726562 C 26.28125 13.621094 28.867188 9.066406 29.644531 5.394531 C 29.792969 4.734375 29.808594 4.5 29.8125 3.613281 C 29.8125 2.660156 29.808594 2.5625 29.660156 2.117188 C 29.285156 1.003906 28.535156 0.320312 27.402344 0.0820312 C 26.996094 -0.0078125 25.792969 -0.0195312 25.214844 0.0664062 Z M 23.464844 4.5625 C 25.449219 5.203125 26.210938 7.632812 24.957031 9.285156 C 24.0625 10.472656 22.503906 10.855469 21.179688 10.199219 C 20.101562 9.675781 19.472656 8.65625 19.472656 7.460938 C 19.472656 6.601562 19.753906 5.910156 20.371094 5.304688 C 21.183594 4.488281 22.367188 4.203125 23.464844 4.5625 Z M 23.464844 4.5625'))
path.addPath(new Path2D("M 6.871094 18.929688 C 5.667969 20.199219 4.289062 22.570312 3.445312 24.839844 C 3.039062 25.953125 2.84375 27.003906 3.027344 27.183594 C 3.113281 27.273438 3.285156 27.210938 4.402344 26.683594 C 4.914062 26.441406 5.910156 26.019531 6.613281 25.746094 C 8.675781 24.933594 9.160156 24.6875 9.96875 24.0625 C 10.480469 23.65625 11.269531 22.910156 11.328125 22.777344 C 11.351562 22.714844 11.335938 22.589844 11.28125 22.480469 C 11.226562 22.378906 10.375 21.472656 9.371094 20.476562 C 7.671875 18.792969 7.527344 18.65625 7.339844 18.65625 C 7.175781 18.65625 7.089844 18.707031 6.871094 18.929688 Z M 6.871094 18.929688 "))
var rotation = 0
canvas.width = innerWidth
canvas.height = innerHeight
const animate = () =>
requestAnimationFrame(animate)
ctx.fillStyle = "rgba(0 , 0 , 0 , 0.1)"
ctx.fillRect(0 , 0 , canvas.width , canvas.height)
ctx.fillStyle = "white"
ctx.translate(70 , 70)
ctx.rotate(rotation)
rotation += 0.1
ctx.fill(path)
ctx.resetTransform()
animate()
</script>
</body>
</html>【问题讨论】：
【参考方案1】：我读过有关计算机图形（转换矩阵）中的转换是如何工作的。
这是一篇彻底解释它的文章： https://learnopengl.com/Getting-started/Transformations
您所说的问题是 svg 的旋转位置 - transformation origin 不是 svg 的中心。
要更改转换原点，您可以在旋转后应用平移（阅读文章以了解原因）。
ctx.rotate(rotation)
ctx.translate(-15 , -15)
我玩弄了它，这很成功，尽管我建议首先找到导致原点移动的实际事物。 （避免使用magic numbers - 特别是在应用转换时）。
【讨论】：
你能给我看一个例子或编辑我的代码，以便我更清楚地理解这一点 我加了一个例子，只是在旋转后加上 translate(-15,-15) 。 哦，是的，我执行错了。感谢您的回答。 +1 票 + 接受的解决方案 ;) 我也有这个问题。你能解释一下你为什么写ctx.translate(-15 , -15)
基本上，变换是反向工作的，因此在旋转“之后”平移会在应用旋转之前移动对象 - 因此会改变旋转轴。 -15 只是我发现的一个神奇数字。建议找出需要翻译的原因，然后使用这些数字来应用转换。例如默认轴为 0,0，但由于 svg 是按定义转换的（路径的轴不是 0,0），因此您需要将其移动 x,y 以使其在旋转前与 0,0 匹配。以上是关于在画布上绘制一个旋转的 Path2D 对象的主要内容，如果未能解决你的问题，请参考以下文章