open/PainterCore
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5 from lxx2013/patch-1

Browse Source 
fix: rect 的圆角和阴影一起设置的冲突
This commit is contained in:
Chris 2019-11-06 18:22:01 +08:00 committed by GitHub
commit 7e6ebf4878
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
lib/pen.js
View File

@ -270,7 +270,7 @@ export default class Painter {
break;
}
this.ctx.rotate(angle);
if (!notClip && view.css && view.css.borderRadius) {
if (!notClip && view.css && view.css.borderRadius && view.type !== 'rect') {
this._doClip(view.css.borderRadius, width, height);
}
this._doShadow(view);
@ -509,7 +509,18 @@ export default class Painter {
} else {
this.ctx.fillStyle = view.css.color;
}
this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
const borderRadius = view.css.borderRadius
const r = borderRadius ? Math.min(borderRadius.toPx(), width / 2, height / 2) : 0;
this.ctx.beginPath();
this.ctx.arc(-width / 2 + r, -height / 2 + r, r, 1 * Math.PI, 1.5 * Math.PI); //左上角圆弧
this.ctx.lineTo(width / 2 - r, -height / 2);
this.ctx.arc(width / 2 - r, -height / 2 + r, r, 1.5 * Math.PI, 2 * Math.PI); // 右上角圆弧
this.ctx.lineTo(width / 2, height / 2 - r);
this.ctx.arc(width / 2 - r, height / 2 - r, r, 0, 0.5 * Math.PI); // 右下角圆弧
this.ctx.lineTo(-width / 2 + r, height / 2);
this.ctx.arc(-width / 2 + r, height / 2 - r, r, 0.5 * Math.PI, 1 * Math.PI); // 左下角圆弧
this.ctx.closePath();
this.ctx.fill();
this.ctx.restore();
this._doBorder(view, width, height);
}