从 .js 文件中围绕其底部中心旋转 png 图像答案

【问题标题】：Rotating a png image about its bottom center from within a .js file从 .js 文件中围绕其底部中心旋转 png 图像
【发布时间】：2012-07-19 05:40:57
【问题描述】：

首先，让我快速解释一下为什么我提出了这个问题，尽管这里有类似的问题： Canvas rotate from bottom center image angle?

到目前为止，我所看到的所有信息都与嵌入在 html 标记中的 javascript 有关。我不知道这些信息是否足以满足比我更有经验的人，但我对 javascript 和 html 知之甚少。不过，我确实对很多脚本语言都有一点经验。

我的问题是我有一个 .js 文件，它接受一个对象 i，并将 i.image 设置为来自 url（例如 example.com/pic.png）的 png 图像。我想添加几行代码，首先将图像旋转 x 度或弧度（我不在乎，我总是可以转换），然后将其设置为 i.image。所以：图片="example.com/pic.png"; i.image=MagicRotateFunction(image,45);

我只是不知道 MagicRotateFunction 会是什么。

【问题讨论】：

如果不在浏览器的 HTML 页面上，您的 javascript 在哪里运行？你使用 Node.js（服务器端）还是 WSH？
最简单的方法是检查 css 转换，使用旋转功能：在此处查看示例 davidwalsh.name/css-transform-rotate
Node.js（服务器端）我认为。我正在编辑一个 .js 文件并将其上传到服务器。我真的不知道 html 标记是从哪个文件生成的。这是一个制作谷歌地图的文件，我想旋转标记，以便在同一位置显示多个标记。
至于 css 转换，如何将其嵌入到 .js 文件中？我试图将我必须编辑的文件限制为该 .js 文件，因为我认为在 wiki 站点上的谷歌地图上跟踪将图标转换为标记的机制会复杂得多。

标签： javascript image png rotation image-rotation

【解决方案1】：

如果您有兴趣在 .js 文件中进行 CSS 转换，请尝试以下操作：

i.src = "http://maps.google.com/mapfiles/marker.png";
i.style.WebkitTransform = "rotate(45deg)";
i.style.MozTransform = "rotate(45deg)";
i.style.OTransform = "rotate(45deg)";
i.style.msTransform = "rotate(45deg)";
i.style.transform = "rotate(45deg)";

来源：

【讨论】：