How to mouse draw boxes in Vaadin?

I currently have an empty canvas implemented and an example event listener that will create a Div when the user clicks on the canvas. However, how should I go about transforming this code so that instead of just creating a new Div when clicked, the user can drag and draw boxes and when the mouse is released, the box is drawn onto the canvas.

This is my current code for MainLayout.java:

package com.vaadin.starter.beveragebuddy.backend;

import com.vaadin.flow.component.dependency.HtmlImport;

import com.vaadin.flow.component.html.Div;

import com.vaadin.flow.component.html.H2;

import com.vaadin.flow.component.html.NativeButton;

import com.vaadin.flow.router.Route;

import com.vaadin.starter.beveragebuddy.ui.components.Canvas;

import com.vaadin.starter.beveragebuddy.ui.components.CanvasRenderingContext2D;

@HtmlImport("frontend://styles/shared-styles.html")

@Route("")

//@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")

public class MainLayout extends Div {

private Canvas canvas;

public MainLayout(){

H2 title...

Read More »

By: StackOverFlow - Monday, 19 November

Related Posts