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

增加align属性

Browse Source
This commit is contained in:
csldev 2018-07-05 18:00:45 +08:00
parent ba362305ef
commit 5e9f28f45d
1 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
lib/pen.js
View File

@ -25,7 +25,10 @@ export default class Painter {
_background() { _background() {
this.ctx.save(); this.ctx.save();
const { width, height } = this.style; const {
width,
height
} = this.style;
const bg = this.data.background; const bg = this.data.background;
this.ctx.translate(width / 2, height / 2); this.ctx.translate(width / 2, height / 2);
@ -84,9 +87,9 @@ export default class Painter {
this.ctx.closePath(); this.ctx.closePath();
this.ctx.fill(); this.ctx.fill();
// 在 ios 的 6.6.6 版本上 clip 有 bug，禁掉此类型上的 clip，也就意味着，在此版本微信的 ios 设备下无法使用 border 属性 // 在 ios 的 6.6.6 版本上 clip 有 bug，禁掉此类型上的 clip，也就意味着，在此版本微信的 ios 设备下无法使用 border 属性
if (!(getApp().systemInfo if (!(getApp().systemInfo &&
&& getApp().systemInfo.version <= '6.6.6' getApp().systemInfo.version <= '6.6.6' &&
&& getApp().systemInfo.platform === 'ios')) { getApp().systemInfo.platform === 'ios')) {
this.ctx.clip(); this.ctx.clip();
} }
} }
@ -112,19 +115,34 @@ export default class Painter {
y = view.css.bottom ? this.style.height - height - view.css.bottom.toPx() : (view.css.top ? view.css.top.toPx() : 0); y = view.css.bottom ? this.style.height - height - view.css.bottom.toPx() : (view.css.top ? view.css.top.toPx() : 0);
} }
const angle = view.css.rotate ? this._getAngle(view.css.rotate) : 0; const angle = view.css.rotate ? this._getAngle(view.css.rotate) : 0;
this.ctx.translate(x + width / 2, y + height / 2); const align = view.css.align ? view.css.align : 'left';
switch (align) {
case 'center':
this.ctx.translate(x, y + height / 2);
break;
case "right":
this.ctx.translate(x - width / 2, y + height / 2);
break;
default:
this.ctx.translate(x + width / 2, y + height / 2);
break;
}
this.ctx.rotate(angle); this.ctx.rotate(angle);
this._doBorder(view.css.borderRadius, width, height); this._doBorder(view.css.borderRadius, width, height);
return { return {
width: width, height: height, x: x, y: y, width: width,
height: height,
x: x,
y: y,
}; };
} }
_drawQRCode(view) { _drawQRCode(view) {
this.ctx.save(); this.ctx.save();
const { const {
width, height, width,
height,
} = this._preProcess(view); } = this._preProcess(view);
QR.api.draw(view.content, this.ctx, -width / 2, -height / 2, width, height, view.css.background); QR.api.draw(view.content, this.ctx, -width / 2, -height / 2, width, height, view.css.background);
this.ctx.restore(); this.ctx.restore();
@ -136,7 +154,8 @@ export default class Painter {
} }
this.ctx.save(); this.ctx.save();
const { const {
width, height, width,
height,
} = this._preProcess(view); } = this._preProcess(view);
this.ctx.drawImage(view.url, -(width / 2), -(height / 2), width, height); this.ctx.drawImage(view.url, -(width / 2), -(height / 2), width, height);
this.ctx.restore(); this.ctx.restore();
@ -148,7 +167,8 @@ export default class Painter {
} }
this.ctx.save(); this.ctx.save();
const { const {
width, height, width,
height,
} = this._preProcess(view); } = this._preProcess(view);
this.ctx.fillText(view.text, -(width / 2), (height / 2)); this.ctx.fillText(view.text, -(width / 2), (height / 2));
@ -158,7 +178,8 @@ export default class Painter {
_drawAbsRect(view) { _drawAbsRect(view) {
this.ctx.save(); this.ctx.save();
const { const {
width, height, width,
height,
} = this._preProcess(view); } = this._preProcess(view);
this.ctx.setFillStyle(view.css.color); this.ctx.setFillStyle(view.css.color);
this.ctx.fillRect(-(width / 2), -(height / 2), width, height); this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
@ -168,4 +189,4 @@ export default class Painter {
_getAngle(angle) { _getAngle(angle) {
return Number(angle) * Math.PI / 180; return Number(angle) * Math.PI / 180;
} }
} }