GWT:十字光标宽度

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

        }
    });