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 に答える