Question

我需要绘制一些表之间的关系，就像它在Wwwsqldesigner中一样。

但我之前想知道Qooxdoo的某些方面。

如果我将所有结构放入SVG，并使用带有内部文本的可拖动矩形来显示表关系，我可以定义“onDrag”函数来重绘SVG的部分路径吗？

或者我必须在父元素的鼠标上重写svg元素（就像它在freedraw中实现的那样）？如果是这样，我怎样才能找到被点击的光标下的元素？

Answer 1

SVG contrib负责qooxdoo事件和本机（DOM）事件之间的区别，所以你甚至可以“qooxdoo方式”，并在SVG元素上直接注册click处理程序：

var rect = new svg.shape.Rect;
rect.addListener("click", function(e) {
  alert("Clicked the rect");
}, this);

事件对象为您提供DOM元素，但不提供qooxdoo对象。但你可以通过使用qooxdoo的内部结构找出用户点击的qooxdoo对象：

rect.addListener("click", function(e) {
  var obj = qx.core.ObjectRegistry.fromHashCode(ev.getCurrentTarget().$$element);
  //obj === rect !!
}, this);

SVG元素类不支持拖动事件。但是您可以使用mousedown和mouseup事件自行拖动。在SVG contrib中，svg.behavior.Draggable中有一个基本实现，您可以这样使用：

//this is enough to make the rect draggable
var draggable = new svg.behavior.Draggable(rect);

目前，Draggable类还没有那么有用，并且没有很多功能，但您可以将它作为如何进行自己实现的示例。

顺便说一句，Draggable类将mousedown侦听器附加到SVG元素，将mousemove和mouseup侦听器附加到元素的父级（如freedraw演示）。这是因为如果您足够快地移动鼠标，则可以在拖动时将鼠标移出矩形。即使用户没有释放鼠标按钮，这也会导致拖动停止。

Answer 2

您可以将点击事件注册到DOM元素：

 var element = document.getElementById("table1");
 qx.event.Registration.addListener(element, "click", function(e) {
   alert("click");
 }, this);

Qooxdoo：SVG和元素动作问题

2 个答案: