如何使用javascript从精灵表中缩放/拉伸/倾斜精灵？
[英]How can I scale/stretch/skew a sprite from a sprite sheet with javascript?
问题描述
Some background: I am making a raycaster, well... was making. 
一些背景：我正在做一个raycaster，好吧......正在制作。 But I decided to change it up a bit. 但我决定改变一下。 I started off going on creating the ray caster and decided it would be so much easier to just display an icon and stretch/skew it instead of just moving around a bunch of pixels. 我开始创建光线施法者，并决定只显示一个图标并拉伸/倾斜它而不是仅仅移动一堆像素就容易多了。
My question is: How can I scale/stretch/skew a sprite from a sprite sheet with javascript? 我的问题是：如何使用javascript从精灵表中缩放/拉伸/倾斜精灵？
I basically am wanting to get a 16px by 16px image from a sprite image, and position it, scale it, turn it, and skew it with javascript. 我基本上想要从精灵图像中获取16像素×16像素的图像，并将其定位，缩放，转动，并使用javascript进行倾斜。 How should I go about doing that? 我应该怎么做呢？
If this helps, I was thinking about connecting three versions of that image to give it the impression of a 3D block moving around in a 3D space without actually using 3D. 如果这有帮助，我正在考虑连接该图像的三个版本，以给它一个3D块在3D空间中移动而不实际使用3D的印象。
3 个解决方案
解决方案1
7 2013-01-02 22:42:43
Most probably the easiest way is to use the background-size css property. 最可能最简单的方法是使用background-size css属性。 As most modern browsers (IE 9+, FF4+, Safari4+, Chrome3+) support it you can do the following: 由于大多数现代浏览器（IE 9 +，FF4 +，Safari4 +，Chrome3 +）都支持它，您可以执行以下操作：
html: HTML：
<div id="mySprite">
</div>
css: 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 */
}
The spritesheet has sprites with size 64x64px on it and scales them to 80x80px. spritesheet上有精灵64x64px的精灵，并将它们缩放到80x80px。 See live example here: http://jsfiddle.net/Zgr5w/1/ 在这里查看实例： http ： //jsfiddle.net/Zgr5w/1/
As @Prusse said: you can use transform: scale() also but it has some drawbacks: browser support, additional position transformation, alignment with other elements may be broken: 正如@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;
}
see live example of the above two approaches here: http://jsfiddle.net/Zgr5w/1/ 在这里看到上述两种方法的实例： http ： //jsfiddle.net/Zgr5w/1/
解决方案2
2 2011-12-09 19:35:15
You can accomplish this by using the drawImage function on a canvas. 您可以通过在画布上使用drawImage函数来完成此操作。 The following example scales a 40x100 sprite to double 80x200 size. 以下示例将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>
解决方案3
2 已采纳 2011-12-09 19:40:38
You can do it with CSS3 transform . 你可以用CSS3转换来做到这一点。 Or use a hidden canvas element, apply a transformation and then drawn it to the main canvas. 或者使用隐藏的画布元素，应用转换 ，然后将其绘制到主画布。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.