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
Compatibility
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.HTML 5 Canvas implementation for vaadin 7 with events supports.
Now Support draw Images.
Events Support:
- Click
- Mouse Move
- Click Up
- Click Down.
Source CodeCanvas 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)