使用外角沿路径旋转 'body

Question

我有一个小脚本，其中：

A body 沿着路径移动。
当它到达一段的末尾时，它开始 rotation-around-its-center，直到它与下一段的切线对齐。
然后它开始沿着下一段移动。

一切正常，但我在旋转方面遇到了一个小问题。 body 应该旋转以与 reflex/external 角对齐。

正如您在下面的 MCVE 中看到的，第二次旋转是顺时针的，而应该是逆时针的。

相反的情况发生在第 3 段。它旋转 counter-clockwise，它应该顺时针旋转，因为该旋转将遵循外角。

我做错了什么？

paper.setup(document.querySelector('canvas'))

// Path

const path = new paper.Path({
  segments: [[-100, 300], [100, 300], [100, 0], [0, 100], [-100, 200], [-200, -50]],
  strokeColor: '#E4141B',
  strokeWidth: 5,
  strokeCap: 'round',
  position: paper.view.center
})

path.segments.forEach(segment => {
  const text = new paper.PointText({
    point: [50, 50],
    content: `${parseInt(path.getTangentAt(segment.location).angle)} deg`,
    fillColor: 'black',
    fontFamily: 'Courier New',
    fontWeight: 'bold',
    fontSize: 15,
    position: segment.point
  })
})

// Car

const car = new paper.Path.Rectangle(
  new paper.Rectangle(new paper.Point(50, 50), new paper.Point(150, 100))
)
car.fillColor = '#e9e9ff'
car.rotationLabel = new paper.PointText({
  point: [50, 50],
  content: '0',
  fillColor: 'black',
  fontFamily: 'Courier New',
  fontWeight: 'bold',
  fontSize: 10,
  position: car.position
})

// Car custom

car.currentRotation = 0
car.rotateAroundCenter = function(rotation) {
  rotation = parseInt(rotation)
  this.rotate(rotation)
  this.currentRotation += rotation
}

car.updateRotationLabel = function() {
  this.rotationLabel.position = this.position
  this.rotationLabel.content = this.currentRotation
}

car.getCurrentRotation = function() {
  return this.currentRotation
}

car.isNotAlignedWith = function(rotation) {
  return this.currentRotation !== parseInt(rotation)
}

// Animation-along-a-path

let i = 0
paper.view.onFrame = () => {
  car.updateRotationLabel()

  const rotation = path.getTangentAt(i).angle
  const rotationSign = car.getCurrentRotation() < rotation ? 1 : -1

  car.position = path.getPointAt(i)

  if (car.isNotAlignedWith(rotation)) {
    car.rotateAroundCenter(rotationSign)
  } else {
    car.position = path.getPointAt(i);

    i++

    if (i > path.length - 1) {
      paper.view.onFrame = () => {}
      console.log('done')
    }
  }
}

