easeljs 舞台宽度和高度为其指定值的一半答案

【问题标题】：easeljs Stage width and height are half their specified valueeaseljs 舞台宽度和高度为其指定值的一半
【发布时间】：2013-12-16 09:27:29
【问题描述】：

我是 EaselJS 的新手，几天来我一直无法在舞台上正确定位形状。直到今天我才发现，虽然我将画布的宽度和高度分别设置为 800px 和 450px，但easeljs 似乎假设宽度为 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 上的代码，您希望试管出现在画布中心附近，但它出现在右下角，因为使用的画布大小是画布大小设置的一半。

【问题讨论】：

您能否也发布实际绘制管内容的代码？从你的代码的其余部分来看，它看起来还不错，所以我目前的猜测是你没有绘制以 0 为中心的内容，而是以 x/y 为中心。如果可以的话，把它放到网上某个地方或 jsfiddle 上。
我已经发布了其余的绘图代码。你说的这个以 0 为中心的绘图是什么？

标签： javascript html5-canvas easeljs createjs

【解决方案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 并将其添加到不同的容器中，它将自动相对于新容器的位置进行定位。另外：您不必担心对象的绝对位置，这对于具有多个形状和容器的更复杂的构造非常方便。您只需要知道相对于父容器的位置。

【讨论】：

等等，所以你是说我应该用 0 替换渲染方法中 this.x 和 this.y 的每个实例？
是的，因为绘图方法已经以 this.x 和 this.y 为基础，再次放入 this.x 和 this.y 将使位置“加倍”，从而导致您的舞台规模只有 50% 的印象
我在渲染方法中进行了更改，因此，试管是在原点绘制的，而不是在我给出的坐标中。
现在您可以通过solution.x 和y 调整位置，然后拨打stage.update() - 如果这不是您想要的，那么我可能弄错了您的问题。如果你对你的问题做了一个 jsfiddle 可能是最好的:)