0

画像を操作したり、移動したり、回転したり、拡大縮小したりするキャンバスがあります。すべての変換を組み合わせようとするまで、すべてが正常に機能しています。たとえば、ユーザーのマウスの動きの違いに基づいて画像を移動していても問題ありませんが、最初に画像を回転させて、たとえば180度にすると、画像の動きはマウスの動きに対して反転します。どうすれば修正できますか？

        ctx.clearRect(0, 0, 320, 580);
        ctx.save();
        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.scale(scale, scale);
        ctx.rotate(toRad(angle));
        ctx.translate(-(canvas.width / 2), -(canvas.height / 2));
        ctx.drawImage(image, tx, ty, image.width, image.height);
        ctx.restore();
4

1 に答える 1

0

可能であればもう少しコードを投稿する必要がありますが、問題は翻訳に関係していると思います。動きはマウスに依存しませんが、同様の例を次に示します。

ライブデモ

    // save the context
    ctx.save();
    // translate it to the objects x and y, basically your taking the canvas and moving it to each object.
    ctx.translate(box.x, box.y);
    // now rotate it
    ctx.rotate(box.angle);
    // -5 is half of the box width and height 0,0 is the boxes location, im drawing it at half the width and height to set the rotation origin to the center of the box.
    ctx.fillRect(-5,-5, 10,10); 
    // now restore
    ctx.restore();

あなたtxとty私は、キャンバスを回転させて「回転」させたので、マウスの座標からのものであると想定していtxますty。

于 2012-04-15T23:51:10.117 に答える