Question

我是EaselJS的新手，我几乎无法在舞台上正确定位形状数天。直到今天我才发现，当我将画布宽度和高度分别设置为800px和450px时，画架似乎假设宽度为400px，高度为225px（设置值的一半）。

我很确定我一定做错了，所以有人可以看看这段代码，看看是什么导致了这个问题：

的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();

}

截图基于index.js上的代码，您希望测试管出现在画布的中心附近，但它出现在右下角，因为使用的画布大小是画布大小设置的一半。 enter image description here

Answer 1

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

<强>琐事

这样做的好处是：如果您移除Shape并将其添加到另一个容器，它将相对于新容器的位置自动定位。另外：您不必担心对象的绝对位置，这对于具有多个形状和容器的更复杂的构造非常方便。您只需要知道相对于父容器的位置。

easeljs舞台宽度和高度是其指定值的一半

1 个答案: