Easeljs：更改鼠标上的形状填充颜色答案

【问题标题】：EaselJS: change shape fill color on mouse clickEaseljs：更改鼠标上的形状填充颜色
【发布时间】：2012-10-01 22:18:45
【问题描述】：

我很难使用 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();
            }

        });

我尝试克隆实际元素的图形属性，更改填充颜色，然后更新舞台，但我只获得了一个白色元素，就像它没有识别新的图形属性一样。

感谢您的帮助。

【问题讨论】：

标签： canvas html5-canvas easeljs

【解决方案1】：

我建议在您正在创建的形状或显示对象上使用 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();   
}

希望这会有所帮助。

【讨论】：

好吧，自从我问这个问题以来已经有一段时间了，同时我使用了一些变通代码来让它工作。无论如何，这似乎是一个更好的解决方案，所以我会尝试调整我的功能:) 感谢您的提示！

【解决方案2】：

可能会考虑使用 KineticJS，你会这样做：

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

我相信 KineticJS 是唯一反映 DOM 事件模型的画布框架（您可以将事件绑定到节点，它们可以冒泡，您可以利用事件委托等）

【讨论】：

是的，我们在开始这个项目后不久发现了 Kinetic，也许它在某些方面更好，但实际上我们在开发阶段太远了，无法切换我们的 Canvas 引擎。无论如何感谢您的提示！