42 lines
1.3 KiB
JavaScript
42 lines
1.3 KiB
JavaScript
/** 绘制圆角矩形原型方法 */
|
||
export default {
|
||
name: 'roundRect',
|
||
handle: (canvas, ctx, x, y, w, h, r = 15, fill = false, stroke = false) => {
|
||
if (r === 0) {
|
||
if (stroke)
|
||
ctx.strokeRect(x, y, w, h);
|
||
if (fill)
|
||
ctx.fillRect(x, y, w, h);
|
||
return;
|
||
}
|
||
if (w < 2 * r) {
|
||
r = w / 2;
|
||
}
|
||
if (h < 2 * r) {
|
||
r = h / 2;
|
||
}
|
||
// 开始绘制
|
||
ctx.beginPath();
|
||
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
|
||
// 移动复制
|
||
ctx.moveTo(x + r, y);
|
||
ctx.lineTo(x + w - r, y);
|
||
ctx.lineTo(x + w, y + r);
|
||
// (x,y,z,j,f) x,y圆心z半径,j起始弧度f，终止弧度
|
||
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
|
||
ctx.lineTo(x + w, y + h - r);
|
||
ctx.lineTo(x + w - r, y + h);
|
||
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
|
||
ctx.lineTo(x + r, y + h);
|
||
ctx.lineTo(x, y + h - r);
|
||
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
|
||
ctx.lineTo(x, y + r);
|
||
ctx.lineTo(x + r, y);
|
||
if (stroke)
|
||
ctx.stroke();
|
||
if (fill)
|
||
ctx.fill();
|
||
ctx.closePath();
|
||
}
|
||
};
|