| export 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.quadraticCurveTo(x + width, y, x + width, y + r2); |
| ctx.lineTo(x + width, y + height - r3); |
| r3 !== 0 && ctx.quadraticCurveTo(x + width, y + height, x + width - r3, y + height); |
| ctx.lineTo(x + r4, y + height); |
| r4 !== 0 && ctx.quadraticCurveTo(x, y + height, x, y + height - r4); |
| ctx.lineTo(x, y + r1); |
| r1 !== 0 && ctx.quadraticCurveTo(x, y, x + r1, y); |
| } |