如何在固定點附近旋轉精靈，使其跟隨光標

我正在開發一個小型迷你高爾夫球遊戲，用戶可以在其中移動光標移動以設置角度，並且施加的力將是箭頭的長度（當光標靠近球時力更小）。你可以看看它是如何工作在這裏：https://imgur.com/a/AQ1pi 如何在固定點附近旋轉精靈，使其跟隨光標

我已經想出瞭如何旋轉箭頭精靈跟隨光標，但我不知道如何使它繞着球移動，現在它只是在旋轉它的錨，在這種情況下是箭頭。我使用Panda.js（基於Pixi.js的框架）開發遊戲，但其API與本地Canvas函數類似。我不需要一個確切的實現（這就是爲什麼我不發佈任何代碼），但我想了解如何圍繞給定半徑的點旋轉精靈。在這種情況下，該點將是球的中心，半徑將是球的半徑。謝謝！

來源

2017-11-03 Julián Bonilla

您將旋轉點設置爲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>

來源

2017-11-03 23:24:55 Blindman67

如何在固定點附近旋轉精靈，使其跟隨光標

回答

相關問題