diff --git a/lib/pen.js b/lib/pen.js index 0928d03..161b1f2 100644 --- a/lib/pen.js +++ b/lib/pen.js @@ -5,6 +5,7 @@ export default class Painter { constructor(ctx, data) { this.ctx = ctx; this.data = data; + this.globalTextWidth = {}; } paint(callback) { @@ -94,8 +95,8 @@ export default class Painter { 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')) { + getApp().systemInfo.version <= '6.6.6' && + getApp().systemInfo.platform === 'ios')) { this.ctx.clip(); } this.ctx.setGlobalAlpha(1); @@ -146,7 +147,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'}`; @@ -160,15 +161,17 @@ export default class Painter { height = lineHeight * lines; extra = { lines: lines, - lineHeight: lineHeight + 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: if (!(view.css.width && view.css.height)) { console.error('You should set width and height'); @@ -178,7 +181,26 @@ export default class Painter { 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); + let x; + if (view.css && view.css.right) { + if (typeof view.css.right === 'string') { + x = this.style.width - view.css.right.toPx(true); + } else { + // 可以用数组方式,把文字长度计算进去 + // [right, 文字id, 乘数(默认 1)] + const rights = view.css.right; + x = this.style.width - rights[0].toPx(true) - this.globalTextWidth[rights[1]] * (rights[2] || 1); + } + } else if (view.css && view.css.left) { + if (typeof view.css.left === 'string') { + x = view.css.left.toPx(true); + } else { + const lefts = view.css.left; + x = lefts[0].toPx(true) + this.globalTextWidth[lefts[1]] * (lefts[2] || 1); + } + } else { + x = 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); const angle = view.css && view.css.rotate ? this._getAngle(view.css.rotate) : 0; @@ -218,33 +240,33 @@ export default class Painter { height: rawHeight, } = this._preProcess(view, true); - let { + const { background, - padding + 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(); + const pdg = padding.split(/\s+/); + if (pdg.length === 1) { + const x = pdg[0].toPx(); pd = [x, x, x, x]; } - if (pdg.length == 2) { - let x = pdg[0].toPx(); - let y = pdg[1].toPx(); + if (pdg.length === 2) { + const x = pdg[0].toPx(); + const 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(); + if (pdg.length === 3) { + const x = pdg[0].toPx(); + const y = pdg[1].toPx(); + const 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(); + if (pdg.length === 4) { + const x = pdg[0].toPx(); + const y = pdg[1].toPx(); + const z = pdg[2].toPx(); + const a = pdg[3].toPx(); pd = [x, y, z, a]; } } @@ -323,11 +345,16 @@ export default class Painter { this.ctx.setFillStyle(view.css.color || 'black'); const { lines, - lineHeight + lineHeight, } = extra; const preLineLength = Math.round(view.text.length / lines); let start = 0; let alreadyCount = 0; + // 如果设置了id,则保留 text 的长度 + if (view.id) { + const textWidth = this.ctx.measureText(view.text).width; + this.globalTextWidth[view.id] = width ? (textWidth < width ? textWidth : width) : textWidth; + } for (let i = 0; i < lines; ++i) { alreadyCount = preLineLength; let text = view.text.substr(start, alreadyCount); @@ -425,18 +452,18 @@ export default class Painter { if (!view.css || !view.css.shadow) { return; } - let box = view.css.shadow.replace(/,\s+/g, ',').split(' '); + const box = view.css.shadow.replace(/,\s+/g, ',').split(' '); if (box.length > 4) { console.error('shadow don\'t spread option'); return; } - this.ctx.shadowOffsetX = parseInt(box[0]) - this.ctx.shadowOffsetY = parseInt(box[1]) - this.ctx.shadowBlur = parseInt(box[2]) + this.ctx.shadowOffsetX = parseInt(box[0], 10); + this.ctx.shadowOffsetY = parseInt(box[1], 10); + this.ctx.shadowBlur = parseInt(box[2], 10); this.ctx.shadowColor = box[3]; } _getAngle(angle) { return Number(angle) * Math.PI / 180; } -} \ No newline at end of file +}