在画布中旋转精灵 [英] Rotating a sprite in a canvas
问题描述
我在一幅图像中有几个精灵,我想将单个精灵绘制到画布上.我无法让它们旋转.
I have several sprites in one image and I want to draw individual sprites to a canvas. I am having trouble getting them to rotate.
当我尝试旋转精灵时,似乎它从未绕着应该旋转的点旋转.
When I attempt to rotate a sprite, it seems that it never rotates around the point that it should be.
我正在使用以下功能.角度是在加载时设置的.
I'm using the following function. The angle is set at loading time.
Sprite.prototype.draw = function (ctx, x ,y) {
if (this.angle == 0) {
ctx.drawImage(this.img, this.x, this.y, this.width, this.height, x, y, this.width, this.height);
}
else {
ctx.save();
ctx.translate(x, y);
ctx.rotate(this.angle * this._TORADIANS);
ctx.drawImage(this.img, this.x, this.y, this.width, this.height, x, y, this.width, this.height);
ctx.restore();
}
}
我浏览了一些教程,在这种情况下似乎无济于事.
I've looked through several tutorials and nothing seems to work in this case.
推荐答案
首先将上下文翻译成 x,y
,再加上图像尺寸的一半,以便上下文的原点位于图片的所需位置:
Start by translating the context to x, y
plus half the dimensions of the image so that the context origin is at the center of the image's desired location:
ctx.translate(x + this.width / 2, y + this.height / 2);
将上下文旋转所需的度数:
Rotate the context by the desired number of degrees:
ctx.rotate(this.angle * Math.PI / 180);
绘制图像,将其尺寸偏移一半以说明原点的位置:
Draw the image, offset by half its dimensions to account for the position of the origin:
ctx.drawImage(this.img, this.x, this.y, this.width, this.height,
-this.width / 2, -this.height / 2, this.width, this.height);
现在撤消旋转和平移:
ctx.rotate(-this.angle * Math.PI / 180);
ctx.translate(-x - this.width / 2, -y - this.height / 2);
根据您的情况,您可以按以下方式更改 Sprite.draw()
.
In your case, you can change Sprite.draw()
as follows.
Sprite.prototype.draw = function (ctx, x, y) {
ctx.save();
ctx.translate(x + this.width / 2, y + this.height / 2);
ctx.rotate(this.angle * Math.PI / 180);
ctx.drawImage(this.img, this.x, this.y, this.width, this.height,
-this.width / 2, -this.height / 2, this.width, this.height);
ctx.restore();
};
以下代码段大体上演示了这种方法.
The following snippet demonstrates this approach in general.
window.onload = function () {
var width = 600,
height = 600,
canvas = document.getElementsByTagName('canvas')[0],
context = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
var image = new Image();
image.src = 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a';
function draw(x, y, degrees) {
context.translate(x + image.width / 2, y + image.height / 2);
context.rotate(degrees * Math.PI / 180);
context.drawImage(image, 0, 0, image.width, image.height,
-image.width / 2, -image.height / 2, image.width, image.height);
context.rotate(-degrees * Math.PI / 180);
context.translate(-x - image.width / 2, -y - image.height / 2);
}
image.onload = function () {
var degrees = 0;
function loop() {
degrees = (degrees + 1) % 360;
context.fillRect(0, 0, canvas.width, canvas.height);
draw(0, 0, degrees);
window.requestAnimationFrame(loop);
};
window.requestAnimationFrame(loop);
};
};
canvas {
border: 2px solid #ccc;
}
<canvas></canvas>
这篇关于在画布中旋转精灵的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!