Comment faire glisser un élément graphique avec google-closure?

Question

Comment faire glisser les éléments graphiques de fermeture de Google et répondre aux événements autrement?

Voici ce que j'ai jusqu'ici. J'ai le cercle, mais je ne peux pas le faire glisser :).

Merci.

goog.require('goog.dom'); 
goog.require('goog.graphics'); 
goog.require('goog.events'); 
goog.require('goog.fx.Dragger'); 
goog.provide('graphics_test'); 

graphics_test = function(){ 
    var canvas = goog.dom.createDom('div', {'id':'canvas'}); 
    goog.dom.appendChild(document.body, canvas); 
    var g = goog.graphics.createGraphics(600,400); 
    var fill = new goog.graphics.SolidFill('yellow'); 
    var stroke = new goog.graphics.Stroke(1,'black'); 
    circle = g.drawCircle(300, 200, 50, stroke, fill); 
    var dragger = new goog.fx.Dragger(circle,circle); 
    g.render(goog.dom.$('canvas')); 
}; 

Answer 1

Je devais utiliser un dragger dans mon propre projet et ne pouvais pas obtenir goog.fx.Dragger pour fonctionner. Cependant, j'ai mis en place mon propre draggable. C'est en fait beaucoup plus petit et assez simple. Voici un point essentiel:

var graphic = new goog.graphics.ext.Graphics(1000, 500); 
    var group = new goog.graphics.ext.Group(graphic); 
    group.setLeft(20, true); 
    group.setTop(20, true); 
    group.setWidth(600, true); 
    group.setHeight(200);  

    var fill = new goog.graphics.SolidFill('yellow'); 
    var stroke = new goog.graphics.Stroke(2, 'green'); 

    var bg = new goog.graphics.SolidFill('#eeeeee'); 
    var outline = new goog.graphics.Stroke(1, '#333333'); 

    var path = new goog.graphics.ext.Path().moveTo(0, 0).lineTo(20, 0). 
     lineTo(10, 20).close(); 

    var shape = new goog.graphics.ext.Shape(group, path); 
    shape.setLeft(10, true); 
    shape.setTop(10, true); 
    shape.setWidth('10%', true); 
    shape.setHeight('10%'); 
    shape.setStroke(stroke); 
    shape.setFill(fill); 

    var ellipse = new goog.graphics.ext.Ellipse(group); 
    ellipse.setCenter(0, true); 
    ellipse.setMiddle(0, true);  
    ellipse.setWidth(120, true); 
    ellipse.setHeight(60); 
    ellipse.setStroke(stroke); 
    ellipse.setFill(fill); 


    goog.events.listen(group.getWrapper(), 'mousedown', function(e) { 
     group.startOffsetX = e.offsetX; 
     group.startOffsetY = e.offsetY; 
     group.dragging = true; 
    }); 
    goog.events.listen(group.getWrapper(), 'mouseup', function(e) { 
     group.dragging = false; 
    }); 
    goog.events.listen(group.getWrapper(), 'mousemove', function(e) { 
     if(group.dragging) { 
      group.setPosition(group.getLeft() + (e.offsetX-group.startOffsetX), 
           group.getTop() + (e.offsetY-group.startOffsetY)); 
      group.startOffsetX = e.offsetX; 
      group.startOffsetY = e.offsetY; 
     }; 
    }); 
    goog.events.listen(group.getWrapper(), 'mouseout', function(e) { 
     group.dragging = false; 
    }); 
    graphic.render(document.body); 

Vous pouvez bien sûr écouter sur une seule forme aussi (rectangle/ellipse ou même un chemin) en l'écoutant au lieu du groupe lui-même. Je pense que cette méthode vous donne plus de flexibilité (pensez à restreindre le mouvement de tout le groupe sur la toile ou certaines limites personnalisées!) J'ai volontairement omis le cinquième argument (opt_handler) de goog.events.listen afin de rendre ce code plus lisible .

Espérons que cela aide :)