2021-11-18

king

2021-11-18 c98e45bfac25e9110ad0383faac54a54d98ea9d5

 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

@@ -39,8 +41,9 @@
          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 +57,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()
@@ -67,11 +70,11 @@
      context.translate(-_cx, -_cy) // 恢复原点
    }

    if (selectId === element.uuid) { // 选中元素，设置外部阴影
      context.shadowBlur = 10
      context.shadowColor = '#757575'
    if (debug || selectId === element.uuid) { // 选中元素，设置外部阴影
      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
    }

@@ -85,13 +88,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'
    if ((debug || selectId === element.uuid) && element.width > 3 * ratio && element.height > 3 * ratio) { // 选中元素，设置外部阴影
      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 +117,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)
      }
@@ -244,7 +258,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 +301,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 +314,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 +343,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 +353,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 +382,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 +395,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)
        }
      }
    }
  }