SVG.js: почему rotate ведет себя странно - PullRequest
Новая
       12

SVG.js: почему rotate ведет себя странно

0 голосов
/ 16 апреля 2019

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

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

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

1 Ответ

1 голос
/ 16 апреля 2019

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

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

...