EaselJS: изменение размеров объектов формы

Вообще нубский вопрос. Я злоупотреблял Google и по какой-то причине, к удивлению, не смог найти ничего по этому поводу...? Я чувствую, что здесь что-то упускаю. :П

В настоящее время у меня есть функция resize(), которая изменяет размеры холста в соответствии с размером окна. В минимальном примере (который также использует jQuery) у меня есть переменная, которая ссылается на мой объект Shape. Согласно документам, объект Shape не включает свойства ширины и высоты. Каков наиболее эффективный способ изменения размера объекта Shape? Динамическое удаление/перерисовка?

Вот что у меня есть:

            var stage;

            var bgColor;

            $(document).ready(function(){
                init();
            });

            function init()
            {
                stage = new createjs.Stage("canvasStage");

                bgColor = new createjs.Shape();
                bgColor.graphics.beginFill("#000000").drawRect(0,0, stage.canvas.width, stage.canvas.width);

                stage.addChild(bgColor);

                $(window).resize(function(){windowResize();});
                windowResize();
            }

            function windowResize()
            {
                stage.canvas.width = $(window).width();
                stage.canvas.height = $(window).height();
                //bgColor.width = $(window).height();// No width property
                //bgColor.height = $(window).height();// NO height property

                stage.update();}

html5-canvas createjs easeljs
person Ricebandit    schedule 19.02.2013    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Вы можете использовать масштабы фигуры X и шкалу Y, чтобы масштабировать фигуру.

Примечание. Объект Shape расширяет DisplayObject, поэтому вы также можете просмотреть документацию DisplayObject, чтобы узнать о многих других полезных свойствах/методах.

myShape.scaleX=1.2;
myShape.scaleY=1.2;
person markE    schedule 19.02.2013
comment
Спасибо за это. Как-то отстойно, что они не присвоили объектам свойства ширины/высоты (я получаю воспоминания о HTML-таблицах). scaleX и scaleY не служат одной и той же цели, но похоже, что это единственный способ сделать горизонтальное/вертикальное преобразование. В итоге я использовал функции преобразования, так что я все еще могу точно использовать точную ширину и высоту (добавлено в мой исходный пост). - person Ricebandit; 28.02.2013

arrow_upward
2
arrow_downward

как упоминалось @markE, доступны только scaleX и scaleY.

Способ обойти эту проблему — создать экземпляры фигур шириной 1 пиксель и высотой 1 пиксель:

mc_bg = new createjs.Shape();
mc_bg.graphics.beginFill("#CCCCCC").drawRect(0,0,1,1);
stage.addChild(mc_bg);

mc_left = new createjs.Shape();
mc_left.graphics.beginFill("#333333").drawRect(0,0,1,1);
stage.addChild(mc_left);

mc_circle = new createjs.Shape();
mc_circle.graphics.beginFill("#888888").drawCircle(0,0,1,1);
stage.addChild(mc_circle);

Разрешить устанавливать размеры в пикселях без преобразования напрямую, используя scaleX и scaleY перед рендерингом:

mc_bg.scaleX = stage_width;
mc_bg.scaleY = stage_height;

mc_left.scaleX = stage_width/2;
mc_left.scaleY = stage_height;

mc_circle.x = stage_width/4;
mc_circle.y = stage_width/4;
mc_circle.scaleX = stage_width/4;
mc_circle.scaleY = stage_width/4;

stage.update();

См. пример скрипки с изменением размера в реальном времени при изменении размера окна: https://jsfiddle.net/jckleinbourg/go3fs1zt/

person jck    schedule 21.02.2016

arrow_upward
0
arrow_downward

Методы преобразования для изменения масштаба --> размеры и наоборот:

function dimToScale(origDim, desiredDim)
{
    return desiredDim / origDim;
}

function scaleToDim(origDim, scale)
{
    return scale * origDim;
}
person Ricebandit    schedule 28.02.2013