如何通过google-closure使图形元素可拖动？

如何使google关闭图形元素可拖动并以其他方式响应事件？如何通过google-closure使图形元素可拖动？

这是我到目前为止。我有圈子，但不能拖动它:)。

谢谢。

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

来源

2010-02-17 Evgeny

你有没有想过这个？ – BCS 2011-02-09 01:01:33

我不得不在我自己的项目中使用拖动器，无法让goog.fx.Dragger工作。但是，我实现了我自己的可拖动。它实际上小得多，非常简单。这里有一个要点：

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

当然，你可以听上通过听它，而不是组本身的任何单个形状太（矩形/椭圆形或甚至是路径）。我觉得这种方法给了你更多的灵活性（想想限制整个组的移动到画布或一些自定义边界！）我特意从goog.events.listen省略了第五个参数（opt_handler），以便使这个代码更具可读性。

希望这会有所帮助:)

来源

2011-03-01 16:09:52

如何通过google-closure使图形元素可拖动？

回答

相关问题