Блог

Я пытаюсь заставить автобус с его компасом двигаться вдоль линии. Однако я не могу заставить компас вращаться должным образом, он вращается, а также движется очень странным образом.

Не могли бы вы помочь мне найти, что пошло не так?

Вот ссылка на 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);
}
  

Компас все еще поворачивается, когда вы пытаетесь центрировать его на следующем кадре анимации. Это приводит busCompass.center(...) к тому, что вызов использует повернутую систему координат.

Вы должны сначала вызвать busCompass.rotate(0); , чтобы сбросить вращение, затем busCompass.center(...) все будет работать должным образом, и окончательное вращение будет завершено.