нарисовать круг, используя html5 canvas в gwt?

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 canvas

Answer 2

Это один подход. Другой заключается в использовании такой инфраструктуры, как Lienzo, которая абстрагирует весь этот код. Вы получаете события, анимацию и трансформации из коробки. Lienzo - это графический инструментарий на Java, реализованный с использованием GWT, предназначенный для холста 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) {
        ...
    }
});

Есть еще несколько событий, которые вы можете прослушать, но это самое распространенное.

Удачи!