90 lines
1.9 KiB
JavaScript
90 lines
1.9 KiB
JavaScript
|
/**
|
||
|
|
* @param {Object} ctx
|
||
|
|
* @param {Object} shape
|
||
|
|
* @param {number} shape.x
|
||
|
|
* @param {number} shape.y
|
||
|
|
* @param {number} shape.width
|
||
|
|
* @param {number} shape.height
|
||
|
|
* @param {number} shape.r
|
||
|
|
*/
|
||
|
|
function buildPath(ctx, shape) {
|
||
|
|
var x = shape.x;
|
||
|
|
var y = shape.y;
|
||
|
|
var width = shape.width;
|
||
|
|
var height = shape.height;
|
||
|
|
var r = shape.r;
|
||
|
|
var r1;
|
||
|
|
var r2;
|
||
|
|
var r3;
|
||
|
|
var r4; // Convert width and height to positive for better borderRadius
|
||
|
|
|
||
|
|
if (width < 0) {
|
||
|
|
x = x + width;
|
||
|
|
width = -width;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (height < 0) {
|
||
|
|
y = y + height;
|
||
|
|
height = -height;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (typeof r === 'number') {
|
||
|
|
r1 = r2 = r3 = r4 = r;
|
||
|
|
} else if (r instanceof Array) {
|
||
|
|
if (r.length === 1) {
|
||
|
|
r1 = r2 = r3 = r4 = r[0];
|
||
|
|
} else if (r.length === 2) {
|
||
|
|
r1 = r3 = r[0];
|
||
|
|
r2 = r4 = r[1];
|
||
|
|
} else if (r.length === 3) {
|
||
|
|
r1 = r[0];
|
||
|
|
r2 = r4 = r[1];
|
||
|
|
r3 = r[2];
|
||
|
|
} else {
|
||
|
|
r1 = r[0];
|
||
|
|
r2 = r[1];
|
||
|
|
r3 = r[2];
|
||
|
|
r4 = r[3];
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
r1 = r2 = r3 = r4 = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
var total;
|
||
|
|
|
||
|
|
if (r1 + r2 > width) {
|
||
|
|
total = r1 + r2;
|
||
|
|
r1 *= width / total;
|
||
|
|
r2 *= width / total;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (r3 + r4 > width) {
|
||
|
|
total = r3 + r4;
|
||
|
|
r3 *= width / total;
|
||
|
|
r4 *= width / total;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (r2 + r3 > height) {
|
||
|
|
total = r2 + r3;
|
||
|
|
r2 *= height / total;
|
||
|
|
r3 *= height / total;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (r1 + r4 > height) {
|
||
|
|
total = r1 + r4;
|
||
|
|
r1 *= height / total;
|
||
|
|
r4 *= height / total;
|
||
|
|
}
|
||
|
|
|
||
|
|
ctx.moveTo(x + r1, y);
|
||
|
|
ctx.lineTo(x + width - r2, y);
|
||
|
|
r2 !== 0 && ctx.arc(x + width - r2, y + r2, r2, -Math.PI / 2, 0);
|
||
|
|
ctx.lineTo(x + width, y + height - r3);
|
||
|
|
r3 !== 0 && ctx.arc(x + width - r3, y + height - r3, r3, 0, Math.PI / 2);
|
||
|
|
ctx.lineTo(x + r4, y + height);
|
||
|
|
r4 !== 0 && ctx.arc(x + r4, y + height - r4, r4, Math.PI / 2, Math.PI);
|
||
|
|
ctx.lineTo(x, y + r1);
|
||
|
|
r1 !== 0 && ctx.arc(x + r1, y + r1, r1, Math.PI, Math.PI * 1.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
exports.buildPath = buildPath;
|