diff --git a/README.md b/README.md index 87204c16..a9c6a044 100644 --- a/README.md +++ b/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 diff --git a/images/test-collection.json b/images/test-collection.json index a744965b..d3d0c999 100644 --- a/images/test-collection.json +++ b/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": [ diff --git a/src/js/config.js b/src/js/config.js index 57319872..164d6a73 100644 --- a/src/js/config.js +++ b/src/js/config.js @@ -107,6 +107,7 @@ config.TOOLS = [ title: 'Rectangle', attributes: { size: 1, + radius: 0, fill: true, square: false, }, diff --git a/src/js/tools/rectangle.js b/src/js/tools/rectangle.js index 2aad351a..5ca5478d 100644 --- a/src/js/tools/rectangle.js +++ b/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;