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

原文 标签 javascript css image-processing sprite-sheet

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

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

我基本上想从 Sprite 图像中获取 16 像素 x 16 像素的图像,然后定位、缩放、旋转并使用 javascript 倾斜它。我该怎么做呢?

如果这有帮助,我正在考虑连接该图像的三个版本,以使其具有 3D block 在 3D 空间中移动的印象,而无需实际使用 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/

相关文章:

php - 如何将所有图像转换为jpg?

javascript - jQuery .load()不加载html

javascript - 尝试制作一个基本的加载页面

html - 如何使div响应并垂直堆叠?

php - 如何从PHP中的URL上传图像

python - 增加图像亮度而不会溢出

javascript - 如何获取两个点之间的字符串(最后一个点后跟图像扩展名)?

javascript - AngularJS - 一个页面上有更多相同的指令,有自己的状态

javascript - 目录卡片。翻转时悬停,当用户发现时翻转

html - 如何制作唯一的图像按钮?