Base Libraries for Drawing
I needed to draw lines using javascript for a game I am developing. When I looked at the existing libraries I saw that they were either browser dependent or too processor intensive, with methods like creating 1 pixel divs. I could not find any simple and good library.
After some research I saw that there were two standards that could be used to draw lines without using too much resources. The canvs on firefox, safari and opera and the vml on internet explorer. Some old browsers may not support this, but almost nobody uses them nowadays.
SVG was not ideal for javascript because it required an external svg file to be put on the page first.
I think it would be good to have a base drawing library with jquery, that can be used for other widgets. We can have the basic methods, like drawing lines, rectangles, arcs, ovals, fill them etc. This can be used for ui widgets like charts, visualizations, games, rounded corners etc.
I have written a shot script for drawing a line that uses the canvas on supported browsers, and vml on internet explorer. You need to include the vml namespace in the doctype, and vml behavior css style for compatibility with ie.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
v\: * {behavior:url(#default#VML);}
Usage:
$(element).drawLine(x1, y1, x2, y2);
The element needs to have the position set to relative for vml to work.
This is a very basic script, but a start for the idea.
After some research I saw that there were two standards that could be used to draw lines without using too much resources. The canvs on firefox, safari and opera and the vml on internet explorer. Some old browsers may not support this, but almost nobody uses them nowadays.
SVG was not ideal for javascript because it required an external svg file to be put on the page first.
I think it would be good to have a base drawing library with jquery, that can be used for other widgets. We can have the basic methods, like drawing lines, rectangles, arcs, ovals, fill them etc. This can be used for ui widgets like charts, visualizations, games, rounded corners etc.
I have written a shot script for drawing a line that uses the canvas on supported browsers, and vml on internet explorer. You need to include the vml namespace in the doctype, and vml behavior css style for compatibility with ie.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
v\: * {behavior:url(#default#VML);}
Usage:
$(element).drawLine(x1, y1, x2, y2);
The element needs to have the position set to relative for vml to work.
This is a very basic script, but a start for the idea.
Topic Participants
bavkir
Richard Worth
lr.b