Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I've been struggling with this for a couple of days. Let me explain what I'd like to do, someone else out there may have the same needs or know the answers:
1. I'm developing a complex web application in ZK
2. One part of the app requires a sophisticated drawing interface, and I'd like to use Canvas for that.
3. Due to many good javascript libraries that work with Canvas, I'd like to keep most of this drawing functions on the client side.
4. The entry point to the drawing tool, is when user clicks a button, after which I will need to create a Canvas tag, and position it correctly, then invoking other javascript libraries.
I am stuck at step 4, I've tried the following:
1. put the Canvas creation in a javascript, and use "eval..." from Composer. Not working: "Creating new elements not allowed in Script";
2. Trying to use zk.canvas.Canvas directly in javascript. Not working: "zk.canvas is undefined";
3. put the javascript code in a client "onClick" attribute for the button. Not working: "Canvas not allowed in Event Listners";
I am running out of ideas trying to get this working within ZK. It is obvious that there are many limitations on how the client-side programming can be used, and it would be really helpful that someone can give me a pointer on this.
The last choice for me, which I would rather not do,is to use iframe (Not sure if the same limitations exist to create an iframe) for the canvas.
Any help is appreciated.
Thanks.
Hi JJ,
I have replied here: http://www.zkoss.org/forum/listComment/19859/1/20
Jimmy,
Thanks for the reply. I read the small talks, and it doesn't exactly help what I am doing.
Seems you still need a <canvas> tag already existing in the zul document. I am trying to dynamically create a new one (using Client-side programming).
I just downloaded the canvas4Z jar file and put it in my web library, and tried out the following sample code from ZK Client Engine Javascript Doc:
var main = jq("#main");
main.append(canvas);
var canvas = zk.canvas.Canvas.create(main.clientWidth, main.clientHeight);
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 255, 50);
It still complains zk.canvas is not defined. Is it possible to do what I had in mind?
Thanks.
Hi JJ,
You can try to place your javascript in zk.load function:
zk.load('zk.canvas', function () {
var canvas = zk.canvas.Canvas.create(main.clientWidth, main.clientHeight);
....
});
Asked: 2012-06-18 01:42:28 +0800
Seen: 273 times
Last updated: Jun 19 '12