canvas {
  width: 100%;
  height: 100%;
  background: #666;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.min.js"></script>
<canvas></canvas>

FWIW 我已经绘制了路径在旋转时应沿其旋转的外部（反射）角度。

注意：每段上的黑角文字是该段的切线。

Answer 1

有两个问题需要解决。

首先是您的程序应该工作的实际角度范围仅为 0 到 360 度。我通过计算角度的模数 360 并在它们仍然低于 0 时加上 360 来解决这个问题，以确保它们在 0-360 范围内。

第二件事是，在两种情况下，方块应该朝方向 1 旋转。一旦它应该指向的角度大于它现在面对的角度。但当差异超过 180 时也是如此，因为角度是一个像数字一样的圆圈，这意味着环绕可以是到达另一个值的最短路线（例如，从 0 到 10° 到 350° 的差异到 360 度只是 20°，如果环绕而不是正常方式时的 340°。

paper.setup(document.querySelector('canvas'))
const MAXANGLE = 360;
// Path

const path = new paper.Path({
  segments: [
    [-100, 300],
    [100, 300],
    [100, 0],
    [0, 100],
    [-100, 200],
    [-200, -50]
  ],
  strokeColor: '#E4141B',
  strokeWidth: 5,
  strokeCap: 'round',
  position: paper.view.center
})

path.segments.forEach(segment => {
  const text = new paper.PointText({
    point: [50, 50],
    content: `${parseInt(path.getTangentAt(segment.location).angle)} deg`,
    fillColor: 'black',
    fontFamily: 'Courier New',
    fontWeight: 'bold',
    fontSize: 15,
    position: segment.point
  })
})

// Car

const car = new paper.Path.Rectangle(
  new paper.Rectangle(new paper.Point(50, 50), new paper.Point(150, 100))
)
car.fillColor = '#e9e9ff'
car.rotationLabel = new paper.PointText({
  point: [50, 50],
  content: '0',
  fillColor: 'black',
  fontFamily: 'Courier New',
  fontWeight: 'bold',
  fontSize: 10,
  position: car.position
})

// Car custom

car.currentRotation = 0
car.rotateAroundCenter = function(rotation) {
  rotation = parseInt(rotation)
  this.rotate(rotation)
  this.currentRotation += rotation
}

car.updateRotationLabel = function() {
  this.rotationLabel.position = this.position
  this.rotationLabel.content = this.currentRotation
}

car.getCurrentRotation = function() {
  return this.currentRotation
}

car.isNotAlignedWith = function(rotation) {
  var a1 = this.currentRotation % MAXANGLE;
  var a2 = parseInt(rotation) % MAXANGLE;
  if (a1 < 0) a1 += MAXANGLE;
  if (a2 < 0) a2 += MAXANGLE;
  return a1 !== a2;
}

car.getRotationAngle = function(rotation) {
  var a1 = this.currentRotation % MAXANGLE;
  var a2 = parseInt(rotation) % MAXANGLE;
  if (a1 < 0) a1 += MAXANGLE;
  if (a2 < 0) a2 += MAXANGLE;
  return (a2 > a1 && a2 - a1 <= MAXANGLE / 2) || (a1 > a2 && a1 - a2 >= MAXANGLE / 2) ? 1 : -1;
}

// Animation-along-a-path

let i = 0
paper.view.onFrame = () => {
  car.updateRotationLabel()

  const rotation = path.getTangentAt(i).angle
  const rotationSign = car.getRotationAngle(rotation);

  car.position = path.getPointAt(i)

  if (car.isNotAlignedWith(rotation)) {
    car.rotateAroundCenter(rotationSign)
  } else {
    car.position = path.getPointAt(i);

    i++

    if (i > path.length - 1) {
      paper.view.onFrame = () => {}
      console.log('done')
    }
  }
}

canvas {
  width: 100%;
  height: 100%;
  background: #666;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.min.js"></script>
<canvas></canvas>

Answer 2

我建议使用方向向量作为当前方向，而不仅仅是角度，因为这样会更容易确定您应该旋转的方向等。

paper.setup(document.querySelector('canvas'))

// Path

const path = new paper.Path({
  segments: [[-100, 300], [100, 300], [100, 0], [0, 100], [-100, 200], [-200, -50]],
  strokeColor: '#E4141B',
  strokeWidth: 5,
  strokeCap: 'round',
  position: paper.view.center
})

path.segments.forEach(segment => {
  const text = new paper.PointText({
    point: [50, 50],
    content: `${parseInt(path.getTangentAt(segment.location).angle)} deg`,
    fillColor: 'black',
    fontFamily: 'Courier New',
    fontWeight: 'bold',
    fontSize: 15,
    position: segment.point
  })
})

// Car

const car = new paper.Path.Rectangle(
  new paper.Rectangle(new paper.Point(50, 50), new paper.Point(150, 100))
)
car.fillColor = '#e9e9ff'
car.rotationLabel = new paper.PointText({
  point: [50, 50],
  content: '0',
  fillColor: 'black',
  fontFamily: 'Courier New',
  fontWeight: 'bold',
  fontSize: 10,
  position: car.position
})

// Car custom

car.currentRotation = new paper.Point(1, 0)
car.rotateAroundCenter = function(rotation) {
  this.rotate(rotation)
  this.currentRotation = this.currentRotation.rotate(rotation)
}

car.updateRotationLabel = function() {
  this.rotationLabel.position = this.position
  this.rotationLabel.content = this.currentRotation.angle;
}

car.getCurrentRotation = function() {
  return this.currentRotation
}

car.isNotAlignedWith = function(rotation) {
  const precision = 0.00001;
  return Math.abs(1 - rotation.dot(this.currentRotation)) <= precision ? false : true;
}

// Animation-along-a-path

let i = 0

paper.view.onFrame = () => {
  car.updateRotationLabel()

  const requiredDirection = path.getTangentAt(i)
  const normal = requiredDirection.rotate(-90);
  const rotationSign = car.getCurrentRotation().dot(normal) > 0 ? 1 : -1

  car.position = path.getPointAt(i)

  if (car.isNotAlignedWith(requiredDirection)) {
    car.rotateAroundCenter(rotationSign);
  } else {
    car.position = path.getPointAt(i);
    i++

    if (i > path.length - 1) {
      paper.view.onFrame = () => {}
      console.log('done')
    }
  }
}

canvas {
  width: 100%;
  height: 100%;
  background: #666;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.min.js"></script>
<canvas></canvas>

使用外角沿路径旋转 'body

Rotating a 'body along a path using the external angles

javascript

html5-canvas

paperjs