Question

我正在构建一些JavaScript组件来处理通用画布绘图，而且我很难让旋转工作。我有一个类似于此的功能（这一个被简化了很多）。

function drawThing (ctx, posX, posY, sizeX, sizeY, rotation, drawFn) {
    // `ctx` is the 2d canvas context
    ctx.save();
    ctx.beginPath(); // Not sure if this is needed
    ctx.translate(posX, posY); // What do I use here?
    ctx.rotate(rotation); // rotation is in radians
    drawFn(ctx, posX, posY, sizeX, sizeY);
    ctx.restore();
}
function exampleDrawFn (ctx, posX, posY, sizeX, sizeY) {
    ctx.fillStyle = "#333";
    ctx.fillRect((posX - sizeX/2), (posY - sizeY/2), sizeX, sizeY);
}

我无法弄清楚翻译参数的用途;或者某处可能存在不同的错误。

（虽然它有点复杂，但这里的代码我实际上正在处理：https://github.com/rocket-boots/rocket-boots/blob/master/scripts/rocketboots/Stage.js#L423）

Answer 1

绘制图像的最快捷方式。

function drawImage (image, x, y, sizeX, sizeY, rot) {
    var xdx = Math.cos(rot);  // direction of x axis
    var xdy = Math.sin(rot);
    ctx.setTransform(
        xdx, xdy,  // set the direction of the x axis
        -xdy, xdx, // set the direction of the y axis (at 90 deg clockwise from x axis
        x, y       // set the origin the point around which to rotate
    );
    ctx.drawImage(image,- sizeX / 2, -sizeY / 2, sizeX, sizeY);
}

假设您希望图像围绕其中心旋转x点，y完成渲染图像后，您可以使用ctx.setTransform(1,0,0,1,0,0);

重置为默认变换

这比...更快

function drawImage(image, x, y, sizeX, sizeY, rot){
    ctx.setTransform(1, 0, 0, 1, x, y);
    ctx.rotate(rot);
    ctx.drawImage(image, -sizeX / 2, -sizeY / 2, sizeX, sizeY);
}

...在FF和Chrome上，但明天可能不会这样。

Answer 2

我能够解决这个问题，但在轮换后反转翻译。

function drawThing (ctx, posX, posY, sizeX, sizeY, rotation, drawFn) {
    ctx.save();
    ctx.translate(posX, posY);
    ctx.rotate(rotation);
    ctx.translate(-posX, -posY);
    drawFn(ctx, posX, posY, sizeX, sizeY);
    ctx.restore();
}

好奇是否有改进这种方法的空间，但我相信这应该有用。

如何使用JavaScript canvas创建旋转的通用函数？

2 个答案: