EaselJS：改變鼠標點擊時的形狀填充顏色

我很難與EaselJS一起工作。基本上我想創建一個簡單的網格，並強調選擇的實際元素：EaselJS：改變鼠標點擊時的形狀填充顏色

var stageWidth = 800, 
    stageHeight = 600, 
    cell_size = 50, 
    w = 16, 
    h = 12, 
    n = w * h, 
    canvas, 
    stage, 
    background; 

$(document).ready(function(){ 

      canvas = $("#container")[0];  
      stage = new createjs.Stage(canvas); 

      var x_pos = 0, 
       y_pos = 0, 
       res = 0, 
       grid_el; 

      for(i=0;i<n;i++){ 

       res = i%w; 

       if(i>0){ 
        if(res===0){ 
         x_pos = 0; 
         y_pos++; 
        } else { 
         x_pos++; 
        } 
       } 

       grid_el = new createjs.Shape(); 
       grid_el.graphics.setStrokeStyle(2,"square").beginStroke("#000000"); 
       grid_el.graphics.beginFill("#70FF85"); 
       grid_el.graphics.rect(x_pos * cell_size,y_pos * cell_size,cell_size,cell_size); 
       grid_el.x_pos = x_pos * cell_size; 
       grid_el.y_pos = y_pos * cell_size; 
       grid_el.name = "quad"; 

       stage.addChild(grid_el); 
      } 

      stage.update(); 

      stage.onMouseDown = function(e){ 
       console.log(e); 
       var quad = this.getObjectsUnderPoint(e.stageX,e.stageY); 

       var clone = quad[0].graphics.clone(); 
       clone.beginFill("#51D9FF"); 

       quad[0].graphics = new createjs.Graphics(clone); 

       stage.update(); 
      } 

     });

我試圖克隆實際元素的圖形性能，改變填充顏色，然後更新的階段，但我只得到一個白色的元素，只是像它不認識新的圖形屬性。

感謝您的任何幫助。

來源

2012-10-11 Ingro

我會推薦使用onMouseOver/onMouseOut調用您正在創建的形狀或顯示對象的背部。當你可以更新你的顏色。

這是一個簡單的演示，可能有助於說明我的觀點。

Link to demo

var stage = new createjs.Stage("test"); 
createjs.Touch.enable(stage); 
stage.enableMouseOver(10); 
var padding = 1; 
var width = 55; 
var height = 55; 
var cols = 15; 
for(var i=0;i<200;i++) { 
    var s = new createjs.Shape(); 
    s.overColor = "#3281FF" 
    s.outColor = "#FF0000" 
    s.graphics.beginFill(s.outColor).drawRect(0, 0, width, height).endFill(); 
    s.x = (width + padding) * (i%cols); 
    s.y = (height + padding) * (i/cols|0); 
    s.onMouseOver = handleMouseOver; 
    s.onMouseOut = handleMouseOut; 
    stage.addChild(s) 
} 

createjs.Ticker.addListener(stage); 

function handleMouseOver(event) { 
    var target = event.target; 
    target.graphics.clear().beginFill(target.overColor).drawRect(0, 0, width, height).endFill(); 
} 

function handleMouseOut(event) { 
    var target = event.target; 
    target.graphics.clear().beginFill(target.outColor).drawRect(0, 0, width, height).endFill(); 
} 

function tick() { 
    stage.update(); 
}

希望這有助於。

來源

2013-01-18 19:30:14

嗯，這是一段時間，因爲我問這個問題，同時我使用了一些工作周圍的代碼來讓它工作。無論如何，這似乎是一個更好的解決方案，所以我會盡量調整我的功能:)感謝您的提示！ – Ingro

，可考慮將KineticJS去，你只是做：

circle.on('click', function() { 
    // do stuff 
});

我相信KineticJS是唯一的帆布框架，反映了DOM事件模型（你可以綁定事件節點，它們可以泡，你可以槓桿事件代表團等）

來源

2013-04-15 00:00:16

是的，我們在開始這個項目之後發現了Kinetic，可能它在某些方面更好，但是我們實際上在開發階段切換Canvas引擎太遠了。無論如何感謝提示！ – Ingro

EaselJS：改變鼠標點擊時的形狀填充顏色

回答

相關問題