Question

我正在使用GWT进行可视化。对于这个应用程序，我希望当鼠标指针在感兴趣的窗口中时光标变为十字准线样式。我用以下方法完成了这个：

canvas.getElement().getStyle().setCursor(Cursor.CROSSHAIR);

这使光标成十字形但我希望十字架在垂直和水平方向上跨越整个窗口，这样用户就可以看到光标相对于轴的位置。我怎么能做到这一点？

提前感谢您的回复。

朗高。

Answer 1

您可以捕捉鼠标事件并绘制水平线和垂直线。在鼠标移动时重绘画布并将鼠标移出并在鼠标移动时在重绘画布上绘制h / v线。

    final int width = canvas.getOffsetWidth();
    final int height = canvas.getOffsetHeight();
    canvas.addMouseMoveHandler(new MouseMoveHandler() {
        @Override
        public void onMouseMove(MouseMoveEvent event) {
            Context2d context = canvas.getContext2d();

            context.setStrokeStyle("black");

            int x = event.getX();
            int y = event.getY();

            // vertical line
            context.beginPath();
            context.moveTo(x - 0.5, 0);
            context.lineTo(x - 0.5, height);
            context.closePath();

            // horizontal line
            context.beginPath();
            context.moveTo(0, y - 0.5);
            context.lineTo(width, y - 0.5);
            context.closePath();
        }
    });

    canvas.addMouseOutHandler(new MouseOutHandler() {
        @Override
        public void onMouseOut(MouseOutEvent event) {
            Context2d context = canvas.getContext2d();

            // clear lines or redraw the canvas

        }
    });

GWT：十字准线宽度

1 个答案: