Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

TUTORIALVaadin lets you build secure, UX-first PWAs entirely in Java.
Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
CssImport when using Component Exporter by Mikhail Shabarov, 1 month ago
Draw with gwt graphics
Hi,
I am a student, we are working on a Vaadin project and I need to draw freehand graphics with gwt but I do not really know how that works.
I try to do this but I'm not sure this is the right method.
My UI
public class MyUI extends UI {
private MyCanvas myCanvas;
@Override
protected void init(VaadinRequest vaadinRequest) {
myCanvas = new MyCanvas(400,400);
setContent(myCanvas);
}
@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
public static class MyUIServlet extends VaadinServlet {
}
}
My component
public class MyCanvas extends AbstractComponent{
public MyCanvas(int width, int height) {
getState().texte = "Change texte from Server";
}
@Override
public MyCanvasState getState() {
return (EditorCanvasState) super.getState();
}
}
State
public class MyCanvasState extends AbstractComponentState{
public String texte = "original texte";
}
My connector
@Connect(MyCanvas.class)
public class MyCanvasConnector extends AbstractComponentConnector{
//MyCanvasRpc rpc = RpcProxy.create(MyCanvasRpc.class, this);
public MyCanvasConnector(){
getWidget().addTexte(getState().texte);
getWidget().addCircle(200, 200, 30);
getWidget().addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
// TODO Auto-generated method stub
getWidget().addLine(0, 0, 400, 400);
}
});
}
@Override
protected Widget createWidget(){
return GWT.create(MyCanvasWidget.class);
}
@Override
public MyCanvasWidget getWidget(){
return (MyCanvasWidget) super.getWidget();
}
@Override
public MyCanvasState getState() {
return (MyCanvasState) super.getState();
}
@Override
public void onStateChanged(StateChangeEvent stateChangeEvent) {
super.onStateChanged(stateChangeEvent);
String t = getState().texte;
getWidget().addTexte(t);
}
}
My widget
public class MyCanvasWidget extends DrawingArea{
public static final String CLASSNAME = "mycanvaswidget";
public MyCanvasWidget() {
super(400, 400);
setStyleName(CLASSNAME);
}
public void addCircle(int x, int y, int ray){
this.add(new Circle(x, y, ray));
}
public void addTexte(String t){
Text chaine = new Text(50, 50, t);
this.add(chaine);
}
public void addLine(int x, int y, int xx, int yy){
this.add(new Line(x,y,xx,yy));
}
}
Do you have suggestions to improve my implementation?
Sorry, my English is not great.
Last updated on
I used a Composite with a VerticalPanel and put a Canvas in it. This is working fine for me.
public class MyCanvasWidget extends Composite implements MouseDownHandler
{
public static final String CLASSNAME = "MyCanvasWidget";
private Canvas canvas;
private Context2d context;
private VerticalPanel panel = new VerticalPanel();
public MyCanvasWidget() {
super();
canvas = Canvas.createIfSupported();
context = canvas.getContext2d();
panel.add(canvas);
initWidget(panel);
setStyleName(CLASSNAME);
canvas.setCoordinateSpaceWidth(600);
canvas.setCoordinateSpaceHeight(600);
canvas.addMouseDownHandler(this);
}
@Override
public void onMouseDown(MouseDownEvent event)
{
context.setFillStyle(CssColor.make(255, 0, 0));
context.beginPath();
context.arc(event.getX(), event.getY(), 20, 0, 2*Math.PI);
context.fill();
}
}
Last updated on
You cannot reply to this thread.