Как изменить цвет фигуры с мольбертом

1

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);

  }
}

Я пытаюсь добавить слушателя мыши на маленькие круги, которые я создаю на странице, я надеюсь, что как только я поместил курсор в круг, он станет прямоугольником. Однако прямоугольник всегда появляется там, где существует какой-то другой круг, а не круг, на который я указываю.

Теги:
events
createjs
easeljs

2 ответа

0
Лучший ответ

Проблема в том, что вы ссылаетесь на изменяемую переменную внутри закрытия. Есть несколько способов решить это.

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);
        });
    }
}
  • 0
    Это был правильный путь, пока не был добавлен командный подход (отвечено в этой теме) blog.createjs.com/new-command-approach-to-easeljs-graphics
  • 0
    Спасибо за ваше первое предложение, я ссылаюсь на такой кружок: event.target.graphics.clear (). BeginFill (event.target.color) .drawCircle (0,0,15) .endFill ();
0

Сохраните команду 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";

Вот статья об этом, и вот документы. По общему признанию, это может быть документировано лучше. :)

  • 0
    спасибо, я решил эту проблему. Но теперь у меня возникают проблемы с обновлением текста обновления, когда происходят события мыши. Ты знаешь как это сделать? Вот ссылка на эту проблему.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню