6

いくつかの背景: 私は raycaster を作成しています。しかし、私はそれを少し変えることにしました。レイ キャスターの作成を開始し、アイコンを表示して引き伸ばしたり歪めたりする方が、ピクセルの集まりを移動するよりもはるかに簡単であると判断しました。

私の質問は次のとおりです: JavaScript を使用してスプライト シートからスプライトをスケーリング/ストレッチ/スキューするにはどうすればよいですか?

私は基本的に、スプライト画像から 16px x 16px の画像を取得し、それを配置し、拡大縮小し、回転させ、javascript で傾斜させたいと考えています。どうすればいいですか？

これが役に立てば、その画像の 3 つのバージョンを接続して、実際に 3D を使用せずに 3D 空間で 3D ブロックが動き回っているような印象を与えることを考えていました。

4

3 に答える 3

7

おそらく最も簡単な方法は、background-sizecss プロパティを使用することです。最新のブラウザー (IE 9 以降、FF4 以降、Safari4 以降、Chrome3 以降) のほとんどがサポートしているため、次の操作を実行できます。

html:

<div id="mySprite">
</div>

CSS:

#mySprite{
    height: 80px; /* 64px * 1.25 */
    width: 80px;  /* 64px * 1.25 */
    background-image:url(my.png);
    background-position: -0px -560px; /* pick specific one at -448px * 1.25 */
    background-size:640px 640px; /* scale image to 512px * 1.25 */
}

スプライトシートには、サイズが 64x64px のスプライトがあり、それらを 80x80px にスケーリングします。ここで実際の例を参照してください: http://jsfiddle.net/Zgr5w/1/

@Prusse が言ったように: も使用できますtransform: scale()が、いくつかの欠点があります: ブラウザのサポート、追加の位置変換、他の要素との位置合わせが壊れる可能性があります:

#mySprite{
    height: 64px;
    width: 64px;
    background-image:url(my.png);
    background-position: -0px -448px;
    transform:scale(1.25);
    /* additional to compensate the position shift */
    position:relative;
    top:10px;
    left:10px;
}

ここで上記の 2 つのアプローチの実際の例を参照してください: http://jsfiddle.net/Zgr5w/1/

于 2013-01-02T22:42:43.233 に答える
2

drawImageこれは、キャンバス上の関数を使用して実行できます。次の例では、40x100のスプライトを80x200の2倍のサイズにスケーリングします。

<html>
    <body>
    <canvas id="canvas" width=80 height=200>
    <script language="JavaScript">              
        function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');
            var img = new Image();
            img.src = 'http://gamemedia.wcgame.ru/data/2011-07-17/game-sprite-sheet.jpg';
            img.onload = function() {
                // (image, sx, sy, sw, sh, dx, dy, dw, dh)
                ctx.drawImage(img,0,0,40,100,0,0,80,200);
            }
        }

        draw();

    </script>
    </body>           
</html>
于 2011-12-09T19:35:15.007 に答える
2

CSS3 transformでそれを行うことができます。または、非表示のキャンバス要素を使用し、変換を適用してからメイン キャンバスに描画します。

于 2011-12-09T19:40:38.833 に答える