king
2025-04-21 f3d4db769ba9b51b799d981511a710fd443d0e08
src/views/printTemplate/print.js
@@ -4,7 +4,7 @@
   * @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
@@ -22,6 +22,8 @@
      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
@@ -34,13 +36,21 @@
          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 => {
@@ -54,30 +64,37 @@
   * @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)
@@ -85,13 +102,24 @@
    }
    // 设置背景色
    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)
@@ -103,7 +131,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)
      }
@@ -117,6 +145,14 @@
      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
@@ -244,7 +280,7 @@
      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)
      }
@@ -287,7 +323,7 @@
        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)
        }
@@ -300,7 +336,7 @@
  
          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)
          }
@@ -329,7 +365,7 @@
        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)
        }
@@ -339,7 +375,7 @@
  
          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)
          }
@@ -368,10 +404,10 @@
      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)
        }
@@ -381,12 +417,20 @@
  
          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)
        }
      }
    }
  }