Canvas Plus

HTML5 Canvas with events supports.

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();
}

Links

• Source Code

Compatibility