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

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

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

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

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


javascript css image-processing sprite-sheet
person Tgwizman    schedule 09.12.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

person Prusse    schedule 09.12.2011

arrow_upward
7
arrow_downward

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

person stot    schedule 02.01.2013
comment
отличный ответ, и ваши комментарии в первом примере очень полезны. - person jedierikb; 16.04.2013

arrow_upward
2
arrow_downward

Вы можете сделать это, используя функцию drawImage на холсте. В следующем примере спрайт размером 40 x 100 масштабируется до двойного размера 80 x 200.

<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>
person Alex    schedule 09.12.2011
comment
На самом деле я вообще не думал о холсте! Спасибо! :D - person Tgwizman; 09.12.2011