一些背景: 我正在制作一个 raycaster,好吧......正在制作。但我决定稍微改变一下。我开始着手创建光线转换器,并决定只显示一个图标并拉伸(stretch)/倾斜它而不是仅仅围绕一堆像素移动会容易得多。
我的问题是: 我如何使用 javascript 从 sprite 表缩放/拉伸(stretch)/倾斜 sprite?
我基本上想从 sprite 图像中获取 16px x 16px 图像,然后使用 javascript 对其进行定位、缩放、旋转和倾斜。我应该怎么做?
如果这有帮助,我正在考虑连接该图像的三个版本,以在不实际使用 3D 的情况下赋予它 3D block 在 3D 空间中四处移动的印象。
最佳答案
很可能最简单的方法是使用 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/
关于javascript - 如何使用 javascript 从 Sprite 表缩放/拉伸(stretch)/倾斜 Sprite ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8450214/