easeljs Stage width and height are half their specified value

StackOverflow https://stackoverflow.com/questions/20298361

题

I'm new to EaselJS and I've been having trouble positioning shapes correctly on the stage for days now. It's only today that I discovered that, while I set the canvas width and height to 800px and 450px respectively, easeljs seems to assume that the width is 400px and the height 225px (half of the set values).

I'm pretty sure I must be doing something wrong so could someone please look at this code and see what's causing the issue:

index.html

<!doctype html>
<html>
    <head>
        <title>Ludacris Labs</title>
        <meta charset='utf-8'></meta>
        <link rel='stylesheet' type='text/css' href='css/index.css'/>
        <script type='text/javascript' src='//code.jquery.com/jquery-1.10.2.min.js'></script>
        <script type='text/javascript' src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
        <script type='text/javascript' src='js/TestTube.js'></script>
        <script type='text/javascript' src='js/index.js'></script>
    </head>
    <body>
        <canvas id='canvas' width='800' height='450'>
            This application will not run on your browser because your browser is out of date.
        </canvas>
    </body>
</html>

index.css

#canvas{
    border: 1px solid #cccccc;
}

index.js

function init()
{
    var stage = new createjs.Stage("canvas");
    var dimensions = {
        width: $('#canvas').width(),//800
        height: $('#canvas').height()//450
    };

    var solution = new TestTube('water','blue');
    stage.addChild(solution);
    solution.x = dimensions.width/2-100;//300
    solution.y = 0.44*dimensions.height/2;//99
    solution.width = 50;
    solution.height = 0.55*dimensions.height;//247.5
    solution.level = 90;
    solution.render();

    stage.update();
}

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

TestTube.render

    TestTube.prototype.render = function(){

        console.log(this.name,this.x,this.y,this.level);

        this.graphics.clear();

        this.graphics.setStrokeStyle(2,1,1);
        //set stroke color black.
        this.graphics.beginStroke("#000000");
        //set fill color 
        this.graphics.beginFill(this.color);
       //START DRAWING------------------------------------

    //move to origin.
    this.graphics.moveTo(this.x,this.y);

    //draw line uptil point of liquid in test tube [liquid start point]
    _level = (100 - this.level)/100;
    this.graphics.lineTo(this.x,this.y+_level*this.height);

    //draw line uptil bottom of test tube.
    this.graphics.lineTo(this.x,this.y+(this.height-this.width/2));

    //draw the round part of test tube.
    //graphics.arc(centerX,centerY,radius,startAngle,endAngle,anticlockwise);
    this.graphics.arc(this.x + this.width/2,this.y+(this.height-this.width/2),this.width/2,Math.PI,0,true);

    //go back to upto level of liquid in tube [liquid end point]
    this.graphics.lineTo(this.x+this.width,this.y+_level*this.height);

    //connect liquid start point with liquid end point to fill in liquid colour.
    this.graphics.lineTo(this.x,this.y+_level*this.height);
    this.graphics.endFill();

    //go back to liquid end point
    this.graphics.moveTo(this.x+this.width,this.y+_level*this.height);

    //draw the rest of the test tube.
    this.graphics.lineTo(this.x+this.width,this.y);

    //stop drawing.
    this.graphics.endStroke();

}

Screenshot Based on the code on index.js, you'd expect the test tube to appear near the centre of the canvas, but it appears on the bottom-right because the canvas size used is half of the canvas size set. enter image description here

有帮助吗？

解决方案

Your issue is with the drawing-coordinates inside your shape: Each object (Bitmap, Shape, MovieClip, ect.) in EaselJS has its' own coordinate-space. That means: If you place the shape at: 100|100 AND draw a dot at this.x|this.y (100|100) your dot will appear on the stage at 200|200. What you should do instead is to use 0|0 as your base and not this.x|this.y.

//move to origin.
this.graphics.moveTo(0,0);

//draw line uptil point of liquid in test tube [liquid start point]
_level = (100 - this.level)/100;
this.graphics.lineTo(0,0+_level*this.height);

//...and so on...

Trivia

The benefits of that are: If you remove the Shape and add it to a different container, it will be automatically positioned relative to that new containers' position. Also: You do not have to worry about the absolut position of an object, this comes in very handy with more complex constructs with multiple shapes and containers. You only need to know the position relative to the parent-container.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top