1

次のコードを使用して、デバイスの向きに基づいてモバイル ブラウザーでキャンバスを回転させようとしています。

e=window.event;
        var w=window.innerWidth||window.screen.availWidth;
        var h=window.innerHeight||window.screen.availHeight;
        var ww = colouringImage.width;
        var hh = colouringImage.height;
        var c = document.createElement('canvas');

        var cntx = c.getContext('2d');
        if(this.canvas.height > h) { 
            c.setAttribute('width', hh);
            c.setAttribute('height',ww);
            cntx.rotate(-90 * Math.PI / 180);
            cntx.drawImage(colouringImage, -ww, 0);
            this.artboard.canvas.width = hh;
            this.artboard.canvas.height = ww;
            this.artboard.clearRect(0,0,hh,ww);
            this.artboard.drawImage(c,0,0);
            c = document.createElement('canvas');
            c.setAttribute('width', hh);
            c.setAttribute('height',ww);
            cntx = c.getContext('2d');
            cntx.rotate(-90 * Math.PI / 180);
            cntx.drawImage(this.canvas,-ww,0);
            this.canvas.width = hh;
            this.canvas.height = ww;
            this.context.clearRect(0,0,hh,ww);
            this.context.drawImage(c,0,0);
         }else if (this.canvas.width > w)
         {
            c.setAttribute('width', ww);
            c.setAttribute('height', hh);
            cntx.drawImage(colouringImage, 0, 0);
            this.artboard.canvas.width= ww;
            this.artboard.canvas.height = hh;
            this.artboard.clearRect(0,0,ww,hh);
            this.artboard.drawImage(c,0,0);
            c = document.createElement('canvas');
            c.setAttribute('width',ww);
            c.setAttribute('height',hh);
            cntx = c.getContext('2d');
            cntx.rotate(90 * Math.PI / 180);
            cntx.drawImage(this.canvas,0,-ww);
            cntx.translate(hh/2,ww/2)
            cntx.rotate(0 * Math.PI / 180);
            this.canvas.width = ww;
            this.canvas.height=hh;
            this.context.clearRect(0,0,ww,hh);
            this.context.drawImage(c,0,0);
         }

ここで行っているのは、既に描画されているもののコピーを作成し、それを一時キャンバス上で回転させてから、クリア後にキャンバスに描画することです。ただし、何が起こっているのかというと、画像がクリアされていないようです。画像はpngで、透明にする必要があります。

キャンバスに描かれた画像をクリアする他の方法はありますか?

4

1 に答える 1

0

メモリベースのキャンバスを作成し、必要な回転を適用してから、メモリベースのキャンバスをソースとして使用してメインキャンバスに画像を戻すことで、描画用の座標を歪めることなくキャンバスを正確に回転させることができました。

注: 現在、プロジェクト用に設計された 2 つのキャンバスを使用しています。したがって、必要な翻訳を適用するために、必要に応じて ememory ベースのキャンバスを作成する必要がありました。

于 2012-12-21T15:18:58.357 に答える