123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- /**
- * @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;
|