問題描述
在 gwt 中使用 html5 畫布畫一個圓圈？ (draw a circle using html5 canvas in gwt?)
I want to draw a circle in GWT, with some mouse over and drag‑and‑drop support. Is it possible to do so in GWT? can you provide an example code?
‑‑‑‑‑
參考解法
方法 1:
Yes you can. The pseudo code will be something like this ‑
Canvas canvas = Canvas.createIfSupported();
Context2d context=canvas.getContext2d();
RootPanel.get(A_HOLDER_DIV_ID).add(canvas);
Add Handlers as follows ‑
1) Mouse down handler to get the start of the drag
canvas.addMouseDownHandler() ‑
//catch the start of the circle drag,
//clear the canvas
//Note the startx & starty
1) Mouse up handler to get the end the start of the drag
canvas.addMouseUpHandler() ‑
//catch the end of the circle drag,
//mark dragging as stopped
3) Mouse move handler to create the circle
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();
EDIT ‑ Take a look at this good example on how to get started with GWT HTML5 canvas
方法 2:
That is one approach. The other is to use a framework such as Lienzo which abstracts all that code. You get events, animations, and transformations out the box. Lienzo is a graphics toolkit in Java implemented using GWT, targeting HTML5's canvas. Lienzo is Apache 2, so it is free for all.
To do a circle using Lienzo, you would do something like:
Circle circle = new Circle(radius);
circle.setX(xCoord);
circle.setY(yCoord);
circle.setDraggable(true);
circle.addNodeMouseClickHandler(new NodeMouseClickHandler() {
@Override
public void onNodeMouseClick(NodeMouseClickEvent event) {
...
}
});
There are more events you can listen to, but that one is the most common.
Good luck!
(by Chan Le、Jai、David La Motta)