0

これが私のコードです：

//ct is a canvas context for drawing stuff
//bw is image width, bh is image height
function drawBox() {
    ct.translate(x, y)
    ct.rotate(rot)
    ct.drawImage(box, -bw/2, -bh/2)
    ct.fillRect((-bw/2) + (50 * Math.sin(rot)), (-bh/2) - (50 * Math.cos(rot)), 20, 20)
    ct.rotate(-rot)
    ct.translate(-x, -y)
}

ボックスを描画し、その前に 50 ピクセルの四角形を配置することになっています。しかし、それは機能していません。画像が 1 回回転するたびに、長方形は画像の周りを 2 回回転します。

私は少し実験しましたが、このコードは機能します:

function drawBox() {
    ct.drawImage(box, x, y)
    ct.fillRect((x) + (50 * Math.sin(rot)), (y) - (50 * Math.cos(rot)), 20, 20)
}

回転を削除し、座標をxとに変更しましたy。上記のコードが機能する場合、それを回転させてからこのコードを実行しても機能しないのはなぜですか? この問題を解決するにはどうすればよいですか?

4

1 に答える 1

0

私はこれを解決したようです。問題は、他のボックスを描画するときに間違ったポイントを中心に回転していることであることに気付いたので、次のコードを使用しました。

function drawBox() {
    ct.translate(x, y)
    ct.rotate(rot)
    ct.drawImage(box, -halfbw, -halfbh)
    ct.rotate(-rot)
    ct.translate(-x, -y)
    if (sCount > 0) {
        sCount --
        ct.translate(x, y+halfbh)
        ct.rotate(rot+PI)
        ct.fillRect((halfbh * Math.sin(rot)), (halfbh * Math.cos(rot))+halfbh, 10, 50)
        ct.rotate(-rot-PI)
        ct.translate(-x, -y-halfbh)
    }
}

（のように、無関係なものをいくつか追加しましたsCountが、これが本質的に問題でした。）2番目のボックスが適切な場所にある場所に再翻訳して回転できるように、翻訳と回転を解除する必要がありました。 。

于 2013-03-06T13:55:51.583 に答える