jQuery SVG draw shapes tutorial and demo

Probably, you had played and had fun with google docs which allows you to draw diagram, shapes etc on the web. Today, we are going to simulate google docs draw shapes application by using jQuery and SVG.

If you missed out my previous tutorial about animation SVG and jQuery, please forward this [link] and download jQuery SVG framework.

[Demo] -> Go to Example 3

Scenario:

  1. User selects different types of shapes thumbnails
  2. User moves their mouse onto the painting canvas
  3. User selects the draw area (dotted rectangle area)
    • User clicked down the left button of mouse (start point)
    • User drags the mouse
    • User releases the clicked button (end point)
  4. The selected shapes will be drawn according to the selected area
  5. selected area is gone

Challenge:

1. Simulate mouse drag events:

$(‘#canvansId’).mousedown(startDrag).mousemove(dragging).mouseup(endDrag);

You have to define startDrag, dragging and endDrag functions.

startDrag: define the start point

dragging: draw the selected area

endDrag: define the end point clear the selected area.

2. Draw selected shapes

This demo only shows you Rectangle and Cycle.

3. Clear shapes

Code:

//Start Example 3
	var drawStartPoint = null;
	var drawEndPoint = null;
	var shapeCount = 0;
	var drawRect = true;
	var drawCycle = false;
	function runDrawShapes(){
		$('#svgintro3').svg();
		var svg = $('#svgintro3').svg('get');
		drawCoordinator(svg);
		$('#svgintro3').mousedown(startDrag).mousemove(dragging).mouseup(endDrag);
	}

	function startDrag(event){
		var offset = ($.browser.msie ? {left: 0, top: 0} : $('#svgintro3').offset());
	    if (!$.browser.msie) {
	        offset.left -= document.documentElement.scrollLeft || document.body.scrollLeft;
	        offset.top -= document.documentElement.scrollTop || document.body.scrollTop;
	    }
	    drawStartPoint = {X: event.clientX - offset.left, Y: event.clientY - offset.top};
	    return true;
	}

	// Provide feedback as we drag
	function dragging(event) {
		if(drawStartPoint != null){
			$('#svgintro3').svg();
			var svg = $('#svgintro3').svg('get');

			var g = svg.getElementById('selectArea');
			if(g != null){
				svg.remove(g);
			}

			var offset = ($.browser.msie ? {left: 0, top: 0} : $('#svgintro3').offset());
		    if (!$.browser.msie) {
		        offset.left -= document.documentElement.scrollLeft || document.body.scrollLeft;
		        offset.top -= document.documentElement.scrollTop || document.body.scrollTop;
		    }
		    drawEndPoint = {X: event.clientX - offset.left, Y: event.clientY - offset.top};

		    var selectArea = svg.group(null, 'selectArea');
		    svg.rect(selectArea, drawStartPoint.X, drawStartPoint.Y, drawEndPoint.X, drawEndPoint.Y,  {fill: 'none', stroke: '#000000', strokeWidth: 1, strokeDashArray: '2,2'});
		    $('#svgintro3').mouseup(endDrag);
		}
		return;
	} 

	// Draw where we finish
	function endDrag(event) {
		if(drawStartPoint != null && drawEndPoint != null){
			$('#svgintro3').svg();
			var svg = $('#svgintro3').svg('get');
			if(drawRect){
				drawRectShape();
			}else{
				drawCycleShape();
			}

			var g = svg.getElementById('selectArea');
			if(g != null){
				svg.remove(g);
			}

			drawStartPoint = null;
			drawEndPoint = null;
		}
		return;
	}

	function drawRectShape(){
		$('#svgintro3').svg();
		var svg = $('#svgintro3').svg('get');
		var rectShapeGroup = svg.group(null, 'rectShape_' + shapeCount);
		svg.rect(rectShapeGroup, drawStartPoint.X, drawStartPoint.Y, drawEndPoint.X, drawEndPoint.Y,  {fill: '#CFE2F3', stroke: '#173148', strokeWidth: 2});
		shapeCount++;
	}

	function drawCycleShape(){
		$('#svgintro3').svg();
		var svg = $('#svgintro3').svg('get');
		var rectShapeGroup = svg.group(null, 'cycleShape_' + shapeCount);
		svg.circle(rectShapeGroup, (drawEndPoint.X - drawStartPoint.X)/2 + drawEndPoint.X, (drawEndPoint.Y - drawStartPoint.Y)/2 + drawStartPoint.Y, (drawEndPoint.X - drawStartPoint.X), {fill: '#CFE2F3', stroke: '#173148', strokeWidth: 2});
		shapeCount++;
	}
	function selectShape(isRect){
		if(isRect){
			drawRect = true;
			drawCycle = false;
		}else{
			drawCycle = true;
			drawRect = false;
		}
	}
	function clearDrawShapes(){
		for(var i=0; i<shapeCount; i++){
			$('#svgintro3').svg();
			var svg = $('#svgintro3').svg('get');

			var g = svg.getElementById('rectShape_' + i);
			if(g != null){
				svg.remove(g);
			}

			g = svg.getElementById('cycleShape_' + i);
			if(g != null){
				svg.remove(g);
			}
		}
		drawRect = true;
		drawCycle = false;
	}
	//End Example 3
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s