キャンバス内のオブジェクトの位置を探す

StackOverflow https://stackoverflow.com//questions/25033057

質問

ツールバーからキャンバスへの画像をドラッグアンドドロップする。ユーザは、ツールバーから同じ画像を複数回ドラッグアンドドロップすることができます。次のリンクに示すように、ダブルクリックで特定のオブジェクトを削除できます。

http://jsfiddle.net/gkefk/26/

ページロード時のこれらのオブジェクトの位置を録音し、キャンバスの中に移動した後もそれらを移動した後にも説明したい。これで、<ボタンをクリックしているすべてのオブジェクトの位置を表示するイベントリスナと関数を追加しています。 / P> 

myButton.addEventListener('click', position);
.

オブジェクトの位置を計算するために使用されるJS関数。

function Rectangle(props) {
    var posX = this.posX = props.x;
    var posY = this.posY = props.y;

    this.width = props.width;
    this.height = props.height;
    this.fill = props.fill;
    this.isDragging = props.isDragging;

    this.draw = function() {
        ctx.fillStyle = this.fill;
        ctx.fillRect(this.posX, this.posY, this.width, this.height);

    }
}
.

上記のJS機能を追加していても、ボタンをクリックしています。私が何が間違っているのかわからない... jQueryでこれをやることの簡単な方法はありますか？

上記のJS関数を含むリンク

> http://jsfiddle.net/gkefk/27/

役に立ちましたか？

解決

あなたがまとめたものをレビューするために数分かかります。

あなたの上のツールバーはドラッグ可能なDOM要素を保持します。

キネティックキャンバスでDraggable DOM要素がリリースされたら、ドロップされたDOM要素と同じ場所に新しいKinetic.Imageを作成しています。 DOM要素ではないため、このKinetic.ImageはjQueryによってアクセスできない - それはKinetic.Imageノードです。

したがって、jQueryではなくKineticJSを使用してその新しいKinetic.Imageにアクセスする必要があります。

あなたのドラッゴドロップでは、Kinetic.Image a nameプロパティを与えます。 KineticJS nameプロパティは、HTML / CSSのクラスのようなものです。これは、キャンバスに1つ以上の画像をドラッグすると、同じnameを持つ2つの画像があります。これはおそらくあなたが意図するものではありません。

また、各Kinetic.Imageを割り当てているnameは、Drop要素の "URL"データプロパティから取得する "house.png"です。これはおそらくあなたが意図するものではありません。

代わりに、新しいKinetic.Imagesのそれぞれを割り当てている場合は、idを使用して、指定されたstage.findを使用して特定のkinetic.imageを取得できます。 Kinetic idプロパティは、HTML / CSS idプロパティのようなものです。それからあなたは任意の任意のキネチカル。X、Y、幅、高さのようなX、Y、幅、高さを得ることができます：

var myDesiredKineticImage = stage.find("#"+myDesiredId);

var x=myDesiredKineticImage.x();
var y=myDesiredKineticImage.y();
var width=myDesiredKineticImage.width();
var height=myDesiredKineticImage.height());
.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top