ПочемуEaslJS масштабирует мои спрайты?

Я создаю анимированный фон в Canvas с помощью EaselJS. Мне интересно, почему мои спрайты масштабируются, как только я устанавливаю холст по размеру окна... Изображения выглядят растянутыми...

$('тело').append(''); $('#backgroundCanvas').height($(window).height()); $('#backgroundCanvas').width($(window).width());

var sprite = new createjs.SpriteSheet({
          "animations":
            {
                "run": [0, 6, "run", frequency]},
                "images": [url],
                "frames":
                    {
                        "height": height,
                        "width":width,
                        "regX": 0,
                        "regY": 0,
                        "count": count
                    }
            });
                    var item = new createjs.BitmapAnimation(sprite);    
                    item.height = height;       
                    item.width = width;             
                    //item.scale = item.scaleY = item.scaleX= 0.5;  
                    item.x = positionX;         
                    item.y = positionY;
                    item.dirX = 1;  
                    item.dirY = 1;      
                    item.vX = 4;            
                    item.vY = 4;


                    item.gotoAndPlay("run");

                    stage.addChild(item);

javascript canvas sprite createjs easeljs
person manomoul    schedule 22.03.2013    source источник
comment
Можете ли вы опубликовать свой код или ссылку на вашу проблему?   -  person olsn    schedule 22.03.2013
comment
Размер вашего исходного холста пропорционален окну?   -  person markE    schedule 23.03.2013

Ответы (2)


arrow_upward
3
arrow_downward

Когда вы масштабируете холст с помощью CSS, он будет масштабировать содержимое, так как это то же количество пикселей. Масштабируйте его с помощью JavaScript (задайте свойства ширины и высоты), и он изменит количество пикселей и не будет растягивать ваш контент.

Ваше здоровье.

person Lanny    schedule 23.03.2013
comment
Методы jQuery width() и height() будут использовать CSS для установки размера, а не JavaScript. Вам нужно напрямую ориентироваться на холст и использовать JavaScript для установки ширины/высоты. @fareed опубликовал решение с использованием jQuery в этой теме. - person Lanny; 09.05.2014

arrow_upward
2
arrow_downward

важно знать, что объект холста получает свою ширину и высоту из ширины и высоты атрибута html, изменяя ширину и высоту для css, будет масштабировать только объект холста.

так что у вас есть 2 решения: используйте этот html

<canvas id="backgroundCanvas" width="968" height="358"></canvas>

или измените свой код на:

$('#backgroundCanvas').attr("height",$(window).height());
$('#backgroundCanvas').attr("width",$(window).width());

теперь я могу сказать вам привет ;)

person Fareed Alnamrouti    schedule 29.12.2013