0

我正在为我的 Web 应用程序使用 GWT 和 GWT 查询插件。我有一个可拖动的图像和一个包裹在 Droppable 中的 GWT 画布。我的代码如下所示：

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 回答