| 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;
 |