javascript - Raphaeljs:event.targetを使用して要素参照を取得する方法は?

Question

現在、図形を描画するための小さなアプリケーションがあります。

これが私の問題を含む例です: http://jsfiddle.net/auyaC/

エラーが発生します：Uncaught TypeError: Object [object Object] has no method 'getBBox'

エラーの原因となった削除されたコードの下

ユーザーがシェイプをクリックすると、event.target をキャッチします

var onMouseDown = function(event) {
    setBBoxes($(event.target)); // Seems OK
};

BBoxes をもう一度戻したいのですが、私のシェイプは BBox を失いました..

var setBBoxes = function(shape) {
    shape.getBBox(); // Unable.. getBBox is part of Raphael shapes, but mine is not the real reference?
};

削除された例: http://jsfiddle.net/auyaC/2/

編集

Raphaelのマウスイベントを使用できないため、私の問題はjQueryとRaphaeljsを混同していました。

マウスイベントまたはタッチイベントを使用したオンラインの例はどれも機能していないようです。

これらの問題レポートを読みました

また、Windows は、255 のタッチポイントで利用できるタッチ入力があると考えています。

しかし、私はもうタッチスクリーンを持っていません (タッチスクリーンはありましたが、スクリーンを変更し、ドライバーを削除しました)。

プロパティ

だから私にとっては、http://jsfiddle.net/5BPXDでも私のコンピューターでは動作しません...

score 2 · Accepted Answer

通常、このように jQuery と Raphael を混在させたくはありません。使用しているライブラリのイベントハンドラーとメソッドについて混乱しやすいからです。また、Raphael が作成した DOM 要素を直接いじり始めると、古いブラウザーに対する Raphael のフォールバック機能も失われます。

この場合、.mousedown()リスナーを Raphael 要素に直接追加することをお勧めします。

var paper = new Raphael($(".testarea")[0], $(".testarea").width(), $(".testarea").height());
var circAttr = {
    "fill": "#4ba6e8",
    "stroke": "#1a81cc",
    "stroke-width": "2"
};

paper.circle(200, 200, 80).attr(circAttr).mousedown(function() {
    someFunction(this);
});


var someFunction = function(shape) {
    console.log(shape.getBBox());    
};

更新されたフィドル: http://jsfiddle.net/auyaC/3/

もちろん、セレクターですべてのシェイプを一度に選択して、一度にすべてのシェイプにイベントを追加することはできません。作成時に、それぞれに mousedown イベントを追加する必要があります。小さなトレードオフだと思います。

javascript - Raphaeljs:event.targetを使用して要素参照を取得する方法は?

編集

2 に答える 2

Related

Reference