更新canvas组件

components/lime-painter/canvas.js

@@ -1,42 +1,5 @@
-import { CHAR_WIDTH_SCALE_MAP } from './utils'
-const _expand = ctx => {
-	// #ifndef APP-PLUS
-	ctx._measureText = ctx.measureText
-	// #endif
-	return {
-		setFont({fontFamily: ff = 'sans-serif', fontSize: fs = 14, fontWeight: fw = 'normal' , textStyle: ts = 'normal'}) {
-			// let ctx = this.ctx
-			// 设置属性
-			// #ifndef MP-TOUTIAO
-			// fw = fw == 'bold' ? 'bold' : 'normal'
-			// ts = ts == 'italic' ? 'italic' : 'normal'
-			// #endif
-			// #ifdef MP-TOUTIAO
-			fw = fw == 'bold' ? 'bold' : ''
-			ts =  ts == 'italic' ? 'italic' : ''
-			// #endif
-			// fs = toPx(fs)
-			ctx.font = `${ts} ${fw} ${fs}px ${ff}`;
-		},
-		// #ifndef APP-PLUS
-		measureText(text, fontSize) {
-			// app measureText为0需要累加计算0
-			return {
-				width: text.split("").reduce((widthScaleSum, char) => {
-				let code = char.charCodeAt(0);
-				let widthScale = CHAR_WIDTH_SCALE_MAP[code - 0x20] || 1;
-				return widthScaleSum + widthScale;
-			  }, 0) * fontSize
-			};
-		}
-		// #endif
-	}
-}
-export function expand(ctx) {
-	return Object.assign(ctx, _expand(ctx))
-}
 export function adaptor(ctx) {
-	return Object.assign(ctx, _expand(ctx), {
+	return Object.assign(ctx, {
 		setStrokeStyle(val) {
 			ctx.strokeStyle = val;
 		},
@@ -76,4 +39,4 @@ export function adaptor(ctx) {
 		createCircularGradient() {},
 		draw() {},
 	});
-}
+}

components/lime-painter/draw.js

@@ -1,14 +1,15 @@
-import { toPx, isNumber, getImageInfo  } from './utils'
+import { toPx, CHAR_WIDTH_SCALE_MAP, isNumber, getImageInfo  } from './utils'
 import { GD } from './gradient'
 import QR from './qrcode'
+let id = 0
 
 export class Draw {
-	constructor(context, canvas, use2dCanvas = false, isH5PathToBase64 = false, sleep) {
+	constructor(context, canvas, use2dCanvas = false, isH5PathToBase64 = false, boundary) {
 		this.ctx = context
 		this.canvas = canvas || null
+		this.root = boundary
 		this.use2dCanvas = use2dCanvas
 		this.isH5PathToBase64 = isH5PathToBase64
-		this.sleep = sleep
 	}
 	roundRect(x, y, w, h, r, fill = false, stroke = false, ) {
 		if (r < 0) return
@@ -25,6 +26,7 @@ export class Draw {
 				borderBottomRightRadius: br = r || 0,
 				borderBottomLeftRadius: bl = r || 0
 			} = r || {r,r,r,r}
+			ctx.beginPath()
 			// 右下角
 			ctx.arc(x + w - br, y + h - br, br, 0, Math.PI * 0.5)
 			ctx.lineTo(x + bl, y + h)
@@ -42,6 +44,34 @@ export class Draw {
 		if (stroke) ctx.stroke()
 		if (fill) ctx.fill()
 	}
+	measureText(text, fontSize) {
+		const { ctx } = this
+		// #ifndef APP-PLUS
+		return ctx.measureText(text).width
+		// #endif
+		// #ifdef APP-PLUS
+		// app measureText为0需要累加计算0
+		return text.split("").reduce((widthScaleSum, char) => {
+			let code = char.charCodeAt(0);
+			let widthScale = CHAR_WIDTH_SCALE_MAP[code - 0x20] || 1;
+			return widthScaleSum + widthScale;
+		  }, 0) * fontSize;
+		// #endif
+	}
+	setFont({fontFamily: ff = 'sans-serif', fontSize: fs = 14, fontWeight: fw = 'normal' , textStyle: ts = 'normal'}) {
+		let ctx = this.ctx
+		// 设置属性
+		// #ifndef MP-TOUTIAO
+		// fw = fw == 'bold' ? 'bold' : 'normal'
+		// ts = ts == 'italic' ? 'italic' : 'normal'
+		// #endif
+		// #ifdef MP-TOUTIAO
+		fw = fw == 'bold' ? 'bold' : ''
+		ts =  ts == 'italic' ? 'italic' : ''
+		// #endif
+		// fs = toPx(fs)
+		ctx.font = `${ts} ${fw} ${fs}px ${ff}`;
+	}
 	setTransform(box, {transform}) {
 		const {ctx} = this
 		const {
@@ -88,11 +118,13 @@ export class Draw {
 		}
 	}
 	setShadow({boxShadow: bs = []}) {
+		// #ifndef APP-NVUE
 		const {ctx} = this
 		if (bs.length) {
 			const [x, y, b, c] = bs
 			ctx.setShadow(x, y, b, c)
 		}
+		// #endif
 	}
 	setBorder(box, style) {
 		const {ctx} = this
@@ -231,10 +263,8 @@ export class Draw {
 			const {
 				borderRadius = 0,
 				mode,
-				padding = {},
 				backgroundColor: bg,
 			} = style
-			const {paddingTop: pt = 0, paddingLeft: pl= 0, paddingRight: pr= 0, paddingBottom: pb = 0} = padding
 			let {
 				left: x,
 				top: y,
@@ -253,10 +283,6 @@ export class Draw {
 			}
 			ctx.clip()
 			const _modeImage = (img) => {
-				x += pl
-				y += pt
-				w = w - pl - pr
-				h = h - pt - pb
 				// 获得图片原始大小
 				let rWidth = img.width
 				let rHeight = img.height
@@ -265,33 +291,17 @@ export class Draw {
 				// 绘画区域比例
 				const cp = w / h
 				// 原图比例
-				// 如果大于1 是宽度长
-				// 如果小于1 是高度长
 				const op = rWidth / rHeight
-				
+				if (cp >= op) {
+					rHeight = rWidth / cp;
+					// startY = Math.round((h - rHeight) / 2)
+				} else {
+					rWidth = rHeight * cp;
+					startX = Math.round(((img.width || w) - rWidth) / 2)
+				}
 				if (mode === 'scaleToFill' || !img.width) {
 					ctx.drawImage(img.src, x, y, w, h);
-				} else if(mode === 'aspectFit') {
-					if(cp >= op) {
-						rWidth = h * op;
-						rHeight = h
-						startX = x + Math.round(w - rWidth) / 2 
-						startY = y
-					} else {
-						rWidth = w
-						rHeight = w / op;
-						startX = x
-						startY = y + Math.round(h - rHeight) / 2 
-					}
-					ctx.drawImage(img.src, startX, startY, rWidth, rHeight);
 				} else {
-					if (cp >= op) {
-						rHeight = rWidth / cp;
-						// startY = Math.round((h - rHeight) / 2)
-					} else {
-						rWidth = rHeight * cp;
-						startX = Math.round(((img.width || w) - rWidth) / 2)
-					}
 					// 百度小程序 开发工具 顺序有问题 暂不知晓真机
 					// #ifdef MP-BAIDU
 					ctx.drawImage(img.src, x, y, w, h, startX, startY, rWidth, rHeight)
@@ -324,7 +334,7 @@ export class Draw {
 				this.setBorder(box, style)
 				setTimeout(() => {
 					resolve(true)
-				}, this.sleep)
+				}, this.root.sleep)
 			}
 			if(typeof img === 'string') {
 				const {path: src, width, height} = await getImageInfo(img, this.isH5PathToBase64)
@@ -354,31 +364,24 @@ export class Draw {
 			verticalAlign: va = 'top',
 			backgroundColor: bg,
 			maxLines,
-			display,
-			padding = {},
-			borderRadius = 0,
 			textDecoration: td
 		} = style
-		const {paddingTop: pt = 0, paddingLeft: pl = 0} = padding
 		lineHeight = toPx(lineHeight, fontSize)
 		
 		if (!text) return
 		ctx.save()
+		
 		this.setOpacity(style)
 		this.setTransform(box, style)
 		x = -w/2
 		y = -h/2
 		ctx.setTextBaseline(va)
-		ctx.setFont({fontFamily, fontSize, fontWeight, textStyle})
+		this.setFont({fontFamily, fontSize, fontWeight, textStyle})
 		ctx.setTextAlign(textAlign)
 		
 		if(bg) {
 			this.setBackground(bg, w, h)
-			this.roundRect(x, y, w, h, borderRadius, 1, 0)
-		 }
-		 if(display && display.includes('lock')) {
-			x += pl
-			y += pt 
+			this.roundRect(x, y, w, h, 1, bg)
 		 }
 		this.setShadow(style)
 		ctx.setFillStyle(color)
@@ -415,7 +418,7 @@ export class Draw {
 			default:
 				break
 		}
-		const textWidth = ctx.measureText(text, fontSize).width
+		const textWidth = this.measureText(text, fontSize)
 		const actualHeight = Math.ceil(textWidth / w) * lineHeight
 		let paddingTop = Math.ceil((h - actualHeight) / 2)
 		if (paddingTop < 0) paddingTop = 0
@@ -494,6 +497,7 @@ export class Draw {
 				ctx.stroke();
 			}
 		}
+		
 		const _reset = (text, x, y) => {
 			const rs = Object.keys(rulesObj)
 			for (let i = 0; i < rs.length; i++) {
@@ -509,9 +513,9 @@ export class Draw {
 		}
 		const _setText = (isReset, char) => {
 			if(isReset) {
-				const t1 = Math.round(ctx.measureText('\u0020', fontSize).width)
-				const t2 = Math.round(ctx.measureText('\u3000', fontSize).width)
-				const t3 = Math.round(ctx.measureText(char, fontSize).width)
+				const t1 = Math.round(this.measureText('\u0020', fontSize))
+				const t2 = Math.round(this.measureText('\u3000', fontSize))
+				const t3 = Math.round(this.measureText(char, fontSize))
 				let _char = ''
 				let _num = 1
 				if(t3 == t2){
@@ -543,7 +547,7 @@ export class Draw {
 					const t = _text[index]
 					let char = _setText(rulesObj[index], t) 
 					_text[index] = char
-					_setRulesObj(t, index, x + ctx.measureText(text.substring(0, index), fontSize).width, y + inlinePaddingTop)
+					_setRulesObj(t, index, x + this.measureText(text.substring(0, index), fontSize), y + inlinePaddingTop)
 				}
 				_reset()
 			}
@@ -561,6 +565,7 @@ export class Draw {
 		// 逐行绘制
 		let line = ''
 		let lineIndex = 0
+		
 		for(let index = 0 ; index <= chars.length; index++){
 			let ch = chars[index] || ''
 			const isLine = ch === '\n'
@@ -568,7 +573,9 @@ export class Draw {
 			ch = isLine ? '' : ch;
 			
 			let textline = line + _setText(rulesObj[index], ch)
-			let textWidth = ctx.measureText(textline, fontSize).width
+			let textWidth = this.measureText(textline, fontSize)
+			
+			
 			// 绘制行数大于最大行数，则直接跳出循环
 			if (lineIndex >= maxLines) {
 				break;
@@ -581,13 +588,13 @@ export class Draw {
 				_x = x
 			}
 			if(rulesObj[index]) {
-				_setRulesObj(ch, index, _x + ctx.measureText(line, fontSize).width, y + inlinePaddingTop)
+				_setRulesObj(ch, index, _x + this.measureText(line, fontSize), y + inlinePaddingTop)
 			}
 			if (textWidth > w || isLine || isRight) {
 				lineIndex++
 				line = isRight && textWidth <= w ? textline : line
 				if(lineIndex === maxLines && textWidth > w) {
-					while( ctx.measureText(`${line}...`, fontSize).width > w) {
+					while( this.measureText(`${line}...`, fontSize) > w) {
 						if (line.length <= 1) {
 							// 如果只有一个字符时，直接跳出循环
 							break;
@@ -615,6 +622,300 @@ export class Draw {
 		ctx.restore()
 		this.setBorder(box, style)
 	}
+	async findNode(element, parent = {}, index = 0, siblings = [], source) {
+		let computedStyle = Object.assign({}, this.getComputedStyle(element, parent, index));
+		let attributes = await this.getAttributes(element)
+		let node = {
+			id: id++,
+			parent,
+			computedStyle,
+			rules: element.rules,
+			attributes: Object.assign({}, attributes),
+			name: element?.type || 'view',
+		}
+		if(JSON.stringify(parent) === '{}' && !element.type) {
+			const {left = 0, top = 0, width = 0, height = 0 } = computedStyle
+			node.layoutBox = {left, top, width, height }
+		} else {
+			node.layoutBox = Object.assign({left: 0, top: 0}, this.getLayoutBox(node, parent, index, siblings, source))
+		}
+		
+		if (element?.views) {
+			let childrens = []
+			node.children = []
+			for (let i = 0; i < element.views.length; i++) {
+				let v = element.views[i]
+				childrens.push(await this.findNode(v, node, i, childrens, element))
+			}
+			 node.children = childrens
+		}
+		return node
+	}
+	getComputedStyle(element, parent = {}, index = 0) {
+		const style = {}
+		const name = element.name || element.type
+		let node = JSON.stringify(parent) == '{}' && !name ? element :  element.css;
+		const inheritProps = ['color', 'fontSize', 'lineHeight', 'verticalAlign', 'fontWeight', 'textAlign']
+		if(parent.computedStyle) {
+			inheritProps.forEach(prop => {
+			  node[prop] = node[prop] || parent.computedStyle[prop]
+			})
+		}
+		if(!node) return style
+		for (let value of Object.keys(node)) {
+			const item = node[value]
+			if(value == 'views') {
+				continue
+			}
+			if (['boxShadow', 'shadow'].includes(value)) {
+				let shadows = item.split(' ').map(v => /^\d/.test(v) ? toPx(v) : v)
+				style.boxShadow = shadows
+				continue
+			}
+			if (value.includes('border') && !value.includes('adius')) {
+				const prefix = value.match(/^border([BTRLa-z]+)?/)[0]
+				const type = value.match(/[W|S|C][a-z]+/)
+				let v = item.split(' ').map(v => /^\d/.test(v) ? toPx(v) : v)
+				
+				if(v.length > 1) {
+					style[prefix] = {
+						[prefix + 'Width'] : v[0] || 1,
+						[prefix + 'Style'] : v[1] || 'solid',
+						[prefix + 'Color'] : v[2] || 'black'
+					}
+				} else {
+					style[prefix] = {
+						[prefix + 'Width'] :  1,
+						[prefix + 'Style'] : 'solid',
+						[prefix + 'Color'] : 'black'
+					}
+					style[prefix][prefix + type[0]] = v[0]
+				}
+				continue
+			}
+			if (['background', 'backgroundColor'].includes(value)) {
+				style['backgroundColor'] = item
+				continue
+			}
+			if(value.includes('padding') || value.includes('margin') || value.includes('adius')) {
+				let isRadius = value.includes('adius')
+				let prefix = isRadius ? 'borderRadius' : value.match(/[a-z]+/)[0]
+				let pre = [0,0,0,0].map((item, i) => isRadius ? ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'][i] : [prefix + 'Top', prefix + 'Right', prefix + 'Bottom', prefix + 'Left'][i] )
+				if(value === 'padding' || value === 'margin' || value === 'radius' || value === 'borderRadius') {
+					let v = item?.split(' ').map((item) => /^\d/.test(item) && toPx(item, node['width']), []) ||[0];
+					let type = isRadius ? 'borderRadius' : value;
+					if(v.length == 1) {
+						style[type] = v[0]
+					} else {
+						let [t, r, b, l] = v
+						style[type] = {
+							[pre[0]]: t,
+							[pre[1]]: isNumber(r) ? r : t,
+							[pre[2]]: isNumber(b) ? b : t,
+							[pre[3]]: isNumber(l) ? l : r
+						}
+					}
+				} else {
+					if(typeof style[prefix] === 'object') {
+						style[prefix][value] = toPx(item, node['width'])
+					} else {
+						style[prefix] = {
+							[pre[0]]: style[prefix] || 0,
+							[pre[1]]: style[prefix] || 0,
+							[pre[2]]: style[prefix] || 0,
+							[pre[3]]: style[prefix] || 0
+						}
+						style[prefix][value] = toPx(item, node['width'])
+					}
+				}
+				continue
+			}
+			if(value.includes('width') || value.includes('height')) {
+				if(/%$/.test(item)) {
+					style[value] = toPx(item, parent.layoutBox[value])
+				} else {
+					style[value] = /px|rpx$/.test(item) ? toPx(item) : item
+				}
+				continue
+			}
+			if(value.includes('transform')) {
+				style[value]= {}
+				item.replace(/([a-zA-Z]+)\(([0-9,-\.%rpxdeg\s]+)\)/g, (g1, g2, g3) => {
+					const v = g3.split(',').map(k => k.replace(/(^\s*)|(\s*$)/g,''))
+					const transform = (v, r) => {
+						return v.includes('deg') ? v * 1 : toPx(v, r)
+					}
+					if(g2.includes('matrix')) {
+						style[value][g2] = v.map(v => v * 1)
+					} else if(g2.includes('rotate')) {
+						style[value][g2] = g3.match(/\d+/)[0] * 1
+					}else if(/[X, Y]/.test(g2)) {
+						style[value][g2] = /[X]/.test(g2) ? transform(v[0], node['width']) : transform(v[0], node['height'])
+					} else {
+						style[value][g2+'X'] = transform(v[0], node['width'])
+						style[value][g2+'Y'] = transform(v[1] || v[0], node['height'])
+					}
+				})
+				continue
+			}
+			style[value] = /%|px|rpx$/.test(item) ? toPx(item, node['width']) : /em$/.test(item) && name == 'text'? toPx(item, node['fontSize']) : item // (/em$/.test(item) && !value.includes('lineHeight') ? toPx(item, node['fontSize']) : item)
+		}
+		if((element.name == 'image' || element.type == 'image') && !style.mode) {
+			style.mode = 'aspectFill'
+			if((!node.width || node.width == 'auto') && (!node.height || node.width == 'auto') ) {
+				style.mode = ''
+			} 
+		}
+		return style
+	}
+	getLayoutBox(element, parent = {}, index = 0, siblings = [], source = {}) {
+		let box = {}
+		let {name, computedStyle: cstyle, layoutBox, attributes} = element || {}
+		if(!name) return box
+		const {ctx} = this
+		const pbox = parent.layoutBox || this.root
+		const pstyle = parent.computedStyle
+		let { 
+			verticalAlign: v = 'top', 
+			left: x, 
+			top: y,
+			width: w,
+			height: h,
+			fontSize = 14,
+			lineHeight = '1.4em',
+			maxLines,
+			fontWeight,
+			fontFamily,
+			textStyle,
+			position,
+			display
+			}  = cstyle;
+		const { paddingTop: pt = 0, paddingRight: pr = 0, paddingBottom: pb = 0, paddingLeft: pl = 0, } = cstyle.padding || {}
+		const { marginTop: mt = 0, marginRight: mr = 0, marginBottom: mb = 0, marginLeft: ml = 0, } = cstyle.margin || {}
+		
+		if(position == 'relative') {
+			x += pbox.left
+			y += pbox.top
+		}
+		if(name === 'text') {
+			const text = attributes.text ||''
+			lineHeight = toPx(lineHeight, fontSize)
+			ctx.save()
+			this.setFont({fontFamily, fontSize, fontWeight, textStyle})
+			const {layoutBox: lbox, computedStyle: ls} = siblings[index - 1] || {}
+			const {layoutBox: rbox, computedStyle: rs} = siblings[index + 1] || {}
+			const isLeft = index == 0
+			const isblock = display === 'block' || ls?.display === 'block'
+			const isOnly = isLeft && !rbox || !parent?.id
+			const lboxR = isLeft || isblock ? 0 : lbox.offsetRight || 0
+			let texts = text.split('\n')
+			let lineIndex = 1
+			let line = ''
+			const textIndent = cstyle.textIndent || 0
+			if(!isOnly) {
+				texts.map((t, i) => {
+					lineIndex += i
+					const chars = t.split('')
+					for (let j = 0; j < chars.length; j++) {
+						let ch = chars[j]
+						let textline = line + ch
+						let textWidth = this.measureText(textline, fontSize)
+						if(lineIndex == 1) {
+							textWidth = textWidth + (isblock ? 0 : lboxR) +  textIndent
+						}
+						if(textWidth > pbox.width) {
+							lineIndex++
+							line = ch
+						} else {
+							line = textline
+						}
+					}
+				})
+			} else {
+				line = text
+				lineIndex = Math.max(texts.length, Math.ceil(this.measureText(text, fontSize) / ((w || pbox.width) - this.measureText('0', fontSize))))
+			}
+			box.offsetLeft = (isNumber(x) || isblock || isOnly ? textIndent : lboxR) +  pl + ml;
+			// 剩下的字宽度
+			const remain = (this.measureText(line, fontSize))
+			let width =  lineIndex > 1 ? pbox.width : remain + box.offsetLeft;
+			box.offsetRight = box.offsetLeft + (w ? w : (isblock ? pbox.width : remain)) + pr + mr;
+			
+			
+			const _getLeft = () => {
+				return (x || pbox.left)
+			}
+			const _getWidth = () => {
+				return w || (isOnly ? pbox.width : (width > pbox.width - box.left || lineIndex > 1 ?  pbox.width - box.left : width))
+			}
+			const _getHeight = () => {
+				if(h) {
+					return h
+				} else if(lineIndex > 1 ) {
+					return (maxLines || lineIndex) * lineHeight + pt + pb + mt + mb
+				} else {
+					return lineHeight + pt + pb + mt + mb
+				}
+			}
+			const _getTop = () => {
+				let _y = y
+				if(_y) {
+					return _y + pt + mt
+				}
+				if(isLeft) {
+					 _y = pbox.top
+					
+				} else if(lbox.width < pbox.width) {
+					_y = lbox.top
+				} else {
+					_y = lbox.top + lbox.height - (ls?.lineHeight || 0)
+				}
+				if (v === 'bottom') {
+					_y = pbox.top + (pbox.height - box.height || 0)
+				}
+				if (v === 'middle') {
+					_y = pbox.top + (pbox.height - box.height || 0) / 2
+				}
+				return _y + pt + mt + (isblock && ls?.lineHeight || 0 )
+			}
+			box.left = _getLeft() 
+			box.width = _getWidth() 
+			box.height = _getHeight()
+			box.top = _getTop()
+			ctx.restore()
+		} else if(['view', 'qrcode'].includes(name)) {
+			box.left = x || pbox.left
+			box.width = (w || pbox?.width) - pl - pr
+			box.height = h || 0
+			box.top = y || pbox.top
+		} else if(name === 'image') {
+			box.left = x || pbox.left
+			box.width = (w || pbox?.width) - pl - pr
+			const {
+				width: rWidth,
+				height: rHeight
+			} = attributes
+			box.height = h || box.width * rHeight / rWidth 
+			box.top = y || pbox.top
+		}
+		return box
+	}
+	async getAttributes(element) {
+		let arr = { }
+		if(element?.url || element?.src) {
+			arr.src = element.url || element?.src;
+			const {width = 0, height = 0, path: src} = await getImageInfo(arr.src, this.isH5PathToBase64) || {}
+			arr = Object.assign({}, arr, {width, height, src})
+		}
+		if(element?.text) {
+			arr.text = element.text
+		}
+		return arr
+	}
+	async drawBoard(element) {
+		const node = await this.findNode(element)
+		return this.drawNode(node)
+	}
 	async drawNode(element) {
 		const {
 			layoutBox,

components/lime-painter/index.vue

@@ -1,35 +1,12 @@
 <template>
-	<canvas 
-		v-if="use2dCanvas" 
-		:id="canvasId" 
-		type="2d" 
-		:style="style"
-		@touchstart="onTouchStart"
-		@touchmove="onTouchMove"
-		@touchend="onTouchEnd"
-		@touchcancel="onTouchCancel" 
-		>
-	</canvas>
-	<canvas
-		v-else 
-		:canvas-id="canvasId" 
-		:style="style" 
-		:id="canvasId" 
-		:width="boardWidth * dpr" 
-		:height="boardHeight * dpr"
-		@touchstart="onTouchStart"
-		@touchmove="onTouchMove"
-		@touchend="onTouchEnd"
-		@touchcancel="onTouchCancel" 
-		>
-	</canvas>
+	<canvas v-if="use2dCanvas" :id="canvasId" type="2d" :style="style"></canvas>
+	<canvas v-else :canvas-id="canvasId" :style="style" :id="canvasId" :width="boardWidth * dpr" :height="boardHeight * dpr"></canvas>
 </template>
 
 <script>
 import { toPx, base64ToPath, compareVersion} from './utils';
 import { Draw } from './draw';
-import { Layout } from './layout';
-import { adaptor, expand } from './canvas';
+import { adaptor } from './canvas';
 export default {
 	// version: '1.5.9.3',
 	name: 'l-painter',
@@ -70,8 +47,7 @@ export default {
 			use2dCanvas: false,
 			// #endif
 			draw: null,
-			ctx: null,
-			layout: null
+			ctx: null
 		};
 	},
 	computed: {
@@ -112,15 +88,6 @@ export default {
 			})
 	},
 	methods: {
-		onTouchStart(e) {
-			 const {x,y} = e.touches[0]
-			console.log('e', {x,y})
-			console.log(this.node)
-			// this.ctx.isPointInPath(x, y)
-		},
-		onTouchMove(e) {},
-		onTouchEnd(e) {},
-		onTouchCancel(e) {},
 		async render(args = {}, single = false) {
 			const ctx = await this.getContext()
 			const { use2dCanvas, boardWidth, boardHeight, board, canvas, isBase64ToPath, isH5PathToBase64, sleep } = this;
@@ -133,22 +100,17 @@ export default {
 				  left: 0,
 				  width: boardWidth,
 				  height: boardHeight,
+				  sleep
 				}
 			}
 			if(!single) {
 				ctx.clearRect(0, 0, boardWidth, boardHeight);
 			}
 			if(!this.draw) {
-				this.draw = new Draw(ctx, canvas, use2dCanvas, isH5PathToBase64, sleep);
+				this.draw = new Draw(ctx, canvas, use2dCanvas, isH5PathToBase64, this.boundary);
 			} 
-			if(!this.layout) {
-				this.layout = new Layout(ctx, {}, this.boundary, this.isH5PathToBase64)
-			}
 			if(JSON.stringify(args) != '{}' || board && JSON.stringify(board) != '{}') {
-				this.node = await this.layout.calcNode(JSON.stringify(args) != '{}' ? args : board)
-			}
-			if(this.node) {
-				await this.draw.drawNode(this.node);
+				await this.draw.drawBoard(JSON.stringify(args) != '{}' ? args : board);
 			}
 			await new Promise(resolve => this.$nextTick(resolve)) 
 			if (!use2dCanvas && !single) {
@@ -214,8 +176,8 @@ export default {
 							// #ifdef MP-ALIPAY
 							ctx.scale(dpr, dpr);
 							// #endif
-							this.ctx = expand(ctx)
-							resolve(this.ctx);
+							this.ctx = ctx
+							resolve(ctx);
 						}
 					})
 				})
@@ -248,7 +210,7 @@ export default {
 							ctx.scale(dpr, dpr);
 						}
 						this.ctx = adaptor(ctx)
-						resolve(this.ctx);
+						resolve(adaptor(ctx));
 					});
 				
 			});

components/lime-painter/qrcode.js

@@ -1 +1,791 @@
-// 请去下载覆盖：https://gitee.com/liangei/lime-painter/blob/master/qrcode.js
+/* eslint-disable */
+!(function () {
+
+  // alignment pattern
+  let adelta = [
+    0, 11, 15, 19, 23, 27, 31,
+    16, 18, 20, 22, 24, 26, 28, 20, 22, 24, 24, 26, 28, 28, 22, 24, 24,
+    26, 26, 28, 28, 24, 24, 26, 26, 26, 28, 28, 24, 26, 26, 26, 28, 28
+  ];
+
+  // version block
+  let vpat = [
+    0xc94, 0x5bc, 0xa99, 0x4d3, 0xbf6, 0x762, 0x847, 0x60d,
+    0x928, 0xb78, 0x45d, 0xa17, 0x532, 0x9a6, 0x683, 0x8c9,
+    0x7ec, 0xec4, 0x1e1, 0xfab, 0x08e, 0xc1a, 0x33f, 0xd75,
+    0x250, 0x9d5, 0x6f0, 0x8ba, 0x79f, 0xb0b, 0x42e, 0xa64,
+    0x541, 0xc69
+  ];
+
+  // final format bits with mask: level << 3 | mask
+  let fmtword = [
+    0x77c4, 0x72f3, 0x7daa, 0x789d, 0x662f, 0x6318, 0x6c41, 0x6976,    //L
+    0x5412, 0x5125, 0x5e7c, 0x5b4b, 0x45f9, 0x40ce, 0x4f97, 0x4aa0,    //M
+    0x355f, 0x3068, 0x3f31, 0x3a06, 0x24b4, 0x2183, 0x2eda, 0x2bed,    //Q
+    0x1689, 0x13be, 0x1ce7, 0x19d0, 0x0762, 0x0255, 0x0d0c, 0x083b    //H
+  ];
+
+  // 4 per version: number of blocks 1,2; data width; ecc width
+  let eccblocks = [
+    1, 0, 19, 7, 1, 0, 16, 10, 1, 0, 13, 13, 1, 0, 9, 17,
+    1, 0, 34, 10, 1, 0, 28, 16, 1, 0, 22, 22, 1, 0, 16, 28,
+    1, 0, 55, 15, 1, 0, 44, 26, 2, 0, 17, 18, 2, 0, 13, 22,
+    1, 0, 80, 20, 2, 0, 32, 18, 2, 0, 24, 26, 4, 0, 9, 16,
+    1, 0, 108, 26, 2, 0, 43, 24, 2, 2, 15, 18, 2, 2, 11, 22,
+    2, 0, 68, 18, 4, 0, 27, 16, 4, 0, 19, 24, 4, 0, 15, 28,
+    2, 0, 78, 20, 4, 0, 31, 18, 2, 4, 14, 18, 4, 1, 13, 26,
+    2, 0, 97, 24, 2, 2, 38, 22, 4, 2, 18, 22, 4, 2, 14, 26,
+    2, 0, 116, 30, 3, 2, 36, 22, 4, 4, 16, 20, 4, 4, 12, 24,
+    2, 2, 68, 18, 4, 1, 43, 26, 6, 2, 19, 24, 6, 2, 15, 28,
+    4, 0, 81, 20, 1, 4, 50, 30, 4, 4, 22, 28, 3, 8, 12, 24,
+    2, 2, 92, 24, 6, 2, 36, 22, 4, 6, 20, 26, 7, 4, 14, 28,
+    4, 0, 107, 26, 8, 1, 37, 22, 8, 4, 20, 24, 12, 4, 11, 22,
+    3, 1, 115, 30, 4, 5, 40, 24, 11, 5, 16, 20, 11, 5, 12, 24,
+    5, 1, 87, 22, 5, 5, 41, 24, 5, 7, 24, 30, 11, 7, 12, 24,
+    5, 1, 98, 24, 7, 3, 45, 28, 15, 2, 19, 24, 3, 13, 15, 30,
+    1, 5, 107, 28, 10, 1, 46, 28, 1, 15, 22, 28, 2, 17, 14, 28,
+    5, 1, 120, 30, 9, 4, 43, 26, 17, 1, 22, 28, 2, 19, 14, 28,
+    3, 4, 113, 28, 3, 11, 44, 26, 17, 4, 21, 26, 9, 16, 13, 26,
+    3, 5, 107, 28, 3, 13, 41, 26, 15, 5, 24, 30, 15, 10, 15, 28,
+    4, 4, 116, 28, 17, 0, 42, 26, 17, 6, 22, 28, 19, 6, 16, 30,
+    2, 7, 111, 28, 17, 0, 46, 28, 7, 16, 24, 30, 34, 0, 13, 24,
+    4, 5, 121, 30, 4, 14, 47, 28, 11, 14, 24, 30, 16, 14, 15, 30,
+    6, 4, 117, 30, 6, 14, 45, 28, 11, 16, 24, 30, 30, 2, 16, 30,
+    8, 4, 106, 26, 8, 13, 47, 28, 7, 22, 24, 30, 22, 13, 15, 30,
+    10, 2, 114, 28, 19, 4, 46, 28, 28, 6, 22, 28, 33, 4, 16, 30,
+    8, 4, 122, 30, 22, 3, 45, 28, 8, 26, 23, 30, 12, 28, 15, 30,
+    3, 10, 117, 30, 3, 23, 45, 28, 4, 31, 24, 30, 11, 31, 15, 30,
+    7, 7, 116, 30, 21, 7, 45, 28, 1, 37, 23, 30, 19, 26, 15, 30,
+    5, 10, 115, 30, 19, 10, 47, 28, 15, 25, 24, 30, 23, 25, 15, 30,
+    13, 3, 115, 30, 2, 29, 46, 28, 42, 1, 24, 30, 23, 28, 15, 30,
+    17, 0, 115, 30, 10, 23, 46, 28, 10, 35, 24, 30, 19, 35, 15, 30,
+    17, 1, 115, 30, 14, 21, 46, 28, 29, 19, 24, 30, 11, 46, 15, 30,
+    13, 6, 115, 30, 14, 23, 46, 28, 44, 7, 24, 30, 59, 1, 16, 30,
+    12, 7, 121, 30, 12, 26, 47, 28, 39, 14, 24, 30, 22, 41, 15, 30,
+    6, 14, 121, 30, 6, 34, 47, 28, 46, 10, 24, 30, 2, 64, 15, 30,
+    17, 4, 122, 30, 29, 14, 46, 28, 49, 10, 24, 30, 24, 46, 15, 30,
+    4, 18, 122, 30, 13, 32, 46, 28, 48, 14, 24, 30, 42, 32, 15, 30,
+    20, 4, 117, 30, 40, 7, 47, 28, 43, 22, 24, 30, 10, 67, 15, 30,
+    19, 6, 118, 30, 18, 31, 47, 28, 34, 34, 24, 30, 20, 61, 15, 30
+  ];
+
+  // Galois field log table
+  let glog = [
+    0xff, 0x00, 0x01, 0x19, 0x02, 0x32, 0x1a, 0xc6, 0x03, 0xdf, 0x33, 0xee, 0x1b, 0x68, 0xc7, 0x4b,
+    0x04, 0x64, 0xe0, 0x0e, 0x34, 0x8d, 0xef, 0x81, 0x1c, 0xc1, 0x69, 0xf8, 0xc8, 0x08, 0x4c, 0x71,
+    0x05, 0x8a, 0x65, 0x2f, 0xe1, 0x24, 0x0f, 0x21, 0x35, 0x93, 0x8e, 0xda, 0xf0, 0x12, 0x82, 0x45,
+    0x1d, 0xb5, 0xc2, 0x7d, 0x6a, 0x27, 0xf9, 0xb9, 0xc9, 0x9a, 0x09, 0x78, 0x4d, 0xe4, 0x72, 0xa6,
+    0x06, 0xbf, 0x8b, 0x62, 0x66, 0xdd, 0x30, 0xfd, 0xe2, 0x98, 0x25, 0xb3, 0x10, 0x91, 0x22, 0x88,
+    0x36, 0xd0, 0x94, 0xce, 0x8f, 0x96, 0xdb, 0xbd, 0xf1, 0xd2, 0x13, 0x5c, 0x83, 0x38, 0x46, 0x40,
+    0x1e, 0x42, 0xb6, 0xa3, 0xc3, 0x48, 0x7e, 0x6e, 0x6b, 0x3a, 0x28, 0x54, 0xfa, 0x85, 0xba, 0x3d,
+    0xca, 0x5e, 0x9b, 0x9f, 0x0a, 0x15, 0x79, 0x2b, 0x4e, 0xd4, 0xe5, 0xac, 0x73, 0xf3, 0xa7, 0x57,
+    0x07, 0x70, 0xc0, 0xf7, 0x8c, 0x80, 0x63, 0x0d, 0x67, 0x4a, 0xde, 0xed, 0x31, 0xc5, 0xfe, 0x18,
+    0xe3, 0xa5, 0x99, 0x77, 0x26, 0xb8, 0xb4, 0x7c, 0x11, 0x44, 0x92, 0xd9, 0x23, 0x20, 0x89, 0x2e,
+    0x37, 0x3f, 0xd1, 0x5b, 0x95, 0xbc, 0xcf, 0xcd, 0x90, 0x87, 0x97, 0xb2, 0xdc, 0xfc, 0xbe, 0x61,
+    0xf2, 0x56, 0xd3, 0xab, 0x14, 0x2a, 0x5d, 0x9e, 0x84, 0x3c, 0x39, 0x53, 0x47, 0x6d, 0x41, 0xa2,
+    0x1f, 0x2d, 0x43, 0xd8, 0xb7, 0x7b, 0xa4, 0x76, 0xc4, 0x17, 0x49, 0xec, 0x7f, 0x0c, 0x6f, 0xf6,
+    0x6c, 0xa1, 0x3b, 0x52, 0x29, 0x9d, 0x55, 0xaa, 0xfb, 0x60, 0x86, 0xb1, 0xbb, 0xcc, 0x3e, 0x5a,
+    0xcb, 0x59, 0x5f, 0xb0, 0x9c, 0xa9, 0xa0, 0x51, 0x0b, 0xf5, 0x16, 0xeb, 0x7a, 0x75, 0x2c, 0xd7,
+    0x4f, 0xae, 0xd5, 0xe9, 0xe6, 0xe7, 0xad, 0xe8, 0x74, 0xd6, 0xf4, 0xea, 0xa8, 0x50, 0x58, 0xaf
+  ];
+
+  // Galios field exponent table
+  let gexp = [
+    0x01, 0x02, 0x04, 0x08, 0x10, 0x20, 0x40, 0x80, 0x1d, 0x3a, 0x74, 0xe8, 0xcd, 0x87, 0x13, 0x26,
+    0x4c, 0x98, 0x2d, 0x5a, 0xb4, 0x75, 0xea, 0xc9, 0x8f, 0x03, 0x06, 0x0c, 0x18, 0x30, 0x60, 0xc0,
+    0x9d, 0x27, 0x4e, 0x9c, 0x25, 0x4a, 0x94, 0x35, 0x6a, 0xd4, 0xb5, 0x77, 0xee, 0xc1, 0x9f, 0x23,
+    0x46, 0x8c, 0x05, 0x0a, 0x14, 0x28, 0x50, 0xa0, 0x5d, 0xba, 0x69, 0xd2, 0xb9, 0x6f, 0xde, 0xa1,
+    0x5f, 0xbe, 0x61, 0xc2, 0x99, 0x2f, 0x5e, 0xbc, 0x65, 0xca, 0x89, 0x0f, 0x1e, 0x3c, 0x78, 0xf0,
+    0xfd, 0xe7, 0xd3, 0xbb, 0x6b, 0xd6, 0xb1, 0x7f, 0xfe, 0xe1, 0xdf, 0xa3, 0x5b, 0xb6, 0x71, 0xe2,
+    0xd9, 0xaf, 0x43, 0x86, 0x11, 0x22, 0x44, 0x88, 0x0d, 0x1a, 0x34, 0x68, 0xd0, 0xbd, 0x67, 0xce,
+    0x81, 0x1f, 0x3e, 0x7c, 0xf8, 0xed, 0xc7, 0x93, 0x3b, 0x76, 0xec, 0xc5, 0x97, 0x33, 0x66, 0xcc,
+    0x85, 0x17, 0x2e, 0x5c, 0xb8, 0x6d, 0xda, 0xa9, 0x4f, 0x9e, 0x21, 0x42, 0x84, 0x15, 0x2a, 0x54,
+    0xa8, 0x4d, 0x9a, 0x29, 0x52, 0xa4, 0x55, 0xaa, 0x49, 0x92, 0x39, 0x72, 0xe4, 0xd5, 0xb7, 0x73,
+    0xe6, 0xd1, 0xbf, 0x63, 0xc6, 0x91, 0x3f, 0x7e, 0xfc, 0xe5, 0xd7, 0xb3, 0x7b, 0xf6, 0xf1, 0xff,
+    0xe3, 0xdb, 0xab, 0x4b, 0x96, 0x31, 0x62, 0xc4, 0x95, 0x37, 0x6e, 0xdc, 0xa5, 0x57, 0xae, 0x41,
+    0x82, 0x19, 0x32, 0x64, 0xc8, 0x8d, 0x07, 0x0e, 0x1c, 0x38, 0x70, 0xe0, 0xdd, 0xa7, 0x53, 0xa6,
+    0x51, 0xa2, 0x59, 0xb2, 0x79, 0xf2, 0xf9, 0xef, 0xc3, 0x9b, 0x2b, 0x56, 0xac, 0x45, 0x8a, 0x09,
+    0x12, 0x24, 0x48, 0x90, 0x3d, 0x7a, 0xf4, 0xf5, 0xf7, 0xf3, 0xfb, 0xeb, 0xcb, 0x8b, 0x0b, 0x16,
+    0x2c, 0x58, 0xb0, 0x7d, 0xfa, 0xe9, 0xcf, 0x83, 0x1b, 0x36, 0x6c, 0xd8, 0xad, 0x47, 0x8e, 0x00
+  ];
+
+  // Working buffers:
+  // data input and ecc append, image working buffer, fixed part of image, run lengths for badness
+  let strinbuf = [], eccbuf = [], qrframe = [], framask = [], rlens = [];
+  // Control values - width is based on version, last 4 are from table.
+  let version, width, neccblk1, neccblk2, datablkw, eccblkwid;
+  let ecclevel = 2;
+  // set bit to indicate cell in qrframe is immutable.  symmetric around diagonal
+  function setmask(x, y) {
+    let bt;
+    if (x > y) {
+      bt = x;
+      x = y;
+      y = bt;
+    }
+    // y*y = 1+3+5...
+    bt = y;
+    bt *= y;
+    bt += y;
+    bt >>= 1;
+    bt += x;
+    framask[bt] = 1;
+  }
+
+  // enter alignment pattern - black to qrframe, white to mask (later black frame merged to mask)
+  function putalign(x, y) {
+    let j;
+
+    qrframe[x + width * y] = 1;
+    for (j = -2; j < 2; j++) {
+      qrframe[(x + j) + width * (y - 2)] = 1;
+      qrframe[(x - 2) + width * (y + j + 1)] = 1;
+      qrframe[(x + 2) + width * (y + j)] = 1;
+      qrframe[(x + j + 1) + width * (y + 2)] = 1;
+    }
+    for (j = 0; j < 2; j++) {
+      setmask(x - 1, y + j);
+      setmask(x + 1, y - j);
+      setmask(x - j, y - 1);
+      setmask(x + j, y + 1);
+    }
+  }
+
+  //========================================================================
+  // Reed Solomon error correction
+  // exponentiation mod N
+  function modnn(x) {
+    while (x >= 255) {
+      x -= 255;
+      x = (x >> 8) + (x & 255);
+    }
+    return x;
+  }
+
+  let genpoly = [];
+
+  // Calculate and append ECC data to data block.  Block is in strinbuf, indexes to buffers given.
+  function appendrs(data, dlen, ecbuf, eclen) {
+    let i, j, fb;
+
+    for (i = 0; i < eclen; i++)
+      strinbuf[ecbuf + i] = 0;
+    for (i = 0; i < dlen; i++) {
+      fb = glog[strinbuf[data + i] ^ strinbuf[ecbuf]];
+      if (fb != 255)     /* fb term is non-zero */
+        for (j = 1; j < eclen; j++)
+          strinbuf[ecbuf + j - 1] = strinbuf[ecbuf + j] ^ gexp[modnn(fb + genpoly[eclen - j])];
+      else
+        for (j = ecbuf; j < ecbuf + eclen; j++)
+          strinbuf[j] = strinbuf[j + 1];
+      strinbuf[ecbuf + eclen - 1] = fb == 255 ? 0 : gexp[modnn(fb + genpoly[0])];
+    }
+  }
+
+  //========================================================================
+  // Frame data insert following the path rules
+
+  // check mask - since symmetrical use half.
+  function ismasked(x, y) {
+    let bt;
+    if (x > y) {
+      bt = x;
+      x = y;
+      y = bt;
+    }
+    bt = y;
+    bt += y * y;
+    bt >>= 1;
+    bt += x;
+    return framask[bt];
+  }
+
+  //========================================================================
+  //  Apply the selected mask out of the 8.
+  function applymask(m) {
+    let x, y, r3x, r3y;
+
+    switch (m) {
+      case 0:
+        for (y = 0; y < width; y++)
+          for (x = 0; x < width; x++)
+            if (!((x + y) & 1) && !ismasked(x, y))
+              qrframe[x + y * width] ^= 1;
+        break;
+      case 1:
+        for (y = 0; y < width; y++)
+          for (x = 0; x < width; x++)
+            if (!(y & 1) && !ismasked(x, y))
+              qrframe[x + y * width] ^= 1;
+        break;
+      case 2:
+        for (y = 0; y < width; y++)
+          for (r3x = 0, x = 0; x < width; x++ , r3x++) {
+            if (r3x == 3)
+              r3x = 0;
+            if (!r3x && !ismasked(x, y))
+              qrframe[x + y * width] ^= 1;
+          }
+        break;
+      case 3:
+        for (r3y = 0, y = 0; y < width; y++ , r3y++) {
+          if (r3y == 3)
+            r3y = 0;
+          for (r3x = r3y, x = 0; x < width; x++ , r3x++) {
+            if (r3x == 3)
+              r3x = 0;
+            if (!r3x && !ismasked(x, y))
+              qrframe[x + y * width] ^= 1;
+          }
+        }
+        break;
+      case 4:
+        for (y = 0; y < width; y++)
+          for (r3x = 0, r3y = ((y >> 1) & 1), x = 0; x < width; x++ , r3x++) {
+            if (r3x == 3) {
+              r3x = 0;
+              r3y = !r3y;
+            }
+            if (!r3y && !ismasked(x, y))
+              qrframe[x + y * width] ^= 1;
+          }
+        break;
+      case 5:
+        for (r3y = 0, y = 0; y < width; y++ , r3y++) {
+          if (r3y == 3)
+            r3y = 0;
+          for (r3x = 0, x = 0; x < width; x++ , r3x++) {
+            if (r3x == 3)
+              r3x = 0;
+            if (!((x & y & 1) + !(!r3x | !r3y)) && !ismasked(x, y))
+              qrframe[x + y * width] ^= 1;
+          }
+        }
+        break;
+      case 6:
+        for (r3y = 0, y = 0; y < width; y++ , r3y++) {
+          if (r3y == 3)
+            r3y = 0;
+          for (r3x = 0, x = 0; x < width; x++ , r3x++) {
+            if (r3x == 3)
+              r3x = 0;
+            if (!(((x & y & 1) + (r3x && (r3x == r3y))) & 1) && !ismasked(x, y))
+              qrframe[x + y * width] ^= 1;
+          }
+        }
+        break;
+      case 7:
+        for (r3y = 0, y = 0; y < width; y++ , r3y++) {
+          if (r3y == 3)
+            r3y = 0;
+          for (r3x = 0, x = 0; x < width; x++ , r3x++) {
+            if (r3x == 3)
+              r3x = 0;
+            if (!(((r3x && (r3x == r3y)) + ((x + y) & 1)) & 1) && !ismasked(x, y))
+              qrframe[x + y * width] ^= 1;
+          }
+        }
+        break;
+    }
+    return;
+  }
+
+  // Badness coefficients.
+  let N1 = 3, N2 = 3, N3 = 40, N4 = 10;
+
+  // Using the table of the length of each run, calculate the amount of bad image 
+  // - long runs or those that look like finders; called twice, once each for X and Y
+  function badruns(length) {
+    let i;
+    let runsbad = 0;
+    for (i = 0; i <= length; i++)
+      if (rlens[i] >= 5)
+        runsbad += N1 + rlens[i] - 5;
+    // BwBBBwB as in finder
+    for (i = 3; i < length - 1; i += 2)
+      if (rlens[i - 2] == rlens[i + 2]
+        && rlens[i + 2] == rlens[i - 1]
+        && rlens[i - 1] == rlens[i + 1]
+        && rlens[i - 1] * 3 == rlens[i]
+        // white around the black pattern? Not part of spec
+        && (rlens[i - 3] == 0 // beginning
+          || i + 3 > length  // end
+          || rlens[i - 3] * 3 >= rlens[i] * 4 || rlens[i + 3] * 3 >= rlens[i] * 4)
+      )
+        runsbad += N3;
+    return runsbad;
+  }
+
+  // Calculate how bad the masked image is - blocks, imbalance, runs, or finders.
+  function badcheck() {
+    let x, y, h, b, b1;
+    let thisbad = 0;
+    let bw = 0;
+
+    // blocks of same color.
+    for (y = 0; y < width - 1; y++)
+      for (x = 0; x < width - 1; x++)
+        if ((qrframe[x + width * y] && qrframe[(x + 1) + width * y]
+          && qrframe[x + width * (y + 1)] && qrframe[(x + 1) + width * (y + 1)]) // all black
+          || !(qrframe[x + width * y] || qrframe[(x + 1) + width * y]
+            || qrframe[x + width * (y + 1)] || qrframe[(x + 1) + width * (y + 1)])) // all white
+          thisbad += N2;
+
+    // X runs
+    for (y = 0; y < width; y++) {
+      rlens[0] = 0;
+      for (h = b = x = 0; x < width; x++) {
+        if ((b1 = qrframe[x + width * y]) == b)
+          rlens[h]++;
+        else
+          rlens[++h] = 1;
+        b = b1;
+        bw += b ? 1 : -1;
+      }
+      thisbad += badruns(h);
+    }
+
+    // black/white imbalance
+    if (bw < 0)
+      bw = -bw;
+
+    let big = bw;
+    let count = 0;
+    big += big << 2;
+    big <<= 1;
+    while (big > width * width)
+      big -= width * width, count++;
+    thisbad += count * N4;
+
+    // Y runs
+    for (x = 0; x < width; x++) {
+      rlens[0] = 0;
+      for (h = b = y = 0; y < width; y++) {
+        if ((b1 = qrframe[x + width * y]) == b)
+          rlens[h]++;
+        else
+          rlens[++h] = 1;
+        b = b1;
+      }
+      thisbad += badruns(h);
+    }
+    return thisbad;
+  }
+
+  function genframe(instring) {
+    let x, y, k, t, v, i, j, m;
+
+    // find the smallest version that fits the string
+    t = instring.length;
+    version = 0;
+    do {
+      version++;
+      k = (ecclevel - 1) * 4 + (version - 1) * 16;
+      neccblk1 = eccblocks[k++];
+      neccblk2 = eccblocks[k++];
+      datablkw = eccblocks[k++];
+      eccblkwid = eccblocks[k];
+      k = datablkw * (neccblk1 + neccblk2) + neccblk2 - 3 + (version <= 9);
+      if (t <= k)
+        break;
+    } while (version < 40);
+
+    // FIXME - insure that it fits insted of being truncated
+    width = 17 + 4 * version;
+
+    // allocate, clear and setup data structures
+    v = datablkw + (datablkw + eccblkwid) * (neccblk1 + neccblk2) + neccblk2;
+    for (t = 0; t < v; t++)
+      eccbuf[t] = 0;
+    strinbuf = instring.slice(0);
+
+    for (t = 0; t < width * width; t++)
+      qrframe[t] = 0;
+
+    for (t = 0; t < (width * (width + 1) + 1) / 2; t++)
+      framask[t] = 0;
+
+    // insert finders - black to frame, white to mask
+    for (t = 0; t < 3; t++) {
+      k = 0;
+      y = 0;
+      if (t == 1)
+        k = (width - 7);
+      if (t == 2)
+        y = (width - 7);
+      qrframe[(y + 3) + width * (k + 3)] = 1;
+      for (x = 0; x < 6; x++) {
+        qrframe[(y + x) + width * k] = 1;
+        qrframe[y + width * (k + x + 1)] = 1;
+        qrframe[(y + 6) + width * (k + x)] = 1;
+        qrframe[(y + x + 1) + width * (k + 6)] = 1;
+      }
+      for (x = 1; x < 5; x++) {
+        setmask(y + x, k + 1);
+        setmask(y + 1, k + x + 1);
+        setmask(y + 5, k + x);
+        setmask(y + x + 1, k + 5);
+      }
+      for (x = 2; x < 4; x++) {
+        qrframe[(y + x) + width * (k + 2)] = 1;
+        qrframe[(y + 2) + width * (k + x + 1)] = 1;
+        qrframe[(y + 4) + width * (k + x)] = 1;
+        qrframe[(y + x + 1) + width * (k + 4)] = 1;
+      }
+    }
+
+    // alignment blocks
+    if (version > 1) {
+      t = adelta[version];
+      y = width - 7;
+      for (; ;) {
+        x = width - 7;
+        while (x > t - 3) {
+          putalign(x, y);
+          if (x < t)
+            break;
+          x -= t;
+        }
+        if (y <= t + 9)
+          break;
+        y -= t;
+        putalign(6, y);
+        putalign(y, 6);
+      }
+    }
+
+    // single black
+    qrframe[8 + width * (width - 8)] = 1;
+
+    // timing gap - mask only
+    for (y = 0; y < 7; y++) {
+      setmask(7, y);
+      setmask(width - 8, y);
+      setmask(7, y + width - 7);
+    }
+    for (x = 0; x < 8; x++) {
+      setmask(x, 7);
+      setmask(x + width - 8, 7);
+      setmask(x, width - 8);
+    }
+
+    // reserve mask-format area
+    for (x = 0; x < 9; x++)
+      setmask(x, 8);
+    for (x = 0; x < 8; x++) {
+      setmask(x + width - 8, 8);
+      setmask(8, x);
+    }
+    for (y = 0; y < 7; y++)
+      setmask(8, y + width - 7);
+
+    // timing row/col
+    for (x = 0; x < width - 14; x++)
+      if (x & 1) {
+        setmask(8 + x, 6);
+        setmask(6, 8 + x);
+      }
+      else {
+        qrframe[(8 + x) + width * 6] = 1;
+        qrframe[6 + width * (8 + x)] = 1;
+      }
+
+    // version block
+    if (version > 6) {
+      t = vpat[version - 7];
+      k = 17;
+      for (x = 0; x < 6; x++)
+        for (y = 0; y < 3; y++ , k--)
+          if (1 & (k > 11 ? version >> (k - 12) : t >> k)) {
+            qrframe[(5 - x) + width * (2 - y + width - 11)] = 1;
+            qrframe[(2 - y + width - 11) + width * (5 - x)] = 1;
+          }
+          else {
+            setmask(5 - x, 2 - y + width - 11);
+            setmask(2 - y + width - 11, 5 - x);
+          }
+    }
+
+    // sync mask bits - only set above for white spaces, so add in black bits
+    for (y = 0; y < width; y++)
+      for (x = 0; x <= y; x++)
+        if (qrframe[x + width * y])
+          setmask(x, y);
+
+    // convert string to bitstream
+    // 8 bit data to QR-coded 8 bit data (numeric or alphanum, or kanji not supported)
+    v = strinbuf.length;
+
+    // string to array
+    for (i = 0; i < v; i++)
+      eccbuf[i] = strinbuf.charCodeAt(i);
+    strinbuf = eccbuf.slice(0);
+
+    // calculate max string length
+    x = datablkw * (neccblk1 + neccblk2) + neccblk2;
+    if (v >= x - 2) {
+      v = x - 2;
+      if (version > 9)
+        v--;
+    }
+
+    // shift and repack to insert length prefix
+    i = v;
+    if (version > 9) {
+      strinbuf[i + 2] = 0;
+      strinbuf[i + 3] = 0;
+      while (i--) {
+        t = strinbuf[i];
+        strinbuf[i + 3] |= 255 & (t << 4);
+        strinbuf[i + 2] = t >> 4;
+      }
+      strinbuf[2] |= 255 & (v << 4);
+      strinbuf[1] = v >> 4;
+      strinbuf[0] = 0x40 | (v >> 12);
+    }
+    else {
+      strinbuf[i + 1] = 0;
+      strinbuf[i + 2] = 0;
+      while (i--) {
+        t = strinbuf[i];
+        strinbuf[i + 2] |= 255 & (t << 4);
+        strinbuf[i + 1] = t >> 4;
+      }
+      strinbuf[1] |= 255 & (v << 4);
+      strinbuf[0] = 0x40 | (v >> 4);
+    }
+    // fill to end with pad pattern
+    i = v + 3 - (version < 10);
+    while (i < x) {
+      strinbuf[i++] = 0xec;
+      // buffer has room    if (i == x)      break;
+      strinbuf[i++] = 0x11;
+    }
+
+    // calculate and append ECC
+
+    // calculate generator polynomial
+    genpoly[0] = 1;
+    for (i = 0; i < eccblkwid; i++) {
+      genpoly[i + 1] = 1;
+      for (j = i; j > 0; j--)
+        genpoly[j] = genpoly[j]
+          ? genpoly[j - 1] ^ gexp[modnn(glog[genpoly[j]] + i)] : genpoly[j - 1];
+      genpoly[0] = gexp[modnn(glog[genpoly[0]] + i)];
+    }
+    for (i = 0; i <= eccblkwid; i++)
+      genpoly[i] = glog[genpoly[i]]; // use logs for genpoly[] to save calc step
+
+    // append ecc to data buffer
+    k = x;
+    y = 0;
+    for (i = 0; i < neccblk1; i++) {
+      appendrs(y, datablkw, k, eccblkwid);
+      y += datablkw;
+      k += eccblkwid;
+    }
+    for (i = 0; i < neccblk2; i++) {
+      appendrs(y, datablkw + 1, k, eccblkwid);
+      y += datablkw + 1;
+      k += eccblkwid;
+    }
+    // interleave blocks
+    y = 0;
+    for (i = 0; i < datablkw; i++) {
+      for (j = 0; j < neccblk1; j++)
+        eccbuf[y++] = strinbuf[i + j * datablkw];
+      for (j = 0; j < neccblk2; j++)
+        eccbuf[y++] = strinbuf[(neccblk1 * datablkw) + i + (j * (datablkw + 1))];
+    }
+    for (j = 0; j < neccblk2; j++)
+      eccbuf[y++] = strinbuf[(neccblk1 * datablkw) + i + (j * (datablkw + 1))];
+    for (i = 0; i < eccblkwid; i++)
+      for (j = 0; j < neccblk1 + neccblk2; j++)
+        eccbuf[y++] = strinbuf[x + i + j * eccblkwid];
+    strinbuf = eccbuf;
+
+    // pack bits into frame avoiding masked area.
+    x = y = width - 1;
+    k = v = 1;         // up, minus
+    /* inteleaved data and ecc codes */
+    m = (datablkw + eccblkwid) * (neccblk1 + neccblk2) + neccblk2;
+    for (i = 0; i < m; i++) {
+      t = strinbuf[i];
+      for (j = 0; j < 8; j++ , t <<= 1) {
+        if (0x80 & t)
+          qrframe[x + width * y] = 1;
+        do {        // find next fill position
+          if (v)
+            x--;
+          else {
+            x++;
+            if (k) {
+              if (y != 0)
+                y--;
+              else {
+                x -= 2;
+                k = !k;
+                if (x == 6) {
+                  x--;
+                  y = 9;
+                }
+              }
+            }
+            else {
+              if (y != width - 1)
+                y++;
+              else {
+                x -= 2;
+                k = !k;
+                if (x == 6) {
+                  x--;
+                  y -= 8;
+                }
+              }
+            }
+          }
+          v = !v;
+        } while (ismasked(x, y));
+      }
+    }
+
+    // save pre-mask copy of frame
+    strinbuf = qrframe.slice(0);
+    t = 0;           // best
+    y = 30000;         // demerit
+    // for instead of while since in original arduino code
+    // if an early mask was "good enough" it wouldn't try for a better one
+    // since they get more complex and take longer.
+    for (k = 0; k < 8; k++) {
+      applymask(k);      // returns black-white imbalance
+      x = badcheck();
+      if (x < y) { // current mask better than previous best?
+        y = x;
+        t = k;
+      }
+      if (t == 7)
+        break;       // don't increment i to a void redoing mask
+      qrframe = strinbuf.slice(0); // reset for next pass
+    }
+    if (t != k)         // redo best mask - none good enough, last wasn't t
+      applymask(t);
+
+    // add in final mask/ecclevel bytes
+    y = fmtword[t + ((ecclevel - 1) << 3)];
+    // low byte
+    for (k = 0; k < 8; k++ , y >>= 1)
+      if (y & 1) {
+        qrframe[(width - 1 - k) + width * 8] = 1;
+        if (k < 6)
+          qrframe[8 + width * k] = 1;
+        else
+          qrframe[8 + width * (k + 1)] = 1;
+      }
+    // high byte
+    for (k = 0; k < 7; k++ , y >>= 1)
+      if (y & 1) {
+        qrframe[8 + width * (width - 7 + k)] = 1;
+        if (k)
+          qrframe[(6 - k) + width * 8] = 1;
+        else
+          qrframe[7 + width * 8] = 1;
+      }
+    return qrframe;
+  }
+  let _canvas = null;
+  let api = {
+    get ecclevel() {
+      return ecclevel;
+    },
+    set ecclevel(val) {
+      ecclevel = val;
+    },
+    get size() {
+      return _size;
+    },
+    set size(val) {
+      _size = val
+    },
+    get canvas() {
+      return _canvas;
+    },
+    set canvas(el) {
+      _canvas = el;
+    },
+    getFrame(string) {
+      return genframe(string);
+    },
+    //这里的utf16to8(str)是对Text中的字符串进行转码，让其支持中文
+    utf16to8(str) {
+      let out, i, len, c;
+      out = "";
+      len = str.length;
+      for (i = 0; i < len; i++) {
+        c = str.charCodeAt(i);
+        if ((c >= 0x0001) && (c <= 0x007F)) {
+          out += str.charAt(i);
+        } else if (c > 0x07FF) {
+          out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
+          out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
+          out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
+        } else {
+          out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
+          out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
+        }
+      }
+      return out;
+    },
+	draw(str, $this, box, style, ecc) {
+		const {ctx} = $this
+		let {
+			left: startX, 
+			top: startY, 
+			width: cavW, 
+			height: cavH
+		} = box
+		const {
+			borderRadius = 0,
+			backgroundColor: bg,
+			color = '#000000',
+			border
+		} = style
+		const { borderWidth: bw } = border || {}
+      let that = this;
+      ecclevel = ecc || ecclevel;
+      if (!ctx) {
+        console.warn('No canvas provided to draw QR code in!')
+        return;
+      }
+	  ctx.save()
+	  if(bw) {
+		 cavW = cavW - bw
+		 cavH = cavH - bw
+	  }
+      let size = Math.min(cavW, cavH);
+	  //增加中文显示
+      str = that.utf16to8(str);
+
+      let frame = that.getFrame(str);
+      let px = size / width;
+	  $this.setOpacity(style)
+	  $this.setTransform(box, style)
+	  startX = -cavW/2,
+	  startY = -cavH/2
+      if (bg) {
+		  $this.setBackground(bg, cavW, cavH)
+		  $this.roundRect(startX, startY, cavW, cavH, borderRadius, true, false)
+      }
+	  ctx.setFillStyle(color)
+      for (let i = 0; i < width; i++) {
+        for (let j = 0; j < width; j++) {
+          if (frame[j * width + i]) {
+            ctx.fillRect(startX + px * i, startY + px * j, px, px);
+          }
+        }
+      }
+	  ctx.restore()
+	  $this.setBorder(box, style)
+    }
+  }
+  module.exports = { api }
+})();

components/lime-painter/utils.js

@@ -15,12 +15,12 @@ export function toPx(value, baseSize) {
 	}
 	// 如果有单位
 	if (typeof value === 'string') {
-		const reg = /^-?[0-9]+([.]{1}[0-9]+){0,1}(em|rpx|px|%)$/g
+		const reg = /^-?([0-9]+)?([.]{1}[0-9]+){0,1}(em|rpx|px|%)$/g
 		const results = reg.exec(value);
 		if (!value || !results) {
 			return 0;
 		}
-		const unit = results[2];
+		const unit = results[3];
 		value = parseFloat(value);
 		let res = 0;
 		if (unit === 'rpx') {
@@ -366,71 +366,44 @@ const getLocalFilePath = (path)=> {
 // #endif
 
 export function getImageInfo(img, isH5PathToBase64) {
-	return new Promise(async (resolve, reject) => {
-		const base64Reg = /^data:image\/(\w+);base64/
-		const localReg = /^\.|^\/(?=[^\/])/;
-		const networkReg = /^(http|\/\/)/
-		// #ifdef H5
-		if(networkReg.test(img) && isH5PathToBase64) {
-			img = await pathToBase64(img)
-		}
-		// #endif
-		// #ifndef MP-ALIPAY 
-		if(base64Reg.test(img)) {
-			if(!cache[img]) {
-				const imgName = img
-				img = await base64ToPath(img)
-				cache[imgName] = img
-			} else {
-				img = cache[img]
+		return new Promise(async (resolve, reject) => {
+			const base64Reg = /^data:image\/(\w+);base64/
+			const localReg = /^\.|^\/(?=[^\/])/;
+			const networkReg = /^(http|\/\/)/
+			// #ifdef H5
+			if(networkReg.test(img) && isH5PathToBase64) {
+				img = await pathToBase64(img)
 			}
-		}
-		// #endif
-		if(cache[img] && cache[img].errMsg) {
-			resolve(cache[img])
-		} else {
-			uni.getImageInfo({
-				src: img,
-				success: (image) => {
-					// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO
-					image.path = localReg.test(img) ?  `/${image.path}` : image.path;
-					// #endif
-					// image.path = /^(http|\/\/|\/|wxfile|data:image\/(\w+);base64|file|bdfile|ttfile|blob)/.test(image.path) ? image.path : `/${image.path}`;
-					cache[img] = image
-					resolve(cache[img])
-				},
-				fail(err) {
-					resolve({path: img})
-					console.error(`getImageInfo:fail ${img} failed ${JSON.stringify(err)}`);
+			// #endif
+			// #ifndef MP-ALIPAY 
+			if(base64Reg.test(img)) {
+				if(!cache[img]) {
+					const imgName = img
+					img = await base64ToPath(img)
+					cache[imgName] = img
+				} else {
+					img = cache[img]
 				}
-			})
-		}
-	})
-}
-	
-	
-	
-export class DataUtil {
-  /**
-   * 设置差异数据
-   * @param component
-   * @param data
-   */
-  setDiffData(component, data) {
-	const diffData = {};
-
-	// 遍历获取到有差异的数据
-	Object.keys(data).forEach(key => {
-	  if (component[key] !== data[key]) {
-		diffData[key] = data[key];
-	  }
-	});
-
-	// 设置数据
-	if (Object.keys(diffData).length) {
-	  // component.setData(diffData);
-	}
-  }
-}
-// const dataUtil = new DataUtil;
-// export dataUtil;
+			}
+			// #endif
+			if(cache[img] && cache[img].errMsg) {
+				resolve(cache[img])
+			} else {
+				uni.getImageInfo({
+					src: img,
+					success: (image) => {
+						// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO
+						image.path = localReg.test(img) ?  `/${image.path}` : image.path;
+						// #endif
+						// image.path = /^(http|\/\/|\/|wxfile|data:image\/(\w+);base64|file|bdfile|ttfile|blob)/.test(image.path) ? image.path : `/${image.path}`;
+						cache[img] = image
+						resolve(cache[img])
+					},
+					fail(err) {
+						resolve({path: img})
+						console.error(`getImageInfo:fail ${img} failed ${JSON.stringify(err)}`);
+					}
+				})
+			}
+		})
+	}

pages/login/companyLogin.vue

@@ -33,8 +33,8 @@
 				$getimg:this.$getimg,
 				params:{
 					// loginStr:'66432356',
-					loginStr:'64676376',
-					pwd:'123456',
+					loginStr:'',
+					pwd:'',
 					
 				},
 				rules: {