Directory

← Back

Canvas Plus

HTML5 Canvas with events supports.

Author

Rating

Popularity

<100

HTML 5 Canvas implementation for vaadin 7 with events supports.

Now Support draw Images.

Events Support:

  • Click
  • Mouse Move
  • Click Up
  • Click Down.

Sample code

CanvasPlus canvas = new CanvasPlus();

canvas.setWidth("600");
canvas.setHeight("600");

canvas.loadImages(new String[] { "http://webapp.org.ua/wp-content/uploads/2011/10/gwtlogo.jpg" });


canvas.addClickListener(new CanvasPlus.CanvasClickListener() {
	@Override
	public void onClick(MouseEventDetails mouseDetails) {
		System.out.println("Click");
		System.out.println("Data " + mouseDetails.getRelativeX() + "" + mouseDetails.getRelativeY());
	}
});

canvas.addMouseMoveListener(new CanvasPlus.CanvasMouseMoveListener() {
	@Override
	public void onMove(MouseEventDetails mouseDetails) {
		System.out.println("Data " + mouseDetails.getRelativeX() + "" + mouseDetails.getRelativeY());
	}
});

canvas.addClickUpListener(new CanvasPlus.CanvasClickUpListener() {
	@Override
	public void onClickUp(MouseEventDetails mouseDetails) {
		System.out.println("Click Up");
	}
});

canvas.addClickDownListener(new CanvasPlus.CanvasClickDownListener() {
	@Override
	public void onClickDown(MouseEventDetails mouseDetails) {
		System.out.println("Click Down");
	}
});

canvas.addImageLoadListener(new CanvasPlus.CanvasImageLoadListener() {
	@Override
	public void onImageLoad() {
		drawImage();
		btnImage.addClickListener(new ClickListener() {
			@Override
			public void buttonClick(ClickEvent event) {
				drawImage();
			}
		});
	}
});


private void drawLines() {
	canvas.saveContext();
	canvas.clear();
	canvas.moveTo(0, 0);

	for (int i = 0; i < 600; i += 10) {
		canvas.moveTo(i, 0);
		canvas.lineTo(i, 600);
	}

	for (int i = 0; i < 600; i += 10) {
		canvas.moveTo(0, i);
		canvas.lineTo(600, i);
	}

	canvas.setStrokeStyle("#f00");
	canvas.stroke();
	canvas.restoreContext();
}

private void drawImage() {
	canvas.saveContext();
	canvas.clear();
	canvas.moveTo(0, 0);
	double x = 0, y = 0;
	canvas.drawImage("http://webapp.org.ua/wp-content/uploads/2011/10/gwtlogo.jpg", x, y);
	canvas.restoreContext();
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Minor fix. Change package for the events. (use same standard of vaadin)

Released
2014-10-27
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.3+
Browser
Firefox
Google Chrome
Internet Explorer

Canvas Plus - Vaadin Add-on Directory

HTML5 Canvas with events supports. Canvas Plus - Vaadin Add-on Directory
HTML 5 Canvas implementation for vaadin 7 with events supports. Now Support draw Images. Events Support: - Click - Mouse Move - Click Up - Click Down.
Source Code

Canvas Plus version 1.1.3
Stable version release.

Canvas Plus version 1.2.4
Draw Images. Fix Draw. Adding method for loadImages. Adding method to draw a curve. Better Example.

Canvas Plus version 1.3.2
Add JavaDoc. Minor Fix.

Canvas Plus version 1.3.3
Minor fix. Change package for the events. (use same standard of vaadin)

Online