如何使用 easeljs 更改形状的颜色

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, and here are the docs - 不可否认，这可以更好地记录下来。 :)

如何使用 easeljs 更改形状的颜色

How to chage the color of shapes with easeljs

javascript

html

events

createjs

easeljs