EaselJS: changement de forme de couleur de remplissage sur le clic de la souris

Je vais avoir un moment difficile de travailler avec EaselJS. Fondamentalement, je veux créer une grille simple et de mettre en évidence la réelle de l'élément sélectionné:

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

        });

J'ai essayé de cloner le réel de l'élément graphique de la propriété, la modification de la couleur de remplissage et de mise à jour de la scène, mais je seulement obtenir un élément blanc, tout comme il ne reconnaît pas la nouvelle interface de propriétés.

Merci pour toute aide.

OriginalL'auteur Ingro | 2012-10-11

  1. 8

    Ce que je recommande est d'utiliser le onMouseOver/onMouseOut appels dos sur la forme ou de l'objet d'affichage que vous êtes en train de créer.
    Lorsque vous pouvez mettre à jour vous de la couleur que l'a été.

    Ici est une simple démo qui pourrait aider à illustrer mon point.

    Lien vers la démo

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

    Espère que cette aide.

    Eh bien, il a été un moment depuis que j'ai posé cette question et, en attendant, j'ai utilisé un certain travail-autour-de-code pour le faire fonctionner. De toute façon, cela semble une meilleure solution, je vais donc essayer d'adapter ma fonction 🙂 Merci pour vos conseils!

    OriginalL'auteur sebastian.derossi

  2. 0

    Pourriez envisager d'aller avec KineticJS, vous faites juste:

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

    Je crois KineticJS est la seule toile cadre qui reflète le modèle d'événements DOM (vous pouvez lier les événements de nœuds, ils peuvent bulle, vous pouvez tirer parti de l'événement délégation, etc.)

    Oui, nous découvrons une Cinétique de temps après nous avons commencé ce projet, c'est peut-être mieux dans certains aspects, mais nous sommes bien trop loin dans la phase de développement de commutateur de notre moteur de Toile. Merci pour l'astuce en tout cas!

    OriginalL'auteur Eric Rowell