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：改变鼠标点击时的形状填充颜色

回答

相关问题