我是 EaselJS 新手，几天来我一直无法在舞台上正确定位形状。直到今天我才发现，当我将 Canvas 宽度和高度分别设置为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 上的代码，您希望试管出现在 Canvas 中心附近，但它出现在右下角，因为使用的 Canvas 大小是 Canvas 大小设置的一半。
最佳答案
您的问题在于形状内的绘图坐标:
EaselJS 中的每个对象(位图、形状、影片剪辑等)都有自己的坐标空间。
这意味着:如果您将形状放置在:100|100 并在 this.x|this.y (100|100) 处绘制一个点，您的点将出现在阶段在200|200。
您应该做的是使用 0|0 作为基础，而不是 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...
琐事
这样做的好处是:如果删除 Shape 并将其添加到不同的容器中，它将自动相对于新容器的位置进行定位。 另外:您不必担心对象的绝对位置，这对于具有多个形状和容器的更复杂的构造非常方便。您只需要知道相对于父容器的位置。
关于javascript - easeljs 舞台宽度和高度是其指定值的一半，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20298361/