Roy Jin

Example 1: Fish Track Mouse Movement

var startX = 0;
var startY = 0;
function runFishTrackMousMove(){
	$('#svgintro').svg();
	var svg = $('#svgintro').svg('get');
	drawCoordinator(svg);
	$('#svgintro').mousemove(function(event) {
		var g = svg.getElementById('fishGroup');
		if(g == null){
			drawFish(svg, startX, startY);
		}
		moveFish(svg, event);
	});
}
function moveFish(svg, event){
	var destinationX = event.pageX - $('#svgintro').offset().left;
	var destinationY = event.pageY - $('#svgintro').offset().top;
	
	$('#log1').html('Your mouse point on the screen is (' + destinationX + ', ' + destinationY + ')');
	setTimeout(function(){
		var g = svg.getElementById('fishGroup');
		if(g != null){
			svg.remove(g);
		}
		if(startX < destinationX){
			startX += 1;
		}else if(startX > destinationX){
			startX -= 1;
		}
		if(startY < destinationY){
			startY += 1;
		}else if(startY > destinationY){
			startY -= 1;
		}
		drawFish(svg, startX, startY);
	}, 10);
}

function drawFish(svg, startXPoint, startYPoint){
	var fishWidth = 55;
	var fishHeight = 15;
	var fishTail = 20;
	var fishTailHeight = 30;
	var fishBodyWidth = fishWidth - fishTail
	
	var fishGroup = svg.group(null, 'fishGroup', {fill: 'blue'});
	svg.ellipse(fishGroup, startXPoint, startYPoint, fishBodyWidth, fishHeight);

	var fishTailStartX = startXPoint - fishBodyWidth/2;
	var fishTailStartY = startYPoint;

	var fishTailUpX = fishTailStartX - fishTail;
	var fishTailUpY = startYPoint - fishTailHeight/2;

	var fishTailDownX = fishTailStartX - fishTail;
	var fishTailDownY = startYPoint + fishTailHeight/2;

	svg.polyline(fishGroup, [
	  				[fishTailStartX, fishTailStartY], 
	  				[fishTailUpX, fishTailUpY], 
	  				[fishTailDownX, fishTailDownY]
		  		 ]); 
	
	
}
//End Example 1

Example 2: Mouse click to create colourful balls

var cycleTotal = 0;
function clearCycle(){
	$('#svgintro2').svg();
	var svg = $('#svgintro2').svg('get');
	for(var i=0; i < cycleTotal; i++){
		var g = svg.getElementById('cycleGroup_'+i);
		if(g != null){
			svg.remove(g);
		}
	}
	cycleTotal = 0;
}

function runMouseClickCreateBalls(){
	$('#svgintro2').svg();
	var svg = $('#svgintro2').svg('get');
	drawCoordinator(svg);
	$('#svgintro2').click(function(event) {
		drawColorfulCycle(svg, event);
	});
}

function generateRandomColor(){
	var rand_no = Math.random();
	rand_no = rand_no * 3;
	rand_no = Math.ceil(rand_no);
	var colorArray = new Array("#E88638","#8A221C","#FFB54B", "#FFD63E");
	return colorArray[rand_no];
}

function drawColorfulCycle(svg, event){
	var cycleGroup = svg.group(null, 'cycleGroup_' + cycleTotal);
	var startX = event.pageX - $('#svgintro2').offset().left;
	var startY = event.pageY - $('#svgintro2').offset().top;
	var halfLength = 50;
	svg.circle(cycleGroup, startX, startY, halfLength, {strokeWidth: 1, fill: generateRandomColor()});
	svg.circle(cycleGroup, startX, startY, halfLength*3/4, {strokeWidth: 1, fill: generateRandomColor()});
	svg.circle(cycleGroup, startX, startY, halfLength*2/4, {strokeWidth: 1, fill: generateRandomColor()});
	svg.circle(cycleGroup, startX, startY, halfLength/4, {strokeWidth: 1, fill: generateRandomColor()});
	cycleTotal++;
}

Example 3: Draw Shapes

//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

• Demo Site

• Thank you for your support

  

• Contact

  Please fill my contact form and submit your questions.

• Twitter

  Follow my tweets and get connected.

• Contributor and Donator List

  • Matt Alexander
    [Alexander Site Design]
  • Brandon Goldfedder
    [http://www.goldfedder.com]