3

完全な初心者の質問。私はGoogleを悪用してきましたが、何らかの理由で、驚くべきことにこれに関する何も見つけることができませんでした...? ここで何かが足りない気がします。:P

現在、キャンバスのサイズをウィンドウのサイズに変更する 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();}
4

3 に答える 3

3

シェイプの scaleX と scaleY を使用して、シェイプをスケーリングできます。

注: Shape オブジェクトは DisplayObject を拡張するため、DisplayObject のドキュメントでさらに多くの有用なプロパティ/メソッドを確認することもできます。

myShape.scaleX=1.2;
myShape.scaleY=1.2;
于 2013-02-19T02:02:06.583 に答える
2

@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/

于 2016-02-21T06:31:14.243 に答える
0

スケールを変更する変換方法 --> 寸法、およびその逆:

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

function scaleToDim(origDim, scale)
{
    return scale * origDim;
}
于 2013-02-28T19:06:07.310 に答える