SVG.js：为什么旋转的行为很奇怪答案

【问题标题】：SVG.js: why does rotate behave in a weird waySVG.js：为什么旋转的行为很奇怪
【发布时间】：2019-09-06 13:22:47
【问题描述】：

我正试图让一辆带有指南针的公共汽车沿着这条路线移动。但是，我无法让指南针正常旋转，它会以一种非常奇怪的方式旋转和移动。

您能帮我找出问题所在吗？

这里是 Fiddle 的链接：https://jsfiddle.net/ugvapdrj（我还没有修复 CSS，所以它会向右溢出。）

谢谢！

代码：

<div id="drawing"></div>

let canvas = SVG('drawing').size(2000, 2000)
let compassSize = 42;
let lineColour = '#f00';


let Rsc2muVkt = canvas
  .path(
    'M736 96V72c0-13-11-24-24-24h-75c-18 0-35 7-48 18l-104 94c-23 21-54 32-85 32H0'
  )
  .stroke({
    color: lineColour
  })
  .fill('none');

// Buses
let bus = canvas.image(
  'https://s3-ap-southeast-1.amazonaws.com/viabus-develop-media-resource-ap-southeast/Vehicle+Images/entity/mu/veh_core_mu_06.png',
  compassSize
);
let busCompass = canvas.image(
  'https://s3-ap-southeast-1.amazonaws.com/viabus-develop-media-resource-ap-southeast/Network+Images/Azimuth/Public/veh_ring_white.png',
  compassSize
);

moveBus(bus, busCompass, Rsc2muVkt, 0);


for (let i = 0; i <= 100; i++) {
  setTimeout(() => {
    moveBus(bus, busCompass, Rsc2muVkt, i);
  }, 1000 + i * 200);
}

function moveBus(bus, busCompass, path, to) {
  const p = path.pointAt(to / 100 * path.length());
  const newPosition = {
    x: p.x,
    y: p.y
  };

  const oldX = bus.cx();
  const oldY = bus.cy();

  bus.center(newPosition.x, newPosition.y);
  busCompass.center(newPosition.x, newPosition.y);

  const newX = bus.cx();
  const newY = bus.cy();

  const dx = newX - oldX;
  const dy = newY - oldY;
  const rotatingAngle = Math.atan2(dy, dx) * 180 / Math.PI;

  busCompass.rotate(rotatingAngle + 90);
}

【问题讨论】：

标签： javascript html svg svg.js

【解决方案1】：

当您尝试将指南针置于下一帧动画的中心时，指南针仍会旋转。这会导致busCompass.center(...) 调用使用旋转坐标系。

您应该首先调用busCompass.rotate(0); 来重置轮换，然后busCompass.center(...) 将按预期工作并完成最终轮换。

【讨论】：