mirror of
https://github.com/viliusle/miniPaint.git
synced 2026-02-06 14:11:50 +00:00
rounded rectangles
This commit is contained in:
Vilius
parent
66f9df4ff5
commit
845ee4ac61
@ -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
|
||||
|
||||
@ -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": [
|
||||
|
||||
@ -107,6 +107,7 @@ config.TOOLS = [
|
||||
title: 'Rectangle',
|
||||
attributes: {
|
||||
size: 1,
|
||||
radius: 0,
|
||||
fill: true,
|
||||
square: false,
|
||||
},
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user