AnimateJs/rectangle.js at master · gopi1410/AnimateJs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/****************************************************************************
PARAMETERS: direction, lineWidth, lineColour, divisions, duration, fill, fillColour start, draw, stop

NOTE THAT divisions/totalTime should not exceed 25.
*****************************************************************************/

HTMLCanvasElement.prototype.animateRect=function(x1,y1,x2,y2,params) {
	if(params)
		initRect(this,x1,y1,x2,y2,params.direction,params.lineColour,params.lineWidth,params.divisions,params.duration,params.fill,params.fillColour,params.start,params.draw,params.stop);
	else
		initRect(this,x1,y1,x2,y2);
};

function initRect(id,x1,y1,x2,y2,direction,lineColour,lineWidth,divisions,totalTime,fill,fillColor,start,draw,stop)
{
	var canvasId=id;
	var context=canvasId.getContext('2d');
	var rectWidth=Math.abs(x2-x1);
	var rectHeight=Math.abs(y2-y1);
	var halfPerimeter=rectWidth+rectHeight;
	if(!stop)
		stop=function() {};
	if(!draw)
		draw=function() {};

	function drawRectLineClock1()
	{
		id.animateLine(x1,y1,x2,y1,{ 'lineColour':lineColour, 'lineWidth':lineWidth, 'divisions':divisions, 'totalTime':(totalTime/4), 'draw': draw, 'stop': function() { drawRectLineClock2(); } });
	}
	function drawRectLineClock2()
	{
		id.animateLine(x2,y1,x2,y2,{ 'lineColour':lineColour, 'lineWidth':lineWidth, 'divisions':divisions, 'totalTime':(totalTime/4), 'draw': draw, 'stop': function() { drawRectLineClock3(); } });
	}
	function drawRectLineClock3()
	{
		id.animateLine(x2,y2,x1,y2,{ 'lineColour':lineColour, 'lineWidth':lineWidth, 'divisions':divisions, 'totalTime':(totalTime/4), 'draw': draw, 'stop': function() { drawRectLineClock4(); } });
	}
	function drawRectLineClock4()
	{
		id.animateLine(x1,y2,x1,y1,{ 'lineColour':lineColour, 'lineWidth':lineWidth, 'divisions':divisions, 'totalTime':(totalTime/4), 'draw': draw, 'stop': function() {end();} });
	}
	function drawRectLineAnti1()
	{
		id.animateLine(x1,y1,x1,y2,{ 'lineColour':lineColour, 'lineWidth':lineWidth, 'divisions':divisions, 'totalTime':(totalTime/4), 'draw': draw, 'stop': function() { drawRectLineAnti2(); } });
	}
	function drawRectLineAnti2()
	{
		id.animateLine(x1,y2,x2,y2,{ 'lineColour':lineColour, 'lineWidth':lineWidth, 'divisions':divisions, 'totalTime':(totalTime/4), 'draw': draw, 'stop': function() { drawRectLineAnti3(); } });
	}
	function drawRectLineAnti3()
	{
		id.animateLine(x2,y2,x2,y1,{ 'lineColour':lineColour, 'lineWidth':lineWidth, 'divisions':divisions, 'totalTime':(totalTime/4), 'draw': draw, 'stop': function() { drawRectLineAnti4(); } });
	}
	function drawRectLineAnti4()
	{
		id.animateLine(x2,y1,x1,y1,{ 'lineColour':lineColour, 'lineWidth':lineWidth, 'divisions':divisions, 'totalTime':(totalTime/4), 'draw': draw, 'stop': function() {end();} });
	}
	if(start)
		start();
	if(fill==="fillBefore")
	{
		context.beginPath();
		if(fillColor)
			context.fillStyle=fillColor;
		context.rect(x1,y1,Math.abs(x2-x1),Math.abs(y2-y1));
		context.fill();
		context.closePath();
	}
	if(direction)
		drawRectLineAnti1();
	else
		drawRectLineClock1();

	function end()
	{
		if(fill==="fillAfter")
		{
			if(!lineWidth)
				lineWidth=1;
			context.beginPath();
			if(fillColor)
				context.fillStyle=fillColor;
			context.rect(x1+(lineWidth/2),y1+(lineWidth/2),Math.abs(x2-x1)-(lineWidth),Math.abs(y2-y1)-(lineWidth));
			context.fill();
			context.closePath();
		}
		stop();
	}
}