JavaScript中实现多旋转箭头图片原点完美重合的问题求解

问题根因 #

• 你当前设置的transform-origin: 0% 0%对应图片左上角，和箭头实际尾部（旋转锚点）位置不匹配
• 不同箭头素材的尺寸、透明留白不一致，导致定位基准存在偏差
• transform执行顺序不合理，没有先统一位移到目标原点再旋转
• 原JS代码存在语法错误，img/arrow_0]+'.png中存在多余的]+字符

调整方案 #

1. 修正CSS冗余属性，统一旋转锚点 #

先删除无效重复属性，根据你的箭头素材实际尾部位置调整transform-origin：

#contain {
    position: relative;
    width: 104%;
    height: 132%;
}
.arrow {
  position: absolute;
  top: 0;
  left: 0;
  /* 可根据箭头素材灵活调整：尾部在左下角设为0 100%，底部中心设为50% 100%，左上角设为0 0 */
  transform-origin: 0 100%; 
  max-width: 100%;
  max-height: 100%;
}

2. 调整transform执行顺序，先位移再旋转 #

把所有箭头先统一位移到你需要的公共原点位置，再执行旋转，注意transform的顺序不能调换：

// 示例公共原点为容器内(100px, 100px)，可根据你的需求修改数值
content.innerHTML= `
<div id="contain">
  <img class="arrow" style="transform: translate(100px, 100px) rotate(90deg)" src="img/arrow_0.png">
  <img class="arrow" style="transform: translate(100px, 100px) rotate(60deg)" src="img/arrow_1.png">
  <img class="arrow" style="transform: translate(100px, 100px) rotate(75deg)" src="img/arrow.png">
</div>
`

3. 统一箭头素材基准 #

确保所有箭头图片的画布尺寸完全一致，箭头尾部对齐到画布的同一个参考点，导出时去掉多余的透明留白，避免素材本身导致的偏差。 #

调试技巧 #

可以先在容器目标原点位置加一个临时的标记点（比如10px*10px的红色圆形），调整transform-origin数值直到所有箭头尾部都和标记点完全重合后，再删除标记点即可。

内容的提问来源于stack exchange，提问作者beni