Javascript easeljs舞台宽度和高度为其指定值的一半
我是刚接触EaselJS的，几天来我一直在舞台上正确定位形状。直到今天，我才发现，当我将画布宽度和高度分别设置为800px和450px时，easeljs似乎假设宽度为400px，高度为225px（设置值的一半） 我很确定我一定是做错了什么，所以请有人看看这段代码，看看是什么导致了这个问题： index.htmlJavascript easeljs舞台宽度和高度为其指定值的一半,javascript,html5-canvas,easeljs,createjs,Javascript,Html5 Canvas,Easeljs,Createjs,我是刚接触EaselJS的，几天来我一直在舞台上正确定位形状。直到今天，我才发现，当我将画布宽度和高度分别设置为800px和450px时，easeljs似乎假设宽度为400px，高度为225px（设置值的一半） 我很确定我一定是做错了什么，所以请有人看看这段代码，看看是什么导致了这个问题： index.html <!doctype html> <html> <head> <title>Ludacris Labs</ti
<!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>
#canvas{
border: 1px solid #cccccc;
}
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.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();
}
您的问题在于图形内部的图形坐标： EaselJS中的每个对象（位图、形状、MovieClip等）都有自己的坐标空间。 这意味着：如果您将形状放置在：
100 | 100this.x | this.y（100 | 100）200 | 2000 | 0this.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...
琐事 这样做的好处是：如果删除形状并将其添加到其他容器中，它将自动相对于新容器的位置进行定位。
另外：您不必担心对象的绝对位置，这对于具有多个形状和容器的更复杂构造非常方便。您只需要知道相对于父容器的位置。您还可以发布代码，说明实际绘制管内容物的位置吗？从代码的其余部分来看，它看起来不错，因此我目前的猜测是，您没有以0为中心绘制内容，而是以x/y为中心绘制内容。如果可以的话，把它放到网上的某个地方或者JSFIDLE上。我已经发布了其余的绘图代码。你说的以0为中心的绘图是什么？等等，你是说我应该用0替换渲染方法中
this.xthis.ysolution.xystage.update（）