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