-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi.
I need to put a image or letter over a image on a specific XY coordinate or clicked.
I have a picture of a car and I need to mark where the car is scratched or has a stroke.
Thanks
Hello LuisVelez,
A very interesting functionality that zk provides is the canvas component where you can draw dynamically shapes.
You can find more information at the following urls:
http://books.zkoss.org/wiki/SmallTalks/2008/February/GraphicswithZKCanvas_Component
http://books.zkoss.org/wiki/SmallTalks/2010/June/HowToUseCanvas4Z
Best Regards,
Darksu
Thank you @Darksu.
I'm having problems using canvas. I can't put a image on it.
I got this error message
setAttr Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided. (TypeError)
This is my .zul
<window id="win">
<canvas id="mycanvas" width="780px" height="300px" onClick='alert(event.x +" "+ event.y)' />
<button id="btn" label="Draw Rectangle" >
<attribute name="onClick">
<![CDATA[
org.zkoss.zul.Image img1 = new org.zkoss.zul.Image();
img1.setSrc("/img/LatIzq.png");
mycanvas.add(img1, 0, 0);
]]>
</attribute>
</button>
<button label="Clear">
<attribute name = "onClick">
//clean the contents of this canvas
mycanvas.clear();
</attribute>
</button>
</window>
Also, I'm doing this:
<zk xmlns:h="xhtml">
<script><![CDATA[
window.onload = function () {
var canvas = document.getElementById('testCanvas');
var img = new Image();
//indico la URL de la imagen
img.src = '/img/LatIzq.png';
var ctx = canvas.getContext('2d'); // get Canvas context
/*ctx.strokeStyle = '#AAAAAA'; // line color
ctx.lineWidth = 3; // line width
ctx.beginPath(); // start
ctx.moveTo(30, 30); // start point
ctx.lineTo(350, 350); // end point
ctx.stroke(); // draw line*/
img.onload = function(){
//incluyo la imagen en el canvas
ctx.drawImage(img, 1, 1);
}
//ctx.drawImage(img, 1, 1);
}
]]></script>
<div />
<h:canvas id="testCanvas" height="500px" width="780px" style="border: 5px solid #3648AE;" onClick='alert(event.x +" "+ event.y)'>
current browser does not support canvas
</h:canvas>
</zk>
In the last zul I don get any error message but can't see the image on canvas
Any Idea??
Thanks
Asked: 2014-08-08 03:22:43 +0800
Seen: 15 times
Last updated: Aug 17 '14