rounded rectangles

README.md

@@ -20,8 +20,8 @@ or upload from computer (using menu or drag & drop). Nothing will be sent to any
 - Chrome
 - Firefox
 - Opera
-- Edge
 - Safari
+- Edge (missing few features)
 - IE 11 (only basic support)
 
 ## Features

images/test-collection.json

@@ -5,7 +5,7 @@
 		"about": "Image data with multi-layers. Can be opened using miniPaint - https://github.com/viliusle/miniPaint",
 		"date": "2018-07-27",
 		"version": "4.0.1",
-		"layer_active": 16
+		"layer_active": 14
 	},
 	"layers": [
 		{
@@ -532,7 +532,7 @@
 			"name": "Circle #10",
 			"type": "circle",
 			"link": null,
-			"x": 500,
+			"x": 600,
 			"y": 450,
 			"width": 50,
 			"width_original": null,
@@ -567,7 +567,7 @@
 			"name": "Circle #12",
 			"type": "circle",
 			"link": null,
-			"x": 600,
+			"x": 700,
 			"y": 450,
 			"width": 50,
 			"width_original": null,
@@ -596,41 +596,6 @@
 				"render"
 			]
 		},
-		{
-			"id": 13,
-			"parent_id": 0,
-			"name": "Circle #13",
-			"type": "circle",
-			"link": null,
-			"x": 700,
-			"y": 450,
-			"width": 100,
-			"width_original": null,
-			"height": 100,
-			"height_original": null,
-			"visible": true,
-			"is_vector": false,
-			"opacity": 100,
-			"order": 12,
-			"composition": "source-over",
-			"rotate": null,
-			"data": {
-				"center_x": 1091,
-				"center_y": 51
-			},
-			"params": {
-				"size": 5,
-				"fill": false,
-				"circle": true
-			},
-			"status": null,
-			"color": "#008000",
-			"filters": [],
-			"render_function": [
-				"circle",
-				"render"
-			]
-		},
 		{
 			"id": 14,
 			"parent_id": 0,
@@ -768,8 +733,8 @@
 			"name": "Radial gradient #19",
 			"type": "gradient",
 			"link": null,
-			"x": 727,
-			"y": 497,
+			"x": 956,
+			"y": 479,
 			"width": 46,
 			"width_original": null,
 			"height": 10,
@@ -921,6 +886,39 @@
 				"borders",
 				"render"
 			]
+		},
+		{
+			"id": 24,
+			"parent_id": 0,
+			"name": "Rectangle #24",
+			"type": "rectangle",
+			"link": null,
+			"x": 500,
+			"y": 450,
+			"width": 50,
+			"width_original": null,
+			"height": 100,
+			"height_original": null,
+			"visible": true,
+			"is_vector": true,
+			"opacity": 100,
+			"order": 24,
+			"composition": "source-over",
+			"rotate": 0,
+			"data": null,
+			"params": {
+				"size": 1,
+				"radius": 999,
+				"fill": true,
+				"square": false
+			},
+			"status": null,
+			"color": "#6b6b6b",
+			"filters": [],
+			"render_function": [
+				"rectangle",
+				"render"
+			]
 		}
 	],
 	"data": [

src/js/config.js

@@ -107,6 +107,7 @@ config.TOOLS = [
 		title: 'Rectangle',
 		attributes: {
 			size: 1,
+			radius: 0,
 			fill: true,
 			square: false,
 		},

src/js/tools/rectangle.js

@@ -157,6 +157,9 @@ class Rectangle_class extends Base_tools_class {
 		var params = layer.params;
 		var fill = params.fill;
 		var rotateSupport = true;
+		var radius = params.radius;
+		if(radius == undefined)
+			radius = 0;
 
 		ctx.save();
 
@@ -166,19 +169,28 @@ class Rectangle_class extends Base_tools_class {
 		ctx.lineWidth = params.size;
 
 		if (rotateSupport == false) {
-			this.rectangle(ctx, layer.x, layer.y, layer.width, layer.height, fill);
+			this.roundRect(ctx, layer.x, layer.y, layer.width, layer.height, radius, fill);
 		}
 		else {
 			//rotate
 			ctx.translate(layer.x + layer.width / 2, layer.y + layer.height / 2);
 			ctx.rotate(layer.rotate * Math.PI / 180);
-			this.rectangle(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height, fill);
+			this.roundRect(ctx, -layer.width / 2, -layer.height / 2, layer.width, layer.height, radius, fill);
 		}
 
 		ctx.restore();
 	}
 
-	//draws rectangle
+	/**
+	 * draws rectangle
+	 * 
+	 * @param {CanvasRenderingContext2D} ctx
+	 * @param {Number} x
+	 * @param {Number} y
+	 * @param {Number} width
+	 * @param {Number} height
+	 * @param {Boolean} fill
+	 */
 	rectangle(ctx, x, y, width, height, fill) {
 		x = x + 0.5;
 		y = y + 0.5;
@@ -197,7 +209,69 @@ class Rectangle_class extends Base_tools_class {
 			ctx.stroke();
 		}
 	}
+
+	/**
+	 * Draws a rounded rectangle on canvas.
+	 * 
+	 * @param {CanvasRenderingContext2D} ctx
+	 * @param {Number} x
+	 * @param {Number} y
+	 * @param {Number} width
+	 * @param {Number} height
+	 * @param {Number} radius
+	 * @param {Boolean} fill
+	 */
+	roundRect(ctx, x, y, width, height, radius, fill) {
+		x = parseInt(x);
+		y = parseInt(y);
+		width = parseInt(width);
+		height = parseInt(height);
+		if(width < 0){
+			width = Math.abs(width);
+			x = x - width;
+		}
+		if(height < 0){
+			height = Math.abs(height);
+			y = y - height;
+		}
+
+		radius = parseInt(radius);
+		if (typeof fill == 'undefined') {
+			fill = false;
+		}
+		if (typeof radius === 'undefined') {
+			radius = 0;
+		}
+		radius = Math.min(radius, width / 2, height / 2);
+		radius = Math.floor(radius);
+
+		//make it nicer
+		x = x + 0.5;
+		y = y + 0.5;
+		width--;
+		height--;
+
+		radius = {tl: radius, tr: radius, br: radius, bl: radius};
+
+		ctx.beginPath();
+		ctx.moveTo(x + radius.tl, y);
+		ctx.lineTo(x + width - radius.tr, y);
+		ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
+		ctx.lineTo(x + width, y + height - radius.br);
+		ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
+		ctx.lineTo(x + radius.bl, y + height);
+		ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
+		ctx.lineTo(x, y + radius.tl);
+		ctx.quadraticCurveTo(x, y, x + radius.tl, y);
+		ctx.closePath();
+		if (fill) {
+			ctx.fill();
+		}
+		else {
+			ctx.stroke();
+		}
+	}
 
 }
-;
+
 export default Rectangle_class;