在gwt中使用html5畫布繪製圓圈？

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(); 

編輯 - 就以如何開始使用GWT HTML5畫布

Answer 2

這就是一種方法啓動一起來看看這款good example。另一種是使用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) { 
     ... 
    } 
}); 

有可以聽更多的事件，但一個是最常見的。

祝你好運！