Examples and Documentation on jquery.traceit.js

Ok, so you just saw the title traced. This is how you do it:
Include the jquery.traceit.js script and it's dependencies jQuery (tested with jquery.js 1.10.2), Raphaël (tested with raphael.js 2.1.2) ) in your page.

			
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/raphael.js"></script>
<script src="../js/jquery.traceit.js"></script>

Or include raphael_traceit.min.js script and jquery.min.js. raphael_jquery.traceit.min.js is combined and minified raphael.js (v2.1.2) and jquery.traceit.js.

			
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/raphael_traceit.min.js"></script>

Choose an element you would like to trace. For instance:

<div id="example">Let's trace this element.</div>

If you would like to see your element be traced immediately initialize a trace instance with:

//Initialize a trace instance with:
$('#example').trace();

Or initialize a trace instance with 'isVisible' option set to false. Then later in your code you can call reTrace({isVisible: true}) method or trigger its equivalent 'adjust.trace' event to start the animation.

//Initialize a trace instance with isVisible set to false
$('#example').trace({isVisible: false});

//then later in your code you can call reTrace({isVisible: true}) method
var inst =  $('#example').data('trace');
inst.reTrace({isVisible: true});

//or trigger its equivalent 'adjust.trace' event
$('#example').trigger('adjust.trace');

click here To trace this element.

#example

What can I configure? All options are optional. You can overwrite default options by initializing 'trace' instance with options object 'traceOpt'. See complete list of trace object options below.

//Initialize a trace instance with options object.
$('#example2').trace({
    traceOpt: {
	'stroke': 'blue',
	'stroke-width': 3,
	'stroke-opacity': 1,
	'fill': '#00ff00',
	'fill-opacity': 0.2,
	'gap-point': 'top_left',
	'title': "see, this is example2! Click to hide."
	},
    redrawSpeed: 6000,
    traceCanvasPadding: 6
});

click to trace.

#example2

You can similarly set new options when calling reTrace method or when triggering 'adjust.trace' event.

//some time earlier your code instantiated trace objects by doing:
//$('#example31').trace({isVisible: false});
//$('#example32').trace({isVisible: false});

var inst = $('#example31').data('trace');
inst.reTrace({
	'stroke': '#880000',
	'stroke-width': 2,
	'stroke-opacity': 1,
	'arrow-end': 'classic-wide-long',
	'isVisible': 'true'
});

//or trigger 'adjust.trace' event
$('#example32').trigger({
	type: 'adjust.trace',
	adjustments: {
		'stroke': '#aa0000',
		'stroke-width': 4,
		'stroke-opacity': 1,
		'stroke-dasharray': '--..',
		'gap-point': 'bottom_right'
    }
});

click to trace

#example3_1

#example3_2

Can I have callbacks? Sure.


//or trigger 'adjust.trace' event
$('#example4').trace({
    traceOpt: {
        'stroke-width': 4,
        'stroke-opacity': .5
    },
    onClick: function (me) {
        alert('triggered when user clicks on a trace shape.');
        me.options.shape.animate({
            opacity: 0
        }, 1000, function () {
            me.hideTrace();
        });
    },
    onHide: function () {
        alert('triggered when hide animation completes.');
    },
    onEndTrace: function () {
        alert("triggered when trace animation completes.");
    }
});

click to trace to call onClick callback function click on the shape.

#example4

The list of trace options

/********************************************************************************************************************
arrow-end		string		arrowhead on the end of the path. The format for string is 
					type[-width[-length]]. 
					Possible types: classic, block, open, oval, diamond, none, 
					width: wide, narrow, midium, 
					length: long, short, midium.
cursor			string		CSS type of the cursor
fill			string 		colour, gradient or image
fill-opacity		number 
gap-point		string		["top","top_left","top_right","bottom","bottom_left","bottom_right"] 
			or number	0 - 100, where 0 and 100 both mean "top" (@12 o'clock position),
					50 is "bottom" (@6pm), 25 is "top_right" (@3pm) etc.
opacity			number 
stroke			string 		stroke colour
stroke-dasharray	string 		[“”, “-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]
stroke-linecap		string 		[“butt”, “square”, “round”]
stroke-opacity		number 
stroke-width		number 		stroke width in pixels, default is '1'
title 			string 		will create tooltip with a given text
**********************************************************************************************************************/

Resizing a window or pressing the escape key will redraw all the traces.