2

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

        });

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

谢谢你的帮助。

4

2 回答 2

8

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

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

演示链接

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-18T19:30:14.870 回答
0

可能会考虑使用 KineticJS，您只需这样做：

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

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

于 2013-04-15T00:00:16.887 回答