0

Web アプリケーションに GWT と GWT Query プラグインを使用しています。ドラッグ可能な画像と Droppable でラップされた GWT Canvas があります。私のコードは次のようになります。

final Canvas canvas = Canvas.createIfSupported();
    canvas.setHeight("340px");
    DroppableWidget<Canvas> test = new DroppableWidget<Canvas>(canvas);

    test.addDropHandler(new DropEventHandler() {
        @Override
        public void onDrop(DropEvent event) {
            Context2d context = canvas.getContext2d();
            Image img = new Image("image");
            ImageElement i = ImageElement.as(img.getElement());
            //get x and y coordinates out of the drop event
            context.drawImage(i, x, y);
        }

    });

問題は...これらのx座標とy座標をドロップイベントから取得して、ドロップ場所のキャンバスに画像を描画できるようにするにはどうすればよいですか?

4

1 に答える 1

1

まず、DropEvent を介してイメージ要素を取得する必要があります

ImageElement i = ImageElement.as(event.getDraggable());

その後、ドラッグ可能オブジェクトがドロップされた場所 (ドロップ可能オブジェクトに関連) を知りたい場合は、次のように座標を計算できます。

Offest droppableOffset = $(event.getDroppable()).offset();
Offset draggableOffset = $(event.getDraggable()).offset();

int x = draggableOffset.left - droppableOffset.left;
int y = draggableOffset.top - droppableOffset.top;
于 2013-03-14T11:26:56.017 に答える