可获取文本宽度
This commit is contained in:
CPPAlien
parent
a9db40a1ea
commit
ef9e437398
85
lib/pen.js
85
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user