open/PainterCore
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

image 加入默认长宽的情况和修改readme

Browse Source
This commit is contained in:
CPPAlien 2018-08-07 15:28:35 +08:00
parent be73cec423
commit a2d03ea50d
1 changed files with 41 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
lib/pen.js
View File

@ -47,7 +47,7 @@ export default class Painter {
_drawAbsolute(view) { _drawAbsolute(view) {
// 证明 css 为数组形式，需要合并 // 证明 css 为数组形式，需要合并
if (view.css.length) { if (view.css && view.css.length) {
/* eslint-disable no-param-reassign */ /* eslint-disable no-param-reassign */
view.css = Object.assign(...view.css); view.css = Object.assign(...view.css);
} }
@ -103,6 +103,9 @@ export default class Painter {
* 画边框 * 画边框
*/ */
_doBorder(view, width, height) { _doBorder(view, width, height) {
if (!view.css) {
return;
}
const { const {
borderRadius, borderRadius,
borderWidth, borderWidth,
@ -138,38 +141,45 @@ export default class Painter {
_preProcess(view, notClip) { _preProcess(view, notClip) {
let width; let width;
let height; let height;
let x;
let y;
let extra; let extra;
if (view.type === 'text') { switch (view.type) {
const fontWeight = view.css.fontWeight === 'bold' ? 'bold' : 'normal'; case 'text': {
view.css.fontSize = view.css.fontSize ? view.css.fontSize : '20rpx'; const fontWeight = view.css.fontWeight === 'bold' ? 'bold' : 'normal';
this.ctx.font = `normal ${fontWeight} ${view.css.fontSize.toPx()}px sans-serif`; view.css.fontSize = view.css.fontSize ? view.css.fontSize : '20rpx';
// this.ctx.setFontSize(view.css.fontSize.toPx()); this.ctx.font = `normal ${fontWeight} ${view.css.fontSize.toPx()}px sans-serif`;
const textLength = this.ctx.measureText(view.text).width; // this.ctx.setFontSize(view.css.fontSize.toPx());
width = view.css.width ? view.css.width.toPx() : textLength; const textLength = this.ctx.measureText(view.text).width;
// 计算行数 width = view.css.width ? view.css.width.toPx() : textLength;
const calLines = Math.ceil(textLength / width); // 计算行数
const lines = view.css.maxLines < calLines ? view.css.maxLines : calLines; const calLines = Math.ceil(textLength / width);
const lineHeight = view.css.lineHeight ? view.css.lineHeight.toPx() : view.css.fontSize.toPx(); const lines = view.css.maxLines < calLines ? view.css.maxLines : calLines;
height = lineHeight * lines; const lineHeight = view.css.lineHeight ? view.css.lineHeight.toPx() : view.css.fontSize.toPx();
height = lineHeight * lines;
x = view.css.right ? this.style.width - view.css.right.toPx(true) : (view.css.left ? view.css.left.toPx(true) : 0); extra = { lines: lines, lineHeight: lineHeight };
y = view.css.bottom ? this.style.height - height - view.css.bottom.toPx(true) : (view.css.top ? view.css.top.toPx(true) : 0); break;
extra = { lines: lines, lineHeight: lineHeight }; }
} else { case 'image': {
if (!(view.css.width && view.css.height)) { // image 如果未设置长宽，则使用图片本身的长宽
console.error('You should set width and height'); const ratio = getApp().systemInfo.pixelRatio ? getApp().systemInfo.pixelRatio : 2;
return; 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');
return;
}
width = view.css.width.toPx();
height = view.css.height.toPx();
} }
width = view.css.width.toPx();
height = view.css.height.toPx();
x = view.css.right ? this.style.width - view.css.right.toPx(true) : (view.css.left ? view.css.left.toPx(true) : 0);
y = view.css.bottom ? this.style.height - height - view.css.bottom.toPx(true) : (view.css.top ? view.css.top.toPx(true) : 0);
} }
const angle = view.css.rotate ? this._getAngle(view.css.rotate) : 0; 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);
const angle = view.css && view.css.rotate ? this._getAngle(view.css.rotate) : 0;
// 当设置了 right 时，默认 align 用 right，反之用 left // 当设置了 right 时，默认 align 用 right，反之用 left
const align = view.css.align ? view.css.align : (view.css.right ? 'right' : 'left'); const align = view.css && view.css.align ? view.css.align : (view.css && view.css.right ? 'right' : 'left');
switch (align) { switch (align) {
case 'center': case 'center':
this.ctx.translate(x, y + height / 2); this.ctx.translate(x, y + height / 2);
@ -182,7 +192,7 @@ export default class Painter {
break; break;
} }
this.ctx.rotate(angle); this.ctx.rotate(angle);
if (!notClip) { if (!notClip && view.css && view.css.borderRadius) {
this._doClip(view.css.borderRadius, width, height); this._doClip(view.css.borderRadius, width, height);
} }
@ -233,7 +243,7 @@ export default class Painter {
if (view.sHeight > rHeight) { if (view.sHeight > rHeight) {
startY = Math.round((view.sHeight - rHeight) / 2); startY = Math.round((view.sHeight - rHeight) / 2);
} }
if (view.css.mode === 'scaleToFill') { if (view.css && view.css.mode === 'scaleToFill') {
this.ctx.drawImage(view.url, -(width / 2), -(height / 2), width, height); this.ctx.drawImage(view.url, -(width / 2), -(height / 2), width, height);
} else { } else {
this.ctx.drawImage(view.url, startX, startY, rWidth, rHeight, -(width / 2), -(height / 2), width, height); this.ctx.drawImage(view.url, startX, startY, rWidth, rHeight, -(width / 2), -(height / 2), width, height);