使画布内的图像精灵跟随鼠标

问题描述：

我一直在为这一整天挣扎。我可以使图像跟随鼠标指针，但是当我尝试转动图像角度时，我无法使其工作。您可以在这里查看代码：jsbin example。以正确的方式在鼠标后面有另一个黑色方块，但我无法使其与精灵图像一起工作。使画布内的图像精灵跟随鼠标

答

您无法正确翻译图像中心的旋转。你需要翻译一半的宽度和高度，做旋转，然后翻译回来。

我已经更新了你的SpriteImage渲染方法正确翻译：

this.render = function(xPos, yPos, scale, w, h, angle) { 
    ctx.save(); 

    ctx.translate(xPos, yPos); 
    ctx.translate(w/2, h/2); 
    ctx.rotate(angle); 
    ctx.translate(-w/2, -h/2); 
    ctx.fillRect(0, 0, w, h); 

    //console.log('angle:',angle); 
    ctx.drawImage(this.img, 
     this.x, this.y, 
     w, h, 
     0, 0, 
     width*scale, height*scale); 
    ctx.restore(); 
};

[编辑] 这里给jsbin链接与更新的代码：http://output.jsbin.com/tulimaxavu/1/edit

非常感谢！这很好！ –

现在值得花些时间来研究仿射变换如何工作，以及它们如何与js中的画布相关联。在这种情况下，您可以将每个转换视为前一个转换为“堆叠”，并且它们都是针对当前原点而发生的。如果你想让图像的中心位置出现旋转，你需要翻译成它，然后旋转。然后你需要翻译回左上角，这样当你画出它时，它就在正确的位置。希望有所帮助。 –

是的，它的确帮助我理解我错过了将旋转的起源转换回开始的地方。再次感谢Yona。 –

使画布内的图像精灵跟随鼠标

相关推荐