https://www.toolpic.com/app/editor/js/elements.js

1/* global WIDTH, HEIGHT */
2
3var EL = new ELEMENTS_CLASS();
4
5/**
6 * class that draw simple elements
7 * 
8 * @author toolpic.com
9 */
10function ELEMENTS_CLASS() {
11
12	//draw lines
13	this.line = function(ctx, from_x, from_y, to_x, to_y, size){
14		ctx.beginPath();
15		if(size != undefined)
16			ctx.lineWidth = size;
17		ctx.moveTo(from_x + 0.5, from_y + 0.5);
18		ctx.lineTo(to_x + 0.5, to_y + 0.5);
19		ctx.stroke();
20	};
21	
22	//draws rectangle
23	this.rectangle = function (ctx, x, y, width, height, fill, stroke) {
24		x = x + 0.5;
25		y = y + 0.5;
26		if (typeof stroke == "undefined")
27			stroke = true;
28		if(fill == false && stroke == undefined)
29			stroke = true;
30		
31		ctx.beginPath();
32		ctx.moveTo(x, y);
33		ctx.lineTo(x + width, y);
34		ctx.quadraticCurveTo(x + width, y, x + width, y);
35		ctx.lineTo(x + width, y + height);
36		ctx.quadraticCurveTo(x + width, y + height, x + width, y + height);
37		ctx.lineTo(x, y + height);
38		ctx.quadraticCurveTo(x, y + height, x, y + height);
39		ctx.lineTo(x, y);
40		ctx.quadraticCurveTo(x, y, x, y);
41		ctx.closePath();
42		if (stroke) {
43			ctx.stroke();
44		}
45		if (fill) {
46			ctx.fill();
47		}
48	};
49	
50	//draws square
51	this.square = function (ctx, x, y, width, height, fill, stroke) {
52		x = x + 0.5;
53		y = y + 0.5;
54		if (typeof stroke == "undefined")
55			stroke = true;
56		if(fill == false && stroke == undefined)
57			stroke = true;
58		
59		if (Math.abs(width) < Math.abs(height)){
60			if(width > 0)
61				width = Math.abs(height);
62			else
63				width = -Math.abs(height);
64		}
65		else{
66			if(height > 0)
67				height = Math.abs(width);
68			else
69				height = -Math.abs(width);
70		}
71		
72		ctx.beginPath();
73		ctx.moveTo(x, y);
74		ctx.lineTo(x + width, y);
75		ctx.quadraticCurveTo(x + width, y, x + width, y);
76		ctx.lineTo(x + width, y + height);
77		ctx.quadraticCurveTo(x + width, y + height, x + width, y + height);
78		ctx.lineTo(x, y + height);
79		ctx.quadraticCurveTo(x, y + height, x, y + height);
80		ctx.lineTo(x, y);
81		ctx.quadraticCurveTo(x, y, x, y);
82		ctx.closePath();
83		if (stroke) {
84			ctx.stroke();
85		}
86		if (fill) {
87			ctx.fill();
88		}
89	};
90	
91	this.circle = function (ctx, x, y, size, color) {
92		ctx.lineWidth = 1;
93		if(color != undefined)
94			ctx.strokeStyle = color;
95		else
96			ctx.strokeStyle = "#000000";
97			
98		ctx.beginPath();
99		ctx.arc(x, y, size / 2, 0, Math.PI * 2, true);
100		ctx.stroke();
101	};
102	
103	this.ellipse_by_center = function (ctx, cx, cy, w, h, color, fill) {
104		this.ellipse(ctx, cx - w / 2.0, cy - h / 2.0, w, h, color, fill);
105	};
106	
107	this.ellipse = function (ctx, x, y, w, h, color, fill) {
108		var kappa = .5522848,
109			ox = (w / 2) * kappa, // control point offset horizontal
110			oy = (h / 2) * kappa, // control point offset vertical
111			xe = x + w, // x-end
112			ye = y + h, // y-end
113			xm = x + w / 2, // x-middle
114			ym = y + h / 2; // y-middle
115
116		ctx.beginPath();
117		ctx.moveTo(x, ym);
118		ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
119		ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
120		ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
121		ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
122		ctx.closePath();
123		ctx.fillStyle = color;
124		ctx.strokeStyle = color;
125		if (fill == undefined)
126			ctx.stroke();
127		else
128			ctx.fill();
129	};
130	
131	this.arrow = function (context, fromx, fromy, tox, toy, headlen) {
132		if (headlen == undefined)
133			headlen = 10;	// length of head in pixels
134		var dx = tox - fromx;
135		var dy = toy - fromy;
136		var angle = Math.atan2(dy, dx);
137		context.beginPath();
138		context.moveTo(fromx, fromy);
139		context.lineTo(tox, toy);
140		context.stroke();
141		context.beginPath();
142		context.moveTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
143		context.lineTo(tox, toy);
144		context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
145		context.stroke();
146	};
147	
148	//dashed objects
149	this.rectangle_dashed = function (canvas, x1, y1, x2, y2, dashLen, color) {
150		this.line_dashed(canvas, x1, y1, x2, y1, dashLen, color);
151		this.line_dashed(canvas, x2, y1, x2, y2, dashLen, color);
152		this.line_dashed(canvas, x2, y2, x1, y2, dashLen, color);
153		this.line_dashed(canvas, x1, y2, x1, y1, dashLen, color);
154	};
155	
156	this.line_dashed = function (canvas, x1, y1, x2, y2, dashLen, color) {
157		x1 = x1 + 0.5;
158		y1 = y1 + 0.5;
159		x2 = x2 + 0.5;
160		y2 = y2 + 0.5;
161		if (color != undefined)
162			canvas.strokeStyle = color;
163		else
164			canvas.strokeStyle = "#000000";
165		if (dashLen == undefined)
166			dashLen = 4;
167		canvas.beginPath();
168		canvas.moveTo(x1, y1);

169		var dX = x2 - x1;
170		var dY = y2 - y1;
171		var dashes = Math.floor(Math.sqrt(dX * dX + dY * dY) / dashLen);
172		var dashX = dX / dashes;
173		var dashY = dY / dashes;
174		var q = 0;
175		while (q++ < dashes) {
176			x1 += dashX;
177			y1 += dashY;
178			canvas[q % 2 == 0 ? 'moveTo' : 'lineTo'](x1, y1);
179		}
180		canvas[q % 2 == 0 ? 'moveTo' : 'lineTo'](x2, y2);
181		canvas.stroke();
182		canvas.closePath();
183	};
184	
185	this.image_round = function (canvas, mouse_x, mouse_y, size, img_data, canvas_tmp, anti_aliasing) {
186		var size_half = Math.round(size / 2);
187		var ctx_tmp = canvas_tmp.getContext("2d");
188		var xx = mouse_x - size_half;
189		var yy = mouse_y - size_half;
190		if (xx < 0)
191			xx = 0;
192		if (yy < 0)
193			yy = 0;
194
195		ctx_tmp.clearRect(0, 0, WIDTH, HEIGHT);
196		ctx_tmp.save();
197		//draw main data
198		try {
199			ctx_tmp.drawImage(img_data, mouse_x - size_half, mouse_y - size_half, size, size);
200		}
201		catch (err) {
202			try {
203				ctx_tmp.putImageData(img_data, xx, yy);
204			}
205			catch (err) {
206				console.log("Error: " + err.message);
207			}
208		}
209		ctx_tmp.globalCompositeOperation = 'destination-in';
210
211		//create form
212		ctx_tmp.fillStyle = '#ffffff';
213		if (anti_aliasing == true) {
214			var gradient = ctx_tmp.createRadialGradient(mouse_x, mouse_y, 0, mouse_x, mouse_y, size_half);
215			gradient.addColorStop(0, '#ffffff');
216			gradient.addColorStop(0.8, '#ffffff');
217			gradient.addColorStop(1, 'rgba(255,255,255,0');
218			ctx_tmp.fillStyle = gradient;
219		}
220		ctx_tmp.beginPath();
221		ctx_tmp.arc(mouse_x, mouse_y, size_half, 0, 2 * Math.PI, true);
222		ctx_tmp.fill();
223		//draw final data
224		if (xx + size > WIDTH)
225			size = WIDTH - xx;
226		if (yy + size > HEIGHT)
227			size = HEIGHT - yy;
228		canvas.drawImage(canvas_tmp, xx, yy, size, size, xx, yy, size, size);
229		//reset

230		ctx_tmp.restore();
231		ctx_tmp.clearRect(0, 0, WIDTH, HEIGHT);
232	};
233}
234
235//http://www.script-tutorials.com/html5-canvas-custom-brush1/
236var BezierCurveBrush = {
237	// inner variables
238	iPrevX: 0,
239	iPrevY: 0,
240	points: null,
241	// initialization function
242	init: function () {
243	},
244	startCurve: function (x, y) {
245		this.iPrevX = x;
246		this.iPrevY = y;
247		this.points = new Array();
248	},
249	getPoint: function (iLength, a) {
250		var index = a.length - iLength, i;
251		for (i = index; i < a.length; i++) {
252			if (a[i]) {
253				return a[i];
254			}
255		}
256	},
257	draw: function (ctx, color_rgb, x, y, size) {
258		if (Math.abs(this.iPrevX - x) > 5 || Math.abs(this.iPrevY - y) > 5) {
259			this.points.push([x, y]);
260
261			// draw main path stroke
262			ctx.beginPath();
263			ctx.moveTo(this.iPrevX, this.iPrevY);
264			ctx.lineTo(x, y);
265
266			ctx.lineWidth = size;
267			ctx.lineCap = 'round';
268			ctx.lineJoin = 'round';
269			ctx.strokeStyle = 'rgba(' + color_rgb.r + ', ' + color_rgb.g + ', ' + color_rgb.b + ', 0.9)';
270			ctx.stroke();
271			ctx.closePath();
272
273			// draw extra strokes
274			ctx.lineWidth = 1;
275			ctx.strokeStyle = 'rgba(' + color_rgb.r + ', ' + color_rgb.g + ', ' + color_rgb.b + ', 0.2)';
276			ctx.beginPath();
277			var iStartPoint = this.getPoint(25, this.points);
278			var iFirstPoint = this.getPoint(1, this.points);
279			var iSecondPoint = this.getPoint(5, this.points);
280			ctx.moveTo(iStartPoint[0], iStartPoint[1]);
281			ctx.bezierCurveTo(iFirstPoint[0], iFirstPoint[1], iSecondPoint[0], iSecondPoint[1], x, y);
282			ctx.stroke();
283			ctx.closePath();
284
285			this.iPrevX = x;
286			this.iPrevY = y;
287		}
288	}
289};