logo标签列表

如何使用JavaScript对精灵表中的精灵进行缩放/拉伸/扭曲？

javascriptcssimage-processingsprite-sheet
7

背景： 我正在制作一个光线追踪器，但是我决定稍微改变一下。我开始创建光线追踪器，并决定用javascript显示一个图标并拉伸/扭曲它，而不是移动一堆像素。

我的问题是： 如何使用javascript从精灵表中缩放/拉伸/扭曲精灵?

我基本上希望从精灵图像中获取一个16px x 16px的图像，并使用javascript进行位置、缩放、旋转和扭曲。我该怎么做呢？

如果有帮助的话，我想将那个图像的三个版本连接起来，给人以在三维空间中移动的三维块的印象，而不实际使用三维技术。

3个回答
7

最简单的方法可能是使用 background-size CSS 属性。由于大多数现代浏览器（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;
}

在这里可以看到以上两种方法的实时示例：http://jsfiddle.net/Zgr5w/1/。
很棒的答案，你在示例一中的评论非常有帮助。 - jedierikb
2
你可以使用CSS3 transform来实现。或者使用一个隐藏的画布元素，应用变换，然后将其绘制到主画布上。
2
你可以通过在画布上使用drawImage函数来实现此操作。以下示例将40x100的精灵缩放为双倍80x200大小。
<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>
我实际上完全没有考虑到画布！谢谢！:D - Tgwizman
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接