createjs: фигура таинственным образом перемещается при нажатии

Я новичок в 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();
        });

person W.K.S    schedule 29.11.2013    source источник


Ответы (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) только один раз.

person Domi    schedule 29.11.2013
comment
Но здесь я просто добавляю значения; Я не присваиваю новое значение «this.y» или «this.y». - person W.K.S; 29.11.2013