canvas - 如何使用easel.js从第一次鼠标点击到第二次绘制一条线

Question

我试图创建绘制到stage.mouseY stage.MouseX坐标的事件侦听器，但无论我在哪里点击，这条线在中间都是完全相同的。

这是我的代码

   Ext.onReady( function(){
  var g;




  canvas = document.getElementById('Canvas');
  var stage = new createjs.Stage(canvas);

function draw(a){
var mousex = stage.mouseX;
var mousey = stage.mouseY;
a.lineTo(mousex, mousey);
}

g = new createjs.Graphics();

g.setStrokeStyle(1);
g.beginStroke(createjs.Graphics.getRGB(0,0,0));
g.beginFill(createjs.Graphics.getRGB(255,0,0));
stage.addEventListener('click', draw(g));
g.lineTo(0,50);

var s = new createjs.Shape(g);
    s.x = 100;
    s.y = 100;

stage.addChild(s);
stage.update();


});

我的长期目标是创建用户创建的可选择/可突出显示的多边形，这是一种方法吗？

Answer 1

这是您的问题所在：

stage.addEventListener('click', draw(g));

它将立即执行draw带有参数的函数g。它不会等待点击。问题是函数名后面有括号，函数将立即执行。您需要的是对绘图函数有一个函数引用。您可以通过使用匿名函数来获得它

stage.addEventListener('click', function() {draw(g); });