Skip to content

Instantly share code, notes, and snippets.

@hezamu
Last active December 22, 2016 11:50
Show Gist options
  • Save hezamu/4659293 to your computer and use it in GitHub Desktop.
Save hezamu/4659293 to your computer and use it in GitHub Desktop.
Demonstrate how to use the various features with the Vaadin 7 version of the Canvas add-on.
import org.vaadin.hezamu.canvas.Canvas;
import org.vaadin.hezamu.canvas.Canvas.CanvasImageLoadListener;
import com.vaadin.server.VaadinRequest;
import com.vaadin.shared.MouseEventDetails;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
@SuppressWarnings("serial")
public class CanvastestUI extends UI {
private Canvas canvas;
private final String[] compositeOps = { "source-over", "source-atop",
"source-in", "source-out", "destination-atop", "destination-in",
"destination-out", "destination-over", "lighter", "darker", "xor",
"copy" };
private int currentOpId = -1;
private Label compositionName;
@Override
protected void init(VaadinRequest request) {
VerticalLayout content = new VerticalLayout();
setContent(content);
content.addComponent(canvas = new Canvas());
canvas.setWidth("300px");
canvas.setHeight("300px");
canvas.addListener(new Canvas.CanvasClickListener() {
@Override
public void clicked(MouseEventDetails med) {
System.out.println("Mouse down at " + med.getRelativeX() + ","
+ med.getRelativeY());
}
});
drawInitialPattern();
final HorizontalLayout bs = new HorizontalLayout();
content.addComponent(bs);
content.addComponent(compositionName = new Label());
content.setComponentAlignment(compositionName, Alignment.TOP_LEFT);
bs.addComponent(new Button("Rectangles", new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
drawRects();
}
}));
bs.addComponent(new Button("Text", new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
drawText();
}
}));
bs.addComponent(new Button("Lines", new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
drawLines();
}
}));
bs.addComponent(new Button("Gradients", new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
drawGradients();
}
}));
bs.addComponent(new Button("Composition", new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
drawCompositions();
}
}));
canvas.loadImages(new String[] {
"http://webapp.org.ua/wp-content/uploads/2011/10/gwtlogo.jpg",
"http://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Logo.svg",
"http://jole.virtuallypreinstalled.com/paymate/img/vaadin-logo.png" });
canvas.addListener(new CanvasImageLoadListener() {
public void imagesLoaded() {
bs.addComponent(new Button("Images",
new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
drawImages();
}
}));
}
});
}
private void drawInitialPattern() {
canvas.saveContext();
canvas.translate(175d, 175d);
canvas.scale(1.6d, 1.6d);
for (int i = 1; i < 6; ++i) {
canvas.saveContext();
canvas.setFillStyle("rgb(" + (51 * i) + "," + (255 - 51 * i)
+ ",255)");
for (int j = 0; j < i * 6; ++j) {
canvas.rotate((Math.PI * 2d / (i * 6)));
canvas.beginPath();
canvas.arc(0d, i * 12.5d, 5d, 0d, Math.PI * 2d, true);
canvas.closePath();
canvas.fill();
}
canvas.restoreContext();
}
canvas.closePath();
canvas.restoreContext();
}
private void drawRects() {
canvas.saveContext();
canvas.clear();
canvas.moveTo(0, 0);
canvas.fillRect(10, 20, 50, 70);
canvas.setStrokeStyle("rgb(25, 250, 150)");
canvas.strokeRect(100, 10, 50, 50);
canvas.beginPath();
canvas.setStrokeStyle("rgb(255, 50, 150)");
canvas.rect(100, 150, 50, 50);
canvas.stroke();
canvas.setStrokeStyle("rgb(125, 150, 255)");
canvas.setGlobalAlpha(0.5);
canvas.fillRect(30, 30, 100, 150);
canvas.setGlobalAlpha(0.9);
canvas.setFillStyle("blue");
canvas.fillRect(280, 50, 75, 50);
canvas.setFillStyle("yellow");
canvas.fillRect(200, 200, 50, 50);
canvas.transform(1, 0.5, -0.5, 1, 10, 10);
canvas.setFillStyle("red");
canvas.fillRect(200, 200, 50, 50);
canvas.transform(1, 0.5, -0.5, 1, 10, 10);
canvas.setFillStyle("blue");
canvas.fillRect(200, 200, 50, 50);
canvas.restoreContext();
}
private void drawText() {
canvas.saveContext();
canvas.clear();
canvas.moveTo(0, 0);
canvas.setFont("italic bold 25px sans-serif");
canvas.setTextBaseline("top");
canvas.fillText("Text with TOP baseline", 10d, 200d, 0d);
canvas.setTextBaseline("bottom");
canvas.setFillStyle("rgb(0, 200, 0)");
canvas.fillText("Text with BOTTOM baseline", 10d, 200d, 0d);
canvas.restoreContext();
}
private void drawImages() {
canvas.saveContext();
canvas.clear();
canvas.moveTo(0, 0);
canvas.drawImage1(
"http://webapp.org.ua/wp-content/uploads/2011/10/gwtlogo.jpg",
0, 0);
canvas.drawImage2(
"http://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Logo.svg",
50, 50, 200, 200);
canvas.drawImage3(
"http://jole.virtuallypreinstalled.com/paymate/img/vaadin-logo.png",
20, 20, 100, 100, 100, 100, 50, 100);
canvas.restoreContext();
}
private void drawLines() {
canvas.saveContext();
canvas.clear();
canvas.beginPath();
canvas.setLineWidth(10);
canvas.setLineCap("round");
canvas.setMiterLimit(1);
canvas.moveTo(10, 50);
canvas.lineTo(30, 150);
canvas.lineTo(50, 50);
canvas.stroke();
canvas.closePath();
canvas.beginPath();
canvas.setLineWidth(5);
canvas.setLineCap("butt");
canvas.setLineJoin("round");
canvas.setMiterLimit(1);
canvas.moveTo(70, 50);
canvas.lineTo(90, 150);
canvas.lineTo(110, 50);
canvas.stroke();
canvas.closePath();
canvas.beginPath();
canvas.moveTo(20, 200);
canvas.quadraticCurveTo(20, 275, 200, 200);
canvas.stroke();
canvas.restoreContext();
}
private void drawGradients() {
canvas.saveContext();
canvas.clear();
canvas.createLinearGradient("g1", 0, 0, 170, 0);
canvas.addColorStop("g1", 0, "black");
canvas.addColorStop("g1", 1, "white");
canvas.setGradientFillStyle("g1");
canvas.fillRect(10, 10, 100, 50);
canvas.createRadialGradient("g2", 75, 50, 5, 90, 60, 100);
canvas.addColorStop("g2", 0, "red");
canvas.addColorStop("g2", 1, "white");
// Fill with gradient
canvas.setGradientFillStyle("g2");
canvas.fillRect(10, 100, 100, 50);
canvas.createRadialGradient("g3", 115, 50, 5, 190, 60, 100);
canvas.addColorStop("g3", 0, "green");
canvas.addColorStop("g3", 1, "blue");
canvas.beginPath();
canvas.setGradientStrokeStyle("g3");
canvas.setLineWidth(20);
canvas.moveTo(170, 50);
canvas.lineTo(190, 150);
canvas.lineTo(210, 50);
canvas.stroke();
canvas.closePath();
canvas.restoreContext();
}
private void drawCompositions() {
if (++currentOpId == compositeOps.length)
currentOpId = 0;
canvas.saveContext();
canvas.clear();
compositionName.setValue(compositeOps[currentOpId]);
// Draw destination shape
canvas.setFillStyle("red");
canvas.fillRect(10, 10, 100, 100);
canvas.setGlobalCompositeOperation(compositeOps[currentOpId]);
// Draw source shape
canvas.setFillStyle("blue");
canvas.fillRect(60, 60, 100, 100);
canvas.restoreContext();
}
}
@OpenESignForms
Copy link

Very cool. Will this allow me to remember each of the objects I draw (it's position and size)? It looks like it's just for drawing pixels on a flat canvas as that the underlying objects drawn are not remembered.

Can the canvas be set to contain an image (background image?) that I can then use this to draw on top of that image (without updating the image, of course)?

@gbardwell
Copy link

Very useful. I have been experimenting with this... cool.
Question?
I want to be able to same my created image to the server.
Any suggestion on how to achieve this? Example?
I was think of using... (some how)?
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();

Thanks,
Greg

@joaogalli
Copy link

Do you have a solution to draw an image that is loaded as a Resource in Vaadin?

@vicruz
Copy link

vicruz commented Sep 30, 2015

I'm using this with the project vaadincanvas, but is not working.
I added a CliclListener in Canvas.java to made this class work, also added a serlvet to load the page, but when i start the server, a Communication Problem shows (UIDL could not be read from server. Check servlets mapping).

What i'm doing wrong?

I'm starting in vaadin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment