JRPad by Gage Herrmann

Version 0.9.2 Released 2010-11-20

Contact the author: [email protected]

This library requires jQuery and RaphaelJS to work. You can find these at: jquery.com and raphaeljs.com respectively.

--------INSTALLATION-------- Include jQuery, RaphaelJS and JRPad in the head of an html document.

Example:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript" SRC="jQuery.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript" SRC="raphael.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript" SRC="JRPad.js"></SCRIPT>

--------USAGE--------

It's probably a good idea to be fairly familiar with jQuery before using JRPad: http://docs.jquery.com/Main_Page

JRPad tutorial coming soon at http://www.herrmannfam.com/jrpad

-Put all JRPad calls inside of a jQuery $(document).ready function. -You must pass the id of the div element you want the JRPad to be in to JRPad's constructor: var newPad = new JRPad("drawingArea"); (note that the "#" symbol before the id is not needed)

-And have a div like:

(JRPad will size itself to to 200 by 400 pixels automatically)

-Here's the messy part. Include this code (Assuming your div is named "drawingArea". You can of course call it whatever you want.): $("#drawingArea").mousedown( function(e) { newPad.setMouseDown(true); newPad.drawDot(e); return false; }).mouseup( function() { newPad.setMouseDown(false); });

                    $("#drawingArea").mousemove( function(e)
                    {
                        panewPad.drawLine(e);
                    });

-Other functions available: .eraser(); //changes the stroke color to the same color as the background. Call it in a jQuery click event for best results. .setColor(colorValue) //can take html color names ("red", "green", "black") or hex color values ("#000000", "#3f2a5e"). .setWidth(widthValue) //pass an int or a decimal to it to change the width (thickness, size, whatever) of the "brush".