Как я могу масштабировать / растягивать / наклонять спрайт из листа спрайта с помощью JavaScript? - PullRequest
Новая
       22

Как я могу масштабировать / растягивать / наклонять спрайт из листа спрайта с помощью JavaScript?

6 голосов
/ 09 декабря 2011

Некоторый фон: Я делаю Raycaster, ну ... делал. Но я решил немного его изменить. Я начал с создания лучевого заклинателя и решил, что будет гораздо проще просто отобразить значок и растянуть / наклонить его, а не просто перемещать кучу пикселей.

Мой вопрос: Как я могу масштабировать / растягивать / наклонять спрайт из листа спрайта с помощью JavaScript?

Я в основном хочу получить изображение 16 на 16 пикселей из спрайтового изображения, расположить его, масштабировать, повернуть и наклонить с помощью javascript. Как мне это сделать?

Если это поможет, я думал о соединении трех версий этого изображения, чтобы создать впечатление трехмерного блока, перемещающегося в трехмерном пространстве без фактического использования 3D.

Ответы [ 3 ]

7 голосов
/ 03 января 2013

Скорее всего, самый простой способ - использовать свойство 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 */
}

Спрайт-лист имеет спрайты размером 64x64px и масштабирует их до 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/

2 голосов
/ 09 декабря 2011

Вы можете сделать это с помощью CSS3 преобразования . Или используйте скрытый элемент canvas, примените преобразование , а затем перетащите его на основной холст.

2 голосов
/ 09 декабря 2011

Вы можете сделать это, используя функцию 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>
...