| | |
| | | * @param {Object} configs 配置信息 |
| | | * @param {Boolean} selectId 编辑元素 |
| | | */ |
| | | static sketch (configs, selectId) { |
| | | static sketch (configs, selectId, debug = false) { |
| | | if (!configs.height || !configs.width) return |
| | | |
| | | if (configs.height / configs.width > 10 || configs.width / configs.height > 10) return |
| | |
| | | elements.forEach(element => { |
| | | element.left = element.left * ratio |
| | | element.top = element.top * ratio |
| | | element.oriwidth = element.width |
| | | element.oriheight = element.height |
| | | element.width = element.width * ratio |
| | | element.height = element.height * ratio |
| | | |
| | |
| | | element.fontSize = element.fontSize * sizeradio |
| | | } else if (element.type === 'qrcode') { |
| | | element.qrcodeWidth = element.qrcodeWidth * ratio |
| | | |
| | | if (element.qrcodeWidth > element.height) { |
| | | element.qrcodeWidth = element.height |
| | | } |
| | | if (element.qrcodeWidth > element.width) { |
| | | element.qrcodeWidth = element.width |
| | | } |
| | | } else if (element.type === 'image') { |
| | | element.imgWidth = element.imgWidth * ratio |
| | | element.imgHeight = element.imgHeight * ratio |
| | | } |
| | | }) |
| | | |
| | | return new Promise(resolve => { |
| | | this.sketchothers(context, elements, selectId, ratio, resolve) |
| | | this.sketchothers(context, elements, selectId, debug, ratio, resolve) |
| | | }) |
| | | } else { |
| | | return new Promise(resolve => { |
| | |
| | | * @param {Object} context 画布对象 |
| | | * @param {Object} elements 图片文字信息 |
| | | */ |
| | | static sketchothers (context, elements, selectId, ratio, resolve) { |
| | | static sketchothers (context, elements, selectId, debug, ratio, resolve) { |
| | | let element = elements.splice(0, 1)[0] // 逐个绘制图片文字 |
| | | let textLineSpace = 5 // 绘制时行间距,防止文字重叠 |
| | | context.save() |
| | | |
| | | if (element.rotate) { // 元素旋转时,设置画布旋转角度 |
| | | let _cx = element.left + element.width / 2 |
| | | let _cy = element.top + element.height / 2 |
| | | context.translate(_cx, _cy) // 移动原点 |
| | | context.rotate(element.rotate * Math.PI / 180) |
| | | context.translate(-_cx, -_cy) // 恢复原点 |
| | | } |
| | | // if (element.rotate) { // 元素旋转时,设置画布旋转角度 |
| | | // let _cx = element.left + element.width / 2 |
| | | // let _cy = element.top + element.height / 2 |
| | | // context.translate(_cx, _cy) // 移动原点 |
| | | // context.rotate(element.rotate * Math.PI / 180) |
| | | // context.translate(-_cx, -_cy) // 恢复原点 |
| | | // } |
| | | |
| | | if (selectId === element.uuid) { // 选中元素,设置外部阴影 |
| | | context.shadowBlur = 10 |
| | | context.shadowColor = '#757575' |
| | | context.shadowBlur = 5 |
| | | context.shadowColor = '#1890ff' |
| | | context.fillStyle = 'white' |
| | | context.fillRect(element.left, element.top, element.width, element.height) |
| | | context.fillRect(element.left, element.top, element.width || 1, element.height || 1) |
| | | context.shadowBlur = 0 |
| | | } else if (debug) { |
| | | context.shadowBlur = 3 |
| | | context.shadowColor = 'orange' |
| | | context.fillStyle = 'white' |
| | | context.fillRect(element.left, element.top, element.width || 1, element.height || 1) |
| | | context.shadowBlur = 0 |
| | | } |
| | | |
| | | // 绘制边框 |
| | | // context.rect(element.left + element.borderSize / 2, element.top + element.borderSize / 2, element.width - element.borderSize, element.height - element.borderSize) |
| | | if (element.borderSize >= 1) { |
| | | context.beginPath() |
| | | context.strokeStyle = element.borderColor |
| | | context.lineWidth = element.borderSize |
| | | context.rect(element.left, element.top, element.width, element.height) |
| | |
| | | } |
| | | |
| | | // 设置背景色 |
| | | if (element.background && element.background !== 'white') { |
| | | if (!element.borderSize && (element.oriwidth === 1 || element.oriheight === 1)) { // 线 |
| | | context.strokeStyle = element.background |
| | | context.beginPath() |
| | | if (element.oriwidth === 1) { |
| | | context.moveTo(element.left, element.top) |
| | | context.lineTo(element.left, element.top + element.height) |
| | | } else { |
| | | context.moveTo(element.left, element.top + element.height) |
| | | context.lineTo(element.left + element.width, element.top + element.height) |
| | | } |
| | | context.stroke() |
| | | } else if (element.background && element.background !== 'white') { |
| | | context.fillStyle = element.background |
| | | context.fillRect(element.left, element.top, element.width, element.height) |
| | | } |
| | | |
| | | if (selectId === element.uuid && element.width > 3 * ratio && element.height > 3 * ratio) { // 选中元素,设置外部阴影 |
| | | context.strokeStyle = 'black' |
| | | context.strokeStyle = '#1890ff' |
| | | context.beginPath() |
| | | context.moveTo(element.left + element.width - 7, element.top + element.height - 2) |
| | | context.lineTo(element.left + element.width - 2, element.top + element.height - 7) |
| | |
| | | if (!element.width || !element.height) { |
| | | context.restore() // 重置画布 |
| | | if (elements.length > 0) { |
| | | this.sketchothers(context, elements, selectId, ratio, resolve) |
| | | this.sketchothers(context, elements, selectId, debug, ratio, resolve) |
| | | } else { |
| | | this.cachesketch(context, resolve) |
| | | } |
| | |
| | | context.fillStyle = element.fontColor |
| | | |
| | | let lines = element.value.split('\n') |
| | | |
| | | if (!element.value && element.field) { |
| | | if (element.field === 'other_field') { |
| | | lines = [element.cusfield || ''] |
| | | } else { |
| | | lines = [element.field] |
| | | } |
| | | } |
| | | let _y = element.top + element.padding + element.fontSize + element.borderSize |
| | | let _left = element.left + element.borderSize + element.padding |
| | | let _right = element.left + element.width - element.padding - element.borderSize |
| | |
| | | |
| | | context.restore() // 重置画布 |
| | | if (elements.length > 0) { |
| | | this.sketchothers(context, elements, selectId, ratio, resolve) |
| | | this.sketchothers(context, elements, selectId, debug, ratio, resolve) |
| | | } else { |
| | | this.cachesketch(context, resolve) |
| | | } |
| | |
| | | |
| | | context.restore() // 重置画布 |
| | | if (elements.length > 0) { |
| | | this.sketchothers(context, elements, selectId, ratio, resolve) |
| | | this.sketchothers(context, elements, selectId, debug, ratio, resolve) |
| | | } else { |
| | | this.cachesketch(context, resolve) |
| | | } |
| | |
| | | |
| | | context.restore() // 重置画布 |
| | | if (elements.length > 0) { |
| | | this.sketchothers(context, elements, selectId, ratio, resolve) |
| | | this.sketchothers(context, elements, selectId, debug, ratio, resolve) |
| | | } else { |
| | | this.cachesketch(context, resolve) |
| | | } |
| | |
| | | |
| | | context.restore() // 重置画布 |
| | | if (elements.length > 0) { |
| | | this.sketchothers(context, elements, selectId, ratio, resolve) |
| | | this.sketchothers(context, elements, selectId, debug, ratio, resolve) |
| | | } else { |
| | | this.cachesketch(context, resolve) |
| | | } |
| | |
| | | |
| | | context.restore() // 重置画布 |
| | | if (elements.length > 0) { |
| | | this.sketchothers(context, elements, selectId, ratio, resolve) |
| | | this.sketchothers(context, elements, selectId, debug, ratio, resolve) |
| | | } else { |
| | | this.cachesketch(context, resolve) |
| | | } |
| | |
| | | |
| | | if (image.complete) { |
| | | context.drawImage(image, _left, _top, element.imgWidth, element.imgHeight) |
| | | |
| | | |
| | | context.restore() // 重置画布 |
| | | if (elements.length > 0) { |
| | | this.sketchothers(context, elements, selectId, ratio, resolve) |
| | | this.sketchothers(context, elements, selectId, debug, ratio, resolve) |
| | | } else { |
| | | this.cachesketch(context, resolve) |
| | | } |
| | |
| | | |
| | | context.restore() // 重置画布 |
| | | if (elements.length > 0) { |
| | | this.sketchothers(context, elements, selectId, ratio, resolve) |
| | | this.sketchothers(context, elements, selectId, debug, ratio, resolve) |
| | | } else { |
| | | this.cachesketch(context, resolve) |
| | | } |
| | | } |
| | | } |
| | | image.onerror = () => { |
| | | context.restore() // 重置画布 |
| | | if (elements.length > 0) { |
| | | this.sketchothers(context, elements, selectId, debug, ratio, resolve) |
| | | } else { |
| | | this.cachesketch(context, resolve) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |