修复给文字添加背景的相关问题
This commit is contained in:
CPPAlien
parent
e8a9aa275c
commit
a9db40a1ea
133
lib/pen.js
133
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
24
painter.js
24
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user