如何使用javascript从精灵表中缩放/拉伸/倾斜精灵?

Posted

技术标签:

【中文标题】如何使用javascript从精灵表中缩放/拉伸/倾斜精灵?【英文标题】:How can I scale/stretch/skew a sprite from a sprite sheet with javascript? 【发布时间】:2012-01-17 00:34:59 【问题描述】:

一些背景: 我正在制作光线投射器,嗯……正在制作。但我决定稍微改变一下。我开始着手创建光线投射器,并决定只显示一个图标并拉伸/倾斜它而不是仅仅围绕一堆像素移动会容易得多。

我的问题是: 如何使用 javascript 从精灵表中缩放/拉伸/倾斜精灵?

我基本上是想从一个精灵图像中获取一个 16 像素 x 16 像素的图像,然后用 javascript 定位、缩放、转动和倾斜它。我该怎么做呢?

如果这有帮助,我正在考虑连接该图像的三个版本,以给人一种 3D 块在 3D 空间中移动的印象,而无需实际使用 3D。

【问题讨论】:

【参考方案1】:

您可以通过在画布上使用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【参考方案2】:

您可以使用CSS3 transform 完成此操作。或者使用隐藏的画布元素,应用transformation,然后将其绘制到主画布上。

【讨论】:

【参考方案3】:

很可能最简单的方法是使用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 */

spritesheet 上有大小为 64x64px 的 sprite,并将它们缩放到 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/

【讨论】:

很好的答案,示例一中的 cmets 非常有帮助。

以上是关于如何使用javascript从精灵表中缩放/拉伸/倾斜精灵?的主要内容,如果未能解决你的问题,请参考以下文章

如何阻止win7触控平台上chrome的默认双指拉伸缩放

使用百分比缩放图像精灵:可能吗?

如何根据屏幕分辨率缩放 libgdx 中的精灵?

用作背景图像时如何缩放 CSS 精灵?

UILabel 文本在应用缩放变换时被压缩/拉伸

三.js:缩放时如何保持精灵文本大小不变