Question

我是HTML5和JavaScript的新手。我正在开发一个非常简单的“画布”项目，你有两个试管，点击一个可以降低它的水平并提高另一个的水平。

我已经编写了代码来完成这项工作，唯一的麻烦就是当我点击试管时 - 它在屏幕上对角移动，我不知道是什么导致了它。

如果您能够查看代码并告诉我问题出在哪里，那就太棒了：

TestTube.js

TestTube.prototype.render = function(){


    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 down to 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

chemical.addEventListener('click',function(e){
            e.target.level--;
            e.target.render();
            solution.level++;
            solution.render();
            stage.update();
        });

Answer 1

这是因为你首先转移到（x，y）：

this.graphics.moveTo(this.x,this.y);

然后再次将（x，y）添加到绘制调用中：

 this.graphics.lineTo(this.x,this.y+(this.height-this.width/2)); // etc

您只想添加（x，y）一次。

createjs：单击时形状会神秘地移动

1 个答案: