Javascript 如何使用google closure使图形元素可拖动?
如何使google闭包图形元素可拖动并以其他方式响应事件 这是我到目前为止所拥有的。我有圆,但还不能拖动它:) 谢谢Javascript 如何使用google closure使图形元素可拖动?,javascript,graphics,google-closure,Javascript,Graphics,Google Closure,如何使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 canv
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'));
};
我不得不在自己的项目中使用拖拽器,但无法让goog.fx.dragger工作。然而,我实现了自己的draggable。它实际上要小得多,而且非常简单。以下是要点:
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),以便使代码更具可读性
希望这有帮助:)你有没有弄明白这一点?