0

How to put a image or Letter over image on a specific XY Coordinate

asked 2014-08-08 03:22:43 +0800

LuisVelez gravatar image LuisVelez
12

updated 2014-08-08 03:37:46 +0800

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

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
0

answered 2014-08-09 14:33:51 +0800

Darksu gravatar image Darksu
1991 1 4

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

link publish delete flag offensive edit
0

answered 2014-08-17 21:51:31 +0800

LuisVelez gravatar image LuisVelez
12

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

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2014-08-08 03:22:43 +0800

Seen: 13 times

Last updated: Aug 17 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More