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

        });         

var stageWidth=800，
舞台高度=600，
单元大小=50，
w=16，
h=12，
n=w*h，
帆布，
阶段
背景；
$（文档）.ready（函数（）{
画布=$（“#容器”）[0]；
stage=newcreatejs.stage（画布）；
变量x_pos=0，
y_pos=0，
res=0，
网格；
对于（i=0；i0）{
如果（res==0）{
x_pos=0；
y_pos++；
}否则{
x_pos++；
}
}
grid_el=new createjs.Shape（）；
网格图形。设置行程方式（2，“正方形”）。开始行程（“000000”）；
网格图形。Beginll（“#70FF85”）；
网格图形矩形（x位置*单元格大小，y位置*单元格大小，单元格大小，单元格大小）；
网格x位置=x位置*单元大小；
网格元素y位置=y位置*单元大小；
grid_el.name=“quad”；
stage.addChild（网格元素）；
}
stage.update（）；
stage.onMouseDown=函数（e）{
控制台日志（e）；
var quad=这个.getObjectsUnderPoint（e.stageX，e.stageY）；
var clone=quad[0]。graphics.clone（）；
克隆。beginull（“#51D9FF”）；
quad[0]。graphics=new createjs.graphics（克隆）；
stage.update（）；
}
});         

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

---

谢谢您的帮助。

我建议您使用onMouseOver/onMouseOut回调正在创建的形状或显示对象。 当你可以更新你的颜色，这是

下面是一个简单的演示，可能有助于说明我的观点

var stage=newcreatejs.stage（“测试”）；
createjs.Touch.enable（stage）；
阶段.启用（10）；
var=1；
var宽度=55；
var高度=55；
var-cols=15；
对于（var i＝0；i可以考虑和KineticJS一起，你只需要做：

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

我相信KineticJS是唯一镜像DOM事件模型的画布框架（您可以将事件绑定到节点，它们可以冒泡，您可以利用事件委派，等等）
我问这个问题已经有一段时间了，同时我使用了一些变通代码来让它工作。无论如何，这似乎是一个更好的解决方案，所以我将尝试调整我的函数：）谢谢你的提示！是的，在我们开始这个项目一段时间后，我们发现Kinetic，也许它在某些方面更好，但实际上我们还处于开发阶段，无法切换画布引擎。无论如何，谢谢你的提示！
circle.on('click', function() {
  // do stuff
});