Question

我正在尝试根据鼠标位置在特定点绘制一个字符串（仅在我拖动时）。

问题是，它似乎缩放了x和y。当我用鼠标在0,0时，字符串显示在正确的位置，但是当我离开时，字符串越来越远离我的鼠标，这让我觉得有一个隐藏的缩放事物正在进行...

我正在使用event.getX（）和画布的位置，我是否应该使用其他组合来获得正确的鼠标位置？

下面是代码

        final Canvas canvas = Canvas.createIfSupported();
        final AsyncBool mouseDown = new AsyncBool(false);

        final Context2d context = canvas.getContext2d();
        context.setFont("bold 8px sans-serif"); 

        canvas.setWidth("100%");
        canvas.setHeight("100%");

        canvas.addMouseMoveHandler(new MouseMoveHandler() {
            @Override
            public void onMouseMove(MouseMoveEvent event)
            {
                if(mouseDown.getBool())
                {

                    context.fillText("Bored.", event.getX() - canvas.getAbsoluteLeft(), event.getY() - canvas.getAbsoluteTop());
                }

            }
        });
        canvas.addMouseDownHandler(new MouseDownHandler() {
            @Override
            public void onMouseDown(MouseDownEvent event)
            {
                mouseDown.setBool(true);
            }
        });
        canvas.addMouseUpHandler(new MouseUpHandler() {
            @Override
            public void onMouseUp(MouseUpEvent event)
            {
                mouseDown.setBool(false);
            }
        });



        RootPanel.get().add(canvas);

Answer 1

您的代码应该适用于未调整大小的画布。但是，如果调整画布大小，则还需要相应地更新画布坐标空间。例如，对于500px，500px大小的画布，您可以通过以下方式实现此目的：

canvas.setSize("500px","500px");
canvas.setCoordinateSpaceHeight(500);
canvas.setCoordinateSpaceWidth(500);

在您的情况下，您使用百分比值调整画布大小，您可以使用：

canvas.setSize("100%","100%");
canvas.setCoordinateSpaceHeight(Window.getClientHeight()); 
canvas.setCoordinateSpaceWidth(Window.getClientWidth());

由于这些方法不接受百分比值，因此您需要计算父容器的宽度和高度（以像素为单位）。

GWT鼠标移动

1 个答案: