Question

我想在GWT中画一个圆圈，有一些鼠标悬停和拖放支持。是否有可能在GWT中这样做？你能提供一个示例代码吗？

Answer 1

是的，你可以。伪代码将是这样的 -

Canvas canvas = Canvas.createIfSupported();
Context2d context=canvas.getContext2d();
RootPanel.get(A_HOLDER_DIV_ID).add(canvas);

按如下方式添加处理程序 -

1）鼠标按下处理程序以获得拖动的开始

canvas.addMouseDownHandler() - 
//catch the start of the circle drag, 
//clear the canvas
//Note the startx & starty

1）鼠标向上处理程序以结束拖动的开始

canvas.addMouseUpHandler() - 
//catch the end of the circle drag, 
//mark dragging as stopped

3）鼠标移动处理程序以创建圆圈

canvas.addMouseMoveHandler() - 
//if drag started through event 1 then - 
//get x & y;
//calculate centre of circle and radius based on startx, starty and x & y above
//Clear the canvas
//And add the following code

context.setFillStyle(color);
context.beginPath();
context.arc(calculatedCenterx, calculatedCentery, radius, 0, Math.PI * 2.0, true);
context.closePath();
context.fill();

编辑 - 看看这个good example如何开始使用GWT HTML5 canvas

Answer 2

这是一种方法。另一种是使用Lienzo这样的框架来抽象所有代码。您可以从框中获得事件，动画和转换。 Lienzo是一个使用GWT实现的Java图形工具包，面向HTML5的画布。 Lienzo是Apache 2，所以对所有人都是免费的。

要使用Lienzo做一个圆圈，你会做类似的事情：

Circle circle = new Circle(radius);
circle.setX(xCoord);
circle.setY(yCoord);
circle.setDraggable(true);
circle.addNodeMouseClickHandler(new NodeMouseClickHandler() {
    @Override
    public void onNodeMouseClick(NodeMouseClickEvent event) {
        ...
    }
});

您可以收听更多活动，但这一活动最常见。

祝你好运！

在gwt中使用html5画布绘制一个圆圈？

2 个答案: