CreateJS / EaselJS

The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
http://createjs.com/
MIT License
8.14k stars 1.97k forks source link

Where is Method like flash.Display.Stage -> align = StageAlign.TopLeft; #784

Open ghost opened 8 years ago

ghost commented 8 years ago

Hello I have added suggestion but my code is not finish. I will add in Stage of createjs because I want use with Align of stage like flash player has same...

I found window.innerWidth and window.innerHeight like stage,stageWidth and stage. stageHeight;

/**
    StageAlign ( like Flash Player)
    StageAlign.js by SourceSkyBoxer
**/
this.createjs = this.createjs||{};

(function () {
    "use strict";
    function StageAlign() {
        this.Container_constructor();

    this = {
        TopLeft: function () {
            var div = document.getElementsByTagName("div");
            div.x = 0;
            div.y = 0;
            return div.toString();
        },

        Top: function () {
            var div = document.getElementsByTagName("div");
            div.x = window.innerWidth / 2;
            div.y = 0;
            return div.toString();
        },

        TopRight: function () {
            var div = document.getElementsByTagName("div");
            div.x = window.innerWidth;
            div.y = 0;
            return div.toString();
        },

        Left: function () {
            var div = document.getElementsByTagName("div");
            div.x = 0;
            div.y = window.innerHeight / 2;
            return div.toString();
        },

        Right: function () {
            var div = document.getElementsByTagName("div");
            div.x = window.innerWidth;
            div.y = window.innerHeight / 2;
            return div.toString();
        },

        BottomLeft: function () {
            var div = document.getElementsByTagName("div");
            div.x = 0;
            div.y = window.innerHeight;
            return div.toString();
        },

        Bottom: function () {
            var div = document.getElementsByTagName("div");
            div.x = window.innerWidth / 2;
            div.y = window.innerHeight;
            return div.toString();
        },

        BottomRight: function () {
            var div = document.getElementsByTagName("div");
            div.x = window.innerWidth;
            div.y = window.innerHeight;
            return div.toString();
        },

        Center: function () {
            var div = document.getElementsByTagName("div");
            div.x = window.innerWidth / 2;
            div.y = window.innerHeight / 2;
            return div.toString();
        }
    }
}

createjs.StageAlign = createjs.promote(StageAlign, "Container");

}());

This is small suggestion. But Center we need it. Because Adobe Flash Player won't use "Center" so sad.

I would like to suggest with CreateJS with "Center if your canvas has "no-scale" than shape or star doesn't resize like Flash Player's Display objects....

PS: Do not forget to add this.stageWidth = window.innerWidth; and this.stageHeight = window.innerHeight;

and

// stageWidth;
    p.stageWidtzh = function() {
        if(!this.canvas){
            return canvas.width = window.innerWidth;
        }
    }

    // stageHeight
    p.stageHeight = function() {
        if(!this.canvas){
            return canvas.height = window.innerHeight;
        }
    }

Wow it works fine. Ops.... if i create code:

var camvas = document.getElementByTagName("canvas");
var stage = new createjs.Stage("canvas");
canvas.width = stage.stageWidth;
canvas.height = stage.stageHeight;

It means works good.

But I want half of width and half of height

var camvas = document.getElementByTagName("canvas");
var stage = new createjs.Stage("canvas");
canvas.width = stage.stageWidth / 2;
canvas.height = stage.stageHeight / 2;

Than it sees double bigger than normal? Eh?

I try other possible

var camvas = document.getElementByTagName("canvas");
var stage = new createjs.Stage("canvas");
canvas.width = stage.stageWidth * 2;
canvas.height = stage.stageHeight * 2;

It sees double smaller than normal.

Wow I am getting so close with Stage coding like missed Flash Player into javascript....

lannymcnie commented 7 years ago

There is some support not in the HTML exported from AnimateCC for scaling and responsive behaviour that is similar to how Flash works with scale and align -- but this behaviour is not likely to be added to EaselJS anytime soon.

I am leaving this open for discussion for now.

ghost commented 7 years ago

Thanks for help sorry i am very busy