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