Skip to content

Gagege/JRPad

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 

Repository files navigation

JRPad by Gage Herrmann

Version 0.9.2
Released 2010-11-20

Contact the author: gage.herrmann@gmail.com

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:
						<div id="drawingArea" style="width:200px; height:400px;"></div>
						(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".

About

Draw with your mouse on an HTML canvas.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published