Question

我有一个小脚本：

身体沿路径移动。
当它到达某个段的末尾时，它会启动围绕其中心旋转，直到它与下一个段的切线对齐为止。
然后它开始沿着下一段移动。

一切都运转良好，但旋转时遇到一个小问题。身体应旋转以使其自身与反射/外部角度对齐。

正如您在下面的MCVE中所看到的那样，第二次旋转是顺时针方向，当它应该是逆时针时。

相反的情况发生在第3段。它逆时针旋转，顺时针旋转，因为旋转将跟随外角。

我做错了什么？

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

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

＆＃13;

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')
    }
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

要解决问题有两件事。

首先，你的程序应该工作的真实角度范围只有0到360度。我通过计算角度的模360来解决这个问题，如果它们仍然低于0则增加360以确保它们在0-360范围内是安全的。

第二种情况是，有两种情况，块应该在方向1上旋转。一旦它应该指向的角度大于它现在面向的角度。但是当差异超过180并且相反时，因为角度是一个像数字的圆圈，这意味着环绕可以是到达另一个值的最短路径（例如，在0到0的范围内从0到350°的差异如果以正常方式绕行而不是340°，则360度仅为20°。

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>

使用外角

2 个答案: