Question

function initCircles() {
  circles = [];
  for (var i = 0; i < 100; i++) {
    var circle = new createjs.Shape();
    var r = 7;
    var x = window.innerWidth * Math.random();
    var y = window.innerHeight * Math.random();
    var color = colors[Math.floor(i % colors.length)];
    var alpha = 0.2 + Math.random() * 0.5;
    circle.alpha = alpha;
    circle.radius = r;
    circle.graphics.beginFill(color).drawCircle(0, 0, r);
    circle.x = x;
    circle.y = y;
    circles.push(circle);
    circle.movement = 'float';

    circle.addEventListener("mouseover", function(event) {
      circle.graphics.clear().beginFill("red").drawRect(0, 0, 50, 60).endFill();
      stage.update(event);
    });

    stage.addChild(circle);

  }
}

我正在尝试在我在页面上创建的小圆圈上添加鼠标悬停监听器，我希望一旦我将光标放在圆圈上，它就会变成一个矩形。但是，矩形总是出现在存在其他圆的位置，而不是我指向的圆。

Answer 1

问题是你在闭包内引用了一个 mutable 变量。有几种方法可以解决这个问题。

1）以某种方式从嵌套函数内部的事件变量引用圆圈（如果事件支持那个），或者

2）将变量的值绑定在另一个函数中，例如：

function initCircles() {
    circles = [];
    for (var i = 0; i < 100; i++) {
        var circle = new createjs.Shape();
        var r = 7;
        var x = window.innerWidth * Math.random();
        var y = window.innerHeight * Math.random();
        var color = colors[Math.floor(i % colors.length)];
        var alpha = 0.2 + Math.random() * 0.5;
        circle.alpha = alpha;
        circle.radius = r;
        circle.graphics.beginFill(color).drawCircle(0, 0, r);
        circle.x = x;
        circle.y = y;
        circles.push(circle);
        circle.movement = 'float';

        addEventListener(circle);

        stage.addChild(circle);
    }
    function addEventListener(circle) {
        circle.addEventListener("mouseover", function(event) {
            circle.graphics.clear().beginFill("red").drawRect(0, 0, 50, 60).endFill();
            stage.update(event);
        });
    }
}

Answer 2

保存您的beginFill命令，稍后再更改：

// your other code above
var fillCmd = circle.graphics.beginFill(color).command; // Note the .command at the end
circle.graphics.drawCircle(0, 0, r);
// your other code below

// Later
fillCmd.style = "ff0000";

以下是an article about it，此处为the docs - 不可否认，这可以更好地记录下来。：）

如何使用easeljs来塑造形状的颜色

2 个答案: