From a9db40a1eaffd52bf34f61b8c7ce40e8614ae94b Mon Sep 17 00:00:00 2001 From: CPPAlien Date: Tue, 29 Jan 2019 11:04:36 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=BB=99=E6=96=87=E5=AD=97?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=83=8C=E6=99=AF=E7=9A=84=E7=9B=B8=E5=85=B3?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/pen.js | 133 ++++++++++++++++++++++++++++------------------------- painter.js | 24 ---------- 2 files changed, 71 insertions(+), 86 deletions(-) diff --git a/lib/pen.js b/lib/pen.js index 22d4d94..0928d03 100644 --- a/lib/pen.js +++ b/lib/pen.js @@ -146,7 +146,7 @@ export default class Painter { let height; let extra; switch (view.type) { - case 'text': { + case 'text': const fontWeight = view.css.fontWeight === 'bold' ? 'bold' : 'normal'; view.css.fontSize = view.css.fontSize ? view.css.fontSize : '20rpx'; this.ctx.font = `normal ${fontWeight} ${view.css.fontSize.toPx()}px ${view.css.fontFamily ? view.css.fontFamily : 'sans-serif'}`; @@ -158,24 +158,25 @@ export default class Painter { const lines = view.css.maxLines < calLines ? view.css.maxLines : calLines; const lineHeight = view.css.lineHeight ? view.css.lineHeight.toPx() : view.css.fontSize.toPx(); height = lineHeight * lines; - extra = { lines: lines, lineHeight: lineHeight }; + extra = { + lines: lines, + lineHeight: lineHeight + }; break; - } - case 'image': { + case 'image': // image 如果未设置长宽，则使用图片本身的长宽 const ratio = getApp().systemInfo.pixelRatio ? getApp().systemInfo.pixelRatio : 2; width = view.css && view.css.width ? view.css.width.toPx() : Math.round(view.sWidth / ratio); height = view.css && view.css.height ? view.css.height.toPx() : Math.round(view.sHeight / ratio); break; - } - default: { + default: if (!(view.css.width && view.css.height)) { console.error('You should set width and height'); return; } width = view.css.width.toPx(); height = view.css.height.toPx(); - } + break; } const x = view.css && view.css.right ? this.style.width - view.css.right.toPx(true) : (view.css && view.css.left ? view.css.left.toPx(true) : 0); const y = view.css && view.css.bottom ? this.style.height - height - view.css.bottom.toPx(true) : (view.css && view.css.top ? view.css.top.toPx(true) : 0); @@ -209,6 +210,56 @@ export default class Painter { }; } + // 画文字的背景图片 + _doBackground(view) { + this.ctx.save(); + const { + width: rawWidth, + height: rawHeight, + } = this._preProcess(view, true); + + let { + background, + padding + } = view.css; + let pd = [0, 0, 0, 0]; + if (padding) { + let pdg = padding.split(/\s+/); + if (pdg.length == 1) { + let x = pdg[0].toPx(); + pd = [x, x, x, x]; + } + if (pdg.length == 2) { + let x = pdg[0].toPx(); + let y = pdg[1].toPx(); + pd = [x, y, x, y]; + } + if (pdg.length == 3) { + let x = pdg[0].toPx(); + let y = pdg[1].toPx(); + let z = pdg[2].toPx(); + pd = [x, y, z, y]; + } + if (pdg.length == 4) { + let x = pdg[0].toPx(); + let y = pdg[1].toPx(); + let z = pdg[2].toPx(); + let a = pdg[3].toPx(); + pd = [x, y, z, a]; + } + } + const width = rawWidth + pd[1] + pd[3]; + const height = rawHeight + pd[0] + pd[2]; + if (GD.api.isGradient(background)) { + GD.api.doGradient(background, width, height, this.ctx); + } else { + this.ctx.setFillStyle(background); + } + this.ctx.fillRect(-(width / 2), -(height / 2), width, height); + + this.ctx.restore(); + } + _drawQRCode(view) { this.ctx.save(); const { @@ -253,60 +304,14 @@ export default class Painter { this.ctx.restore(); this._doBorder(view, width, height); } - _fillAbsTextBackground(view) { - this.ctx.save(); - let { background , padding } = view.css; - const { - width, - height - } = this._preProcess(view); - this.ctx.restore(); - let pd = [0, 0, 0, 0]; - if(padding) { - let pdg = padding.split(' '); - if(pdg.length == 1) { - let x = parseInt(pdg[0]); - pd = [x, x, x, x]; - } - if(pdg.length == 2) { - let x = parseInt(pdg[0]); - let y = parseInt(pdg[1]); - pd = [x, y, x, y]; - } - if(pdg.length == 3) { - let x = parseInt(pdg[0]); - let y = parseInt(pdg[1]); - let z = parseInt(pdg[2]); - pd = [x, y, z, y]; - } - if(pdg.length == 4) { - let x = parseInt(pdg[0]); - let y = parseInt(pdg[1]); - let z = parseInt(pdg[2]); - let a = parseInt(pdg[3]); - pd = [x, y, z, a]; - } - } - let gview = { - type: 'rect', - css: { - top: (parseInt(view.css.top) - pd[0]) + 'rpx', - left: (parseInt(view.css.left) - pd[3]) + 'rpx', - width: ((width + 'px').toRpx() + pd[1] + pd[3]) + 'rpx', - height: ((height + 'px').toRpx() + pd[0] + pd[2]) + 'rpx', - color: background, - borderRadius: view.css.borderRadius || '0rpx' - } - } - this._drawAbsRect(gview); - } + _fillAbsText(view) { if (!view.text) { return; } - if(view.css.background) { + if (view.css.background) { // 生成背景 - this._fillAbsTextBackground(view); + this._doBackground(view); } this.ctx.save(); const { @@ -314,8 +319,12 @@ export default class Painter { height, extra, } = this._preProcess(view); + this.ctx.setFillStyle(view.css.color || 'black'); - const { lines, lineHeight } = extra; + const { + lines, + lineHeight + } = extra; const preLineLength = Math.round(view.text.length / lines); let start = 0; let alreadyCount = 0; @@ -410,14 +419,14 @@ export default class Painter { this._doBorder(view, width, height); } - // shadow 支持 (x, y, blur, color), 不支持 spread - // shadow:0px 0px 10px rgba(0,0,0,0.1); + // shadow 支持 (x, y, blur, color), 不支持 spread + // shadow:0px 0px 10px rgba(0,0,0,0.1); _doShadow(view) { - if(!view.css || !view.css.shadow){ + if (!view.css || !view.css.shadow) { return; } let box = view.css.shadow.replace(/,\s+/g, ',').split(' '); - if(box.length > 4) { + if (box.length > 4) { console.error('shadow don\'t spread option'); return; } @@ -430,4 +439,4 @@ export default class Painter { _getAngle(angle) { return Number(angle) * Math.PI / 180; } -} +} \ No newline at end of file diff --git a/painter.js b/painter.js index c024c4a..61b669d 100644 --- a/painter.js +++ b/painter.js @@ -235,28 +235,4 @@ function setStringPrototype() { } return res; }; - String.prototype.toRpx = function (minus) { - let reg; - if (minus) { - reg = /^-?[0-9]+([.]{1}[0-9]+){0,1}(rpx|px)$/g; - } else { - reg = /^[0-9]+([.]{1}[0-9]+){0,1}(rpx|px)$/g; - } - const results = reg.exec(this); - if (!this || !results) { - console.error(`The size: ${this} is illegal`); - return 0; - } - const unit = results[2]; - const value = parseFloat(this); - - let res = 0; - if (unit === 'rpx') { - res = Math.round(value); - } else if (unit === 'px') { - res = Math.round(value / screenK); - } - return res; - } - }