Javascript 相对于其父对象位置重新定位精灵

这是一个与HTML5/JavaScript游戏开发相关的问题。 我需要旋转父精灵，并保持其子精灵的位置和旋转正确对齐。 因此，如果父对象旋转，子对象应保持正确的位置和旋转

有人知道这个公式是什么吗？

---

您必须了解对象的局部坐标和世界坐标，以便跟踪父子关系。如果你想制作动画，这并不像看上去那么容易，但这里有一个例子。您要查找的“公式”位于

b.pos

中，用于计算相对于父对象的位置

演示：

---

谢谢你的回答！我理解代码，但它不包括旋转。如果子对象从父对象的中心偏移，并且父对象旋转，子对象将如何重新定位？不确定您的意思。如果你保持逻辑，它应该会起作用。旋转整个画布，执行操作，并在需要时恢复旋转，例如，谢谢，我现在完全理解这一点，您的解决方案与我的代码配合使用！我犯的错误是试图在应用程序代码中进行所有这些转换。我没有考虑让画布来做。我将（）保存在父精灵上，然后循环遍历其子精灵，并使用它们的局部坐标渲染它们。然后在父级和子级渲染完成后还原（）。

// Some basic canvas utilities
// (see demo)

// Objects to be drawn on canvas
var a = {
  x: 0, // global coordinates
  y: 0, // ^
  vx: .1, // velocity
  vy: .1, // ^
  w: 100, // dimensions
  h: 100, // ^
  color: 'red'
};

var b = {
  parent: a, // relationship
  x: 0,
  y: 0,
  lx: .5, // local coordinates (percentage)
  ly: .5, // ^
  w: 25,
  h: 25,
  color: 'yellow',
  pos: function() { // calculate position relative to given parent
    return {
      x: this.parent.w * this.lx - this.w / 2,
      y: this.parent.h * this.ly - this.h / 2
    };
  }
};

// Draw boxes with parent-child relationship
// @param a {Object} Parent
// @param b {Object} Child
var draw = function(a, b, ctx, dt) {
  ctx.fillStyle = a.color;
  ctx.fillRect(a.x += a.vx * dt, a.y += a.vy * dt, a.w, a.h);
  ctx.fillStyle = b.color;
  ctx.fillRect(b.x + a.x + b.pos().x, b.y + a.y + b.pos().y, b.w, b.h);
};

// Initialize and animate canvas
document.body.appendChild(canvas(400, 400, function(ctx) {
  return render(function(dt) {
    ctx.clearRect(0, 0, 400, 400);
    draw(a, b, ctx, dt);
  });
}));