javascript - 如何使用 javascript 从 Sprite 表缩放/拉伸(stretch)/倾斜 Sprite ？

Question

一些背景:我正在制作一个 raycaster，好吧......正在制作。但我决定稍微改变一下。我开始着手创建光线转换器，并决定只显示一个图标并拉伸(stretch)/倾斜它而不是仅仅围绕一堆像素移动会容易得多。

我的问题是:我如何使用 javascript 从 sprite 表缩放/拉伸(stretch)/倾斜 sprite？

我基本上想从 sprite 图像中获取 16px x 16px 图像，然后使用 javascript 对其进行定位、缩放、旋转和倾斜。我应该怎么做？

如果这有帮助，我正在考虑连接该图像的三个版本，以在不实际使用 3D 的情况下赋予它 3D block 在 3D 空间中四处移动的印象。

Answer 1

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