Openstudio

Nos contributions > Library for simple drawing with jQuery

Library for simple drawing with jQuery

Simple but cross-browser library.

Applies SVG (using Keith Wood plugin for jQuery) or canvas method if supported on the client browser (includes explorercanvas patch for ie). If not, applies methods derivated from the work of Walter Zorn for compatibility.

- example 1, a simple line :


- example 2 : an ellipse


- example 3 : a pie


- example 4 : an artwork ?


Note : container’s position is important. In these examples, each container is ’position : relative ; width : 500px ; height : 120px ;’

Call

Insert call in your head section (requires jquery.svg.js and blank*.svg) :

in your body section, add the canvas class to containers :

set in you CSS container’s size, for example :

Functions

each function can receive an extra parameter : settings

settings can contain :

- color : a string in a CSS format example : ’red’ or ’#00ff00’. Default : ’black’

- stroke : an integer for the thickness of each line. default : 1

Example :

var settings = {color: '#00ff00', stroke: 3};
functiondescriptionexample
drawLine(X1, Y1, X2, Y2) ;Line from the first to the second pair of coordinates.$("#mydiv").drawLine(20,50,453,40) ;
drawPolyline(Xpoints, Ypoints) ;A polyline is a series of connected line segments. Xpoints and Ypoints are arrays which specify the x and y coordinates of each point as follows :
var Xpoints = new Array(x1,x2,x3,x4,x5) ;
var Ypoints = new Array(y1,y2,y3,y4,y5) ;		var Xpoints = new Array(10,85,93,60) ; var Ypoints = new Array(50,10,105,87) ; $("#mydiv").drawPolyline(Xpoints,Ypoints) ;
drawRect(X, Y, width, height) ;Outline of a rectangle. X and Y give the co-ordinates of the left top corner.$("#mydiv").drawRect(20,50,70,140) ;
fillRect(X, Y, width, height) ;Filled rectangle. X and Y give the co-ordinates to the left top corner.$("#mydiv").fillRect(20,50,453,40) ;
drawPolygon(Xpoints, Ypoints) ;Polygon. Xpoints and Ypoints are arrays which specify the x and y coordinates of the polygon’s corners as follows :
var Xpoints = new Array(x1,x2,x3,x4,x5) ;
var Ypoints = new Array(y1,y2,y3,y4,y5) ;
The polygon will be automatically closed if the first and last points are not identical.		var Xpoints = new Array(10,85,93,60) ;
var Ypoints = new Array(50,10,105,87) ;
$("mydiv").drawPolygon(Xpoints, Ypoints) ;
fillPolygon(Xpoints, Ypoints) ;Filled Polygon. Parameters as for drawPolygon()$("#this").fillPolygon(new Array(10,85,93,60), new Array(50,10,105,87)) ;
drawEllipse(X, Y, width, height) ;Outline of an ellipse. Values refer to the bounding rectangle of the ellipse, X and Y give the co-ordinates of the left top corner of that rectangle rather than of its center.$("#mydiv").drawEllipse(20,50,70,140) ;
fillEllipse(X, Y, width, height) ;Filled ellipse. Values refer to the bounding rectangle of the ellipse, X and Y give the co-ordinates of the left-top corner of that rectangle rather than of its center.$("#mydiv").fillEllipse(20,50,71,141) ;
fillArc(X, Y, width, start-angle, end-angle) ;Fills a pie section of an ellipse. Start-angle and end-angle may be integer numbers or decimalpoint values. Like with the other ...Ellipse() functions, X and Y specify the left-top corner of the bounding rectangle.$("#mydiv").fillArc(20,20,41,270.0,220.0) ;

Download

jquery.drawinglibrary.zip

This program is free software ; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation ; either version 2
of the License, or any later version.

Le 8 novembre 2007


modération a priori

Attention, votre message n'apparaîtra qu'après avoir été relu et approuvé.

Qui êtes-vous ?
Ajoutez votre commentaire ici

  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

25 Messages

  • Hello all,
    I have a problem when to try run demo on opera browser.
    Please give some advices to fix it.
    Thanks,
    Hien Phan

  • I used the code var $j = jQuery.noConflict() ; and it only worked to an exntet. I used it within a script where the function changes the position of an image to change the colour of my navigation buttons because the jquery wasn’t working as I added my lightbox. When i put that script in, the jquery for my navigation began working, but my lightbox stopped working ! So it basically made my original problem the complete opposite. :/ Can anyone help

  • Thanks hex.style for the Chrome solution, confirmed to be working on chrome, safari and IE with jquery v1.6.2 and svg v1.4.4.

  • Hi,
    Help me please, I draw an arrows, i know initial point e arrival point, how draw an arrows ? I draw a line, but not an arrows...

    Thanks and sorry for my bad english !

  • hex-style :
    Your Google Chrome fix works fine ! Thanks a lot, it really helps me !

    p.s. From Russia with love))

  • I tried this way...

    function drawNavBar()
    alert("hi") ;
    jQuery("#nav_panel").fillPolygon(new Array(10,85,93,60), new Array(50,10,105,87)) ;

    And got error like this..
    jQuery("#nav_panel").fillPolygon is not a function

  • Troubles in Opera latest version in detectSVG function
    in expression if ( !!window.opera && results.builtinVersion >= 9 && ( obj = document.createElement( "object" )) && obj && typeof obj.setAttribute( "type", "image/svg+xml" ) && document.appendChild( obj ))

    with document.appendChild( obj )

    i’m stuck =)

    help me plz

  • Hi ! If you want to make Google Chrome work with this library, follow next steps :

    1. download the latest jQuery svg from http://keith-wood.name/svg.html
    2. rename in this library calls of global variable SVGManager with $.svg and function getSVGFor with _getSVG
    3. enjoy =)

    p.s. from Russia with love))

  • Hi can any one please help me in drawing double headed arrow

  • hello, is it possible to easily write text to the canvas (in precise coordinates) ?

  • Hi

    The SVG Plug-in is working properly in Firefox, but i get an error with google chrome :

    "ReferenceErorr : svgManager is not defined"

    - > with latest jquery (1.5.2, same with 1.4.2) and jquery.svg

    Furthermore if i download your example and run it locally i do get an empty screen where i should see the examples (in chrome), in firefox 4 it’s working as well in Safari. Rather strange.

    BTW : jquery.svg.js, without the drawing library, is working properly.

    Best
    Marc

  • Hey ... this is a pretty cool plugin !! I’ve test it and it seems to work awesome !.
    One question.... dashed lines ?, I think it is not supporting them, but .. is there any way to do it ? or add it ?. I mean, without drawing thousands of little lines :P

    Thanks Again for this tool ... ;)

  • Is any other way to clear or delete contents ?
    Thanks.

  • Doesn’t seem to work in Chrome. Drawing on canvas directly does work, but this jquery library doesn’t. Maybe I’m doing something wrong ? My DOM looks like :

    <canvas>
    <div id="id847224" style="position : absolute ; top : 0px ; left : 0px ; width : 300px ; height : 150px ; ">
    <object width="0" height="0" type="image/svg+xml" data="blank.svg ?0">
    <p class="svg_error">This browser does not support SVG</p>
    </object>
    </div>
    <div id="id875002" style="position : absolute ; top : 0px ; left : 0px ; width : 300px ; height : 150px ; ">
    <object width="0" height="0" type="image/svg+xml" data="blank.svg ?1">
    <p class="svg_error">This browser does not support SVG</p>
    </object>
    </div>
    </canvas>

    Is it normal to have divs inside a canvas tag like that ? I suspect each object is supposed to represent a shape I tried to draw, but nothing is visible.

  • clearRect() functionality can be added into the jquery.drawinglibrary.js, at line 1584 for example. It’s this simple :

    $.fn.clearRect = function()
    $(this).empty() ;

    Voir en ligne : http://pompo500.xs.fi/

  • This is a *fantastic* library - works like a dream on both FF and IE ! Sweet !.

    If you’re interested, I’ve just used this on a project, and had to draw arrows on the end of lines I’d drawn. I can happily supply the code if you wish - it works for lines at any angle. It was actually quite nice to re-visit my high-school trigonometry ; I’d forgotten what a radian and arcsine were :-)

    Top library !

    Cheers,

    Steve

  • Hi ! I’m interested, is there a way to clear the contents of the canvas ? I want to draw a line from a fixed point to the mouse, every time the mouse moves.

  • how to draw text inside a box ? thanks

  • Il me parait que ce plugin ne marche pas sur ie 8, sauf avec utilisation de la mode de compatibilité. Il y a une solution pour ce problème ?

  • Hello i will something Know About Javascript events.
    Can i do an event on for example a Ellipse ?
    Or i have to add an absolute div over the canvas to do events ?

  • Unfortunately, the library does not work on Opera 9.63, but this is a great piece of work, thank you :-)

  • Error in Opera 5,6

  • Is it possible to extract the image drawn in the canvas as a png or jpeg file and save it ?
    Or to send the image per email to a designated address ?
    thank you.

  • I’ve noticed that the plugin is not able to fillArc with an angle superior or equal at 270° :

    $('#mydiv').fillArc(0, 0, 100, 0, 270, {color: 'blue'});
    $('#mydiv_pie').fillArc(0, 0, 100, 270, 349, {color: 'red'});
    $('#mydiv_pie').fillArc(0, 0, 100, 349, 360, {color: 'yellow'});

    Maybe i’ve done something wrong...

    Reported on jquery website : http://plugins.jquery.com/node/2455

  • Exisist it a way to return the svg element.
    I mean..

    myEllipse = $("#example2").drawEllipse(5, 5, 220, 55, color : ’#0a87d6’, stroke : 2) ;

    and so do basic SVG animation

    myEllipse.moveTo(x,y)

A propos de l'auteur

Arnault PACHOT

Co-fondateur et Directeur Technique, Arnault apporte son expertise unique sur les solutions libres.

Il assure une veille technologique régulière, et supervise les phases techniques des développements tout au long du déroulement du projet.