0

Wwwsqldesignerで作成されているように、いくつかのテーブル間の関係を描画する必要があります。

しかし、私は以前にQooxdooのいくつかの側面を知りたいです。

すべての構造をSVGに配置し、内部テキストを含むドラッグ可能な長方形を使用してテーブルの関係を表示する場合、「onDrag」関数を定義してSVGの一部をパスのように再描画できますか？

または、親要素のマウスでの反応でsvg要素を再描画する必要があります（freedrawで実現されるように）？もしそうなら、クリックされているカーソルの下の要素をどのように見つけることができますか？

4

2 に答える 2

1

SVG contrib は qooxdoo イベントとネイティブ (DOM) イベントの区別を処理するため、「qooxdoo の方法」で行うこともでき、クリック ハンドラを SVG 要素に直接登録することもできます。

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

event オブジェクトは 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 デモのように)。これは、マウスをすばやく動かすと、ドラッグ中にマウスを四角形の外に移動できるためです。これにより、ユーザーがマウス ボタンを離さなくても、ドラッグが停止します。

于 2011-09-08T22:40:13.270 に答える
0

クリック イベントを DOM 要素に登録できます。

 var element = document.getElementById("table1");
 qx.event.Registration.addListener(element, "click", function(e) {
   alert("click");
 }, this);
于 2011-09-07T16:21:12.007 に答える