如何围绕固定点旋转精灵，使其跟随光标

Question

我正在开发一个小型迷你高尔夫游戏，用户可以在其中移动光标以设置角度进行射击，所施加的力将是箭头的长度（光标靠近球时力较小）。你可以在这里查看它是如何工作的：https://imgur.com/a/AQ1pi

我已经知道如何旋转箭头精灵以跟随光标，但我还不知道如何让它围绕球移动，现在它只是在它的锚点中旋转，在这种情况下是箭头的头部.

我正在使用 Panda.js（一个基于 Pixi.js 的框架）来开发游戏，但它的 API 类似于原生的 Canvas 函数。我不需要一个确切的实现（这就是我不发布任何代码的原因），但我想了解一些关于如何围绕给定半径中的一个点旋转精灵的想法。在这种情况下，该点将是球的中心，而半径将是球的半径。谢谢！

Answer 1

您使用ctx.translate 或ctx.setTransform 设置旋转点，然后使用ctx.rotate(ang); 应用旋转然后绘制图像偏移，使旋转点位于(0,0)。即，如果您希望旋转点位于图像坐标 (100,50) 处，则在 ctx.drawImage(image,-100,-50); 处渲染

要获得从点到鼠标的角度，请使用Math.atan2

requestAnimationFrame(update);

// draws rotated image at x,y.
// cx, cy is the image coords you want it to rotate around
function drawSprite(image, x, y, cx, cy, rotate) {
  ctx.setTransform(1, 0, 0, 1, x, y);
  ctx.rotate(rotate);
  ctx.drawImage(image, -cx, -cy);
  ctx.setTransform(1, 0, 0, 1, 0, 0);  // restore defaults
}

// function gets the direction from point to mouse and draws an image 
// rotated to point at the mouse
function rotateAroundPoint(x, y, mouse) {
  const dx = mouse.x - x;
  const dy = mouse.y - y;
  const dir = Math.atan2(dy, dx);
  drawSprite(arrow, x, y, 144, 64, dir);
}

// Main animation loop.
function update(timer) {
  globalTime = timer;
  ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform
  ctx.globalAlpha = 1; // reset alpha
  ctx.clearRect(0, 0, w, h);
  strokeCircle(150, 75, 10);
  rotateAroundPoint(150, 75, mouse);
  requestAnimationFrame(update);
}


//=====================================================
// All the rest is unrelated to the answer.

const ctx = canvas.getContext("2d");
const mouse = {  x: 0, y: 0, button: false };
["down", "up", "move"].forEach(name => document.addEventListener("mouse" + name, mouseEvents));
function mouseEvents(e) {
  mouse.bounds = canvas.getBoundingClientRect();
  mouse.x = e.pageX - mouse.bounds.left - scrollX;
  mouse.y = e.pageY - mouse.bounds.top - scrollY;
  mouse.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : mouse.button;
}
const CImage = (w = 128, h = w) => (c = document.createElement("canvas"), c.width = w, c.height = h, c);
const CImageCtx = (w = 128, h = w) => (c = CImage(w, h), c.ctx = c.getContext("2d"), c);
const drawPath = (ctx, p) => {var i = 0;while (i < p.length) {ctx.lineTo(p[i++], p[i++])}};
const strokeCircle = (l,y=ctx,r=ctx,c=ctx) =>{if(l.p1){c=y; r=leng(l);y=l.p1.y;l=l.p1.x }else if(l.x){c=r;r=y;y=l.y;l=l.x}c.beginPath(); c.arc(l,y,r,0,Math.PI*2); c.stroke()};
const aW = 10;
const aH = 20;
const ind = 5;
const arrow = CImageCtx();
arrow.ctx.beginPath();
drawPath(arrow.ctx, [
  ind, 64 - aW,
  128 - ind - aH, 64 - aW,
  128 - ind - aH, 64 - aH,
  128 - ind, 64,
  128 - ind - aH, 64 + aH,
  128 - ind - aH, 64 + aW,
  ind, 64 + aW,
]);
arrow.ctx.fillStyle = "red";
arrow.ctx.fill();
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
var w = canvas.width;
var h = canvas.height;
var cw = w / 2; // center 
var ch = h / 2;
var globalTime;

canvas {
  border: 2px solid black;
}

<canvas id="canvas"></canvas>