如何恰克形狀的顏色與easeljs

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

 
    } 
 
}

我想對小圓圈我在頁面上創建添加鼠標懸停聽者，我希望，一旦我把光標放在圓形，它變成一個矩形。然而，矩形總是出現在其他圓圈存在的地方，而不是我指向的圓圈。

來源

2017-06-12 Gannys

問題在於，您正在引用閉包中的可變變量。有幾種方法可以解決這個問題。

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

來源

2017-06-12 10:05:49 mmso

這是直到添加命令方法的正確方式（在此線程中回答）http://blog.createjs.com/new-command-approach-to-easeljs-graphics/ – Lanny

感謝您的第一個建議，我指的是這樣的圓：\t \t event.target.graphics.clear（）。beginFill（event.target.color）.drawCircle（0,0,15）.endFill（）; – Gannys

保存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，這裏是0123無可否認，這可以更好地記錄下來。 :)

來源

2017-06-12 22:54:23 Lanny

謝謝，我已經解決了這個問題。但是現在我在鼠標事件發生時更新更新文本時遇到問題。你知道該怎麼做嗎？這裏是這個問題的鏈接。 – Gannys

如何恰克形狀的顏色與easeljs

回答

相關問題