Qooxdoo：SVG 和元素动作问题

Question

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

但我之前想了解一下Qooxdoo的一些方面。

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

或者我必须通过父元素的鼠标反应重新绘制 svg 元素 （就像它在 freedraw 中实现的那样）？如果是这样，我如何找到光标下被单击的元素？

Answer 1

SVG contrib 负责区分 qooxdoo 事件和本机 (DOM) 事件，因此您甚至可以“以 qooxdoo 方式”执行此操作，并直接在 SVG 元素上注册单击处理程序：

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