微信小程序生成海报Demo

const GD = require('./gradient.js'); export default class Painter { constructor(ctx, data) { this.ctx = ctx; this.data = data; this.globalWidth = {}; this.globalHeight = {}; } isMoving = false movingCache = {} paint(callback, isMoving, movingCache) { this.style = { width: this.data.width.toPx(), height: this.data.height.toPx(), }; if (isMoving) { this.isMoving = true this.movingCache = movingCache } this._background(); for (const view of this.data.views) { this._drawAbsolute(view); } this.ctx.draw(false, () => { callback && callback(this.callbackInfo); }); } _background() { this.ctx.save(); const { width, height, } = this.style; const bg = this.data.background; this.ctx.translate(width / 2, height / 2); this._doClip(this.data.borderRadius, width, height); if (!bg) { // 如果未设置背景，则默认使用透明色 this.ctx.fillStyle = 'transparent'; this.ctx.fillRect(-(width / 2), -(height / 2), width, height); } else if (bg.startsWith('#') || bg.startsWith('rgba') || bg.toLowerCase() === 'transparent') { // 背景填充颜色 this.ctx.fillStyle = bg; this.ctx.fillRect(-(width / 2), -(height / 2), width, height); } else if (GD.api.isGradient(bg)) { GD.api.doGradient(bg, width, height, this.ctx); this.ctx.fillRect(-(width / 2), -(height / 2), width, height); } else { // 背景填充图片 this.ctx.drawImage(bg, -(width / 2), -(height / 2), width, height); } this.ctx.restore(); } _drawAbsolute(view) { if (!(view && view.type)) { // 过滤无效 view return } // 证明 css 为数组形式，需要合并 if (view.css && view.css.length) { /* eslint-disable no-param-reassign */ view.css = Object.assign(...view.css); } switch (view.type) { case 'image': this._drawAbsImage(view); break; case 'text': this._fillAbsText(view); break; case 'rect': this._drawAbsRect(view); break; default: break; } } _border({ borderRadius = 0, width, height, borderWidth = 0, borderStyle = 'solid' }) { let r1 = 0, r2 = 0, r3 = 0, r4 = 0 const minSize = Math.min(width, height); if (borderRadius) { const border = borderRadius.split(/\s+/) if (border.length === 4) { r1 = Math.min(border[0].toPx(false, minSize), width / 2, height / 2); r2 = Math.min(border[1].toPx(false, minSize), width / 2, height / 2); r3 = Math.min(border[2].toPx(false, minSize), width / 2, height / 2); r4 = Math.min(border[3].toPx(false, minSize), width / 2, height / 2); } else { r1 = r2 = r3 = r4 = Math.min(borderRadius && borderRadius.toPx(false, minSize), width / 2, height / 2); } } const lineWidth = borderWidth && borderWidth.toPx(false, minSize); this.ctx.lineWidth = lineWidth; if (borderStyle === 'dashed') { this.ctx.setLineDash([lineWidth * 4 / 3, lineWidth * 4 / 3]); // this.ctx.lineDashOffset = 2 * lineWidth } else if (borderStyle === 'dotted') { this.ctx.setLineDash([lineWidth, lineWidth]); } const notSolid = borderStyle !== 'solid' this.ctx.beginPath(); notSolid && r1 === 0 && this.ctx.moveTo(-width / 2 - lineWidth, -height / 2 - lineWidth / 2) // 顶边虚线规避重叠规则 r1 !== 0 && this.ctx.arc(-width / 2 + r1, -height / 2 + r1, r1 + lineWidth / 2, 1 * Math.PI, 1.5 * Math.PI); //左上角圆弧 this.ctx.lineTo(r2 === 0 ? notSolid ? width / 2 : width / 2 + lineWidth / 2 : width / 2 - r2, -height / 2 - lineWidth / 2); // 顶边线 notSolid && r2 === 0 && this.ctx.moveTo(width / 2 + lineWidth / 2, -height / 2 - lineWidth) // 右边虚线规避重叠规则 r2 !== 0 && this.ctx.arc(width / 2 - r2, -height / 2 + r2, r2 + lineWidth / 2, 1.5 * Math.PI, 2 * Math.PI); // 右上角圆弧 this.ctx.lineTo(width / 2 + lineWidth / 2, r3 === 0 ? notSolid ? height / 2 : height / 2 + lineWidth / 2 : height / 2 - r3); // 右边线 notSolid && r3 === 0 && this.ctx.moveTo(width / 2 + lineWidth, height / 2 + lineWidth / 2) // 底边虚线规避重叠规则 r3 !== 0 && this.ctx.arc(width / 2 - r3, height / 2 - r3, r3 + lineWidth / 2, 0, 0.5 * Math.PI); // 右下角圆弧 this.ctx.lineTo(r4 === 0 ? notSolid ? -width / 2 : -width / 2 - lineWidth / 2 : -width / 2 + r4, height / 2 + lineWidth / 2); // 底边线 notSolid && r4 === 0 && this.ctx.moveTo(-width / 2 - lineWidth / 2, height / 2 + lineWidth) // 左边虚线规避重叠规则 r4 !== 0 && this.ctx.arc(-width / 2 + r4, height / 2 - r4, r4 + lineWidth / 2, 0.5 * Math.PI, 1 * Math.PI); // 左下角圆弧 this.ctx.lineTo(-width / 2 - lineWidth / 2, r1 === 0 ? notSolid ? -height / 2 : -height / 2 - lineWidth / 2 : -height / 2 + r1); // 左边线 notSolid && r1 === 0 && this.ctx.moveTo(-width / 2 - lineWidth, -height / 2 - lineWidth / 2) // 顶边虚线规避重叠规则 if (!notSolid) { this.ctx.closePath(); } } /** * 根据 borderRadius 进行裁减 */ _doClip(borderRadius, width, height, borderStyle) { if (borderRadius && width && height) { // 防止在某些机型上周边有黑框现象，此处如果直接设置 fillStyle 为透明，在 Android 机型上会导致被裁减的图片也变为透明， iOS 和 IDE 上不会 // globalAlpha 在 1.9.90 起支持，低版本下无效，但把 fillStyle 设为了 white，相对默认的 black 要好点 this.ctx.globalAlpha = 0; this.ctx.fillStyle = 'white'; this._border({ borderRadius, width, height, borderStyle }) 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')) { this.ctx.clip(); } this.ctx.globalAlpha = 1; } } /** * 画边框 */ _doBorder(view, width, height) { if (!view.css) { return; } const { borderRadius, borderWidth, borderColor, borderStyle } = view.css; if (!borderWidth) { return; } this.ctx.save(); this._preProcess(view, true); this.ctx.strokeStyle = (borderColor || 'black'); this._border({ borderRadius, width, height, borderWidth, borderStyle }) this.ctx.stroke(); this.ctx.restore(); } _preProcess(view, notClip) { let width = 0; let height; let extra; const paddings = this._doPaddings(view); switch (view.type) { case 'text': { const textArray = view.text.split('\n'); // 处理多个连续的'\n' for (let i = 0; i < textArray.length; ++i) { if (textArray[i] === '') { textArray[i] = ' '; } } const fontWeight = view.css.fontWeight === 'bold' ? 'bold' : 'normal'; const textStyle = view.css.textStyle === 'italic' ? 'italic' : 'normal'; if (!view.css.fontSize) { view.css.fontSize = '20rpx'; } this.ctx.font = `${textStyle} ${fontWeight} ${view.css.fontSize.toPx()}px ${view.css.fontFamily ? view.css.fontFamily : 'sans-serif'}`; // 计算行数 let lines = 0; const linesArray = []; for (let i = 0; i < textArray.length; ++i) { const textLength = this.ctx.measureText(textArray[i]).width; const minWidth = view.css.fontSize.toPx() + paddings[1] + paddings[3]; let partWidth = view.css.width ? view.css.width.toPx(false, this.style.width) - paddings[1] - paddings[3] : textLength; if (partWidth < minWidth) {