2022-02-09

king

2022-02-09 d59f518f466274b2caeb2e01c10c92deafe7c93b

 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,7 +64,7 @@
   * @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()
@@ -68,10 +78,16 @@
    }

    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
    }

@@ -85,13 +101,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 +130,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 +144,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 +279,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 +322,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 +335,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 +364,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 +374,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 +403,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 +416,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)
        }
      }
    }
  }