Как сделать графический элемент перетаскиваемым с помощью Google-Closure? - PullRequest
Новая
       15

Как сделать графический элемент перетаскиваемым с помощью Google-Closure?

2 голосов
/ 17 февраля 2010

Как сделать так, чтобы графические элементы закрытия Google перетаскивались и реагировать на события иначе?

Вот что у меня есть. У меня есть круг, но я пока не могу его перетащить:).

Спасибо. 

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

1 Ответ

1 голос
/ 01 марта 2011

Мне пришлось использовать драггер в моем собственном проекте, и я не смог заставить 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);

Конечно, вы также можете слушать любую отдельную форму (прямоугольник / эллипс или даже путь), слушая ее вместо самой группы. Я чувствую, что этот метод дает вам больше гибкости (подумайте об ограничении перемещения всей группы на холсте или некоторых пользовательских границах!) Я намеренно пропустил пятый аргумент (opt_handler) из goog.events.listen, чтобы сделать этот код более читабельным.

Надеюсь, это поможет:)

...