xiangan_pc/src/page-subspecialty/views/modules/imgEditorFabric/index.vue

<template>
  <div class="home">
    <div>
      <div v-if="show" class="img_header">
        <div style="font-size: 20px; font-weight: bold">眼底绘图</div>
        <div>
          <save @fullImgBack="fullImgBack" />
          <el-button size="small" @click="closeDialog">关闭</el-button>
        </div>
      </div>
      <div style=" display: flex; height: calc(100vh - 70px);">
        <div style="width: 380px; height: 100%; background:#fff; display: flex">
          <el-tabs v-model="menuActive" tab-position="left">
            <el-tab-pane label="元素" name="1" />
            <el-tab-pane label="背景" name="2" />
            <el-tab-pane label="画笔" name="3" />
          </el-tabs>
          <div class="content">
            <template v-if="show">
              <div v-show="menuActive === '1'" class="left-panel">
                <tools />
              </div>
              <!-- 背景设置 -->
              <div v-show="menuActive === '2'" class="left-panel">
                <set-size />
                <bg-bar ref="bgBar" :is-od-or-os="isOdOrOs" />
              </div>
            </template>
            <!-- 画笔设置 -->
            <div v-show="menuActive === '3'" class="left-panel">
              <div style="display: inline-block">
                <el-button type="primary" class="btn btn-info" size="small" @click="changeDrawing">{{ controlBtn }}</el-button>
                <div v-if="controlDrawing">
                  <div class="drawing_item" style="display: flex">
                    <span for="drawing-mode-selector">风格:</span>
                    <el-select id="drawing-mode-selector" v-model="model" class="modeStyle" style="flex: 1" @change="changeModel">
                      <el-option :value="'铅笔'">铅笔</el-option>
                      <el-option :value="'钻石'">钻石</el-option>
                    </el-select>
                  </div>
                  <div class="drawing_item">
                    <div for="drawing-line-width">线条宽度:<span class="info">{{ lineWidth }}</span></div>
                    <el-slider v-model="lineWidth" :min="0" :max="150" @change="changeLineWidth" />
                    <input id="drawing-line-width" type="range" value="30" min="0" max="150">
                  </div>
                  <div class="drawing_item" style="display: flex;align-items: center">
                    <div for="drawing-color">线条颜色:</div>
                    <el-input id="drawing-color" class="toolStyle" type="color" value="#FF0000" />
                  </div>
                  <div id="eraser-btn" class="drawing_item" style="display: flex;align-items: center">
                    <div>橡皮擦: </div>
                    <el-button size="mini" type="text" style="font-size: 16px;margin-left: 4px" @click="setEarser">橡皮擦</el-button>
                    <!--                    <span @click="setUndoErasing">恢复擦拭</span>-->
                  </div>
                  <div class="drawing_item" style="display: flex;align-items: center">
                    <div>画笔: </div>
                    <el-button size="mini" type="text" style="font-size: 16px;margin-left: 4px" @click="changeModel('钻石')">画笔</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 画布区域 -->
        <div style="width: 100%;position: relative; background:#F1F1F1;">
          <div class="canvas-box">
            <canvas id="canvas" />
          </div>
          <zoom />
        </div>
        <!-- 属性区域 -->
        <div class="rightTools">
          <layer v-if="show" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 顶部组件
import save from '@/page-subspecialty/views/modules/imgEditorFabric/img-editor/save.vue'
import zoom from '@/page-subspecialty/views/modules/imgEditorFabric/img-editor/zoom.vue'

// 左侧组件
import tools from '@/page-subspecialty/views/modules/imgEditorFabric/img-editor/tools.vue'
import bgBar from '@/page-subspecialty/views/modules/imgEditorFabric/img-editor/bgBar.vue'
import setSize from '@/page-subspecialty/views/modules/imgEditorFabric/img-editor/setSize.vue'
import brush from '@/page-subspecialty/views/modules/imgEditorFabric/img-editor/brush.vue'

// 右侧组件
import layer from '@/page-subspecialty/views/modules/imgEditorFabric/img-editor/layer.vue'

// 功能组件
import EventHandle from '@/utils/eventHandler'

import { fabric } from 'fabric'
import 'fabric/src/mixins/eraser_brush.mixin'

// 对齐辅助线
import initAligningGuidelines from '@/core/initAligningGuidelines'
import initHotkeys from '@/core/initHotKeys'
import initControls from '@/core/initControls'
const event = new EventHandle()
const canvas = {}
export default {
  name: 'HomeView',
  components: {
    zoom,
    save,
    tools,
    bgBar,
    setSize,
    brush,
    layer
  },
  props: {
    isOdOrOs: {
      type: String
    }
  },
  provide: {
    canvas,
    fabric,
    event
  },
  data() {
    return {
      menuActive: '3',
      show: false,
      select: null,
      model: '钻石',
      controlBtn: '取消绘图模式',
      controlDrawing: true,
      lineWidth: 30
    }
  },
  watch: {
    menuActive(value) {
      if (value !== '3') {
        this.canvas.isDrawingMode = false
      } else {
        this.canvas.isDrawingMode = true
      }
      console.log(this.canvas.isDrawingMode)
    }
  },
  mounted() {
    this.canvas = canvas.c = new fabric.Canvas('canvas', {
      isDrawingMode: true
    })
    // console.log(this.canvas)
    this.canvas.set('backgroundColor', '#fff')
    this.show = true
    event.init(canvas.c)
    initAligningGuidelines(canvas.c)
    initHotkeys(canvas.c)
    initControls(canvas.c)
    this.$nextTick(() => {
      this.setBrush()
      this.changeModel('钻石')
    })
  },
  methods: {
    fullImgBack(value) {
      this.$emit('fullImgBack', value)
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    // 改变画笔样式
    changeModel(value, canvas = this.canvas) {
      var $ = function(id) { return document.getElementById(id) }
      var drawingColorEl = $('drawing-color')
      if (fabric.PatternBrush) {
        var vLinePatternBrush = new fabric.PatternBrush(canvas)
        vLinePatternBrush.getPatternSrc = function() {
          var patternCanvas = fabric.document.createElement('canvas')
          patternCanvas.width = patternCanvas.height = 10
          var ctx = patternCanvas.getContext('2d')

          ctx.strokeStyle = this.color
          ctx.lineWidth = 5
          ctx.beginPath()
          ctx.moveTo(0, 5)
          ctx.lineTo(10, 5)
          ctx.closePath()
          ctx.stroke()

          return patternCanvas
        }

        var hLinePatternBrush = new fabric.PatternBrush(canvas)
        hLinePatternBrush.getPatternSrc = function() {
          var patternCanvas = fabric.document.createElement('canvas')
          patternCanvas.width = patternCanvas.height = 10
          var ctx = patternCanvas.getContext('2d')

          ctx.strokeStyle = this.color
          ctx.lineWidth = 5
          ctx.beginPath()
          ctx.moveTo(5, 0)
          ctx.lineTo(5, 10)
          ctx.closePath()
          ctx.stroke()

          return patternCanvas
        }

        var squarePatternBrush = new fabric.PatternBrush(canvas)
        squarePatternBrush.getPatternSrc = function() {
          var squareWidth = 10; var squareDistance = 2

          var patternCanvas = fabric.document.createElement('canvas')
          patternCanvas.width = patternCanvas.height = squareWidth + squareDistance
          var ctx = patternCanvas.getContext('2d')

          ctx.fillStyle = this.color
          ctx.fillRect(0, 0, squareWidth, squareWidth)

          return patternCanvas
        }

        var diamondPatternBrush = new fabric.PatternBrush(canvas)
        diamondPatternBrush.getPatternSrc = function() {
          var squareWidth = 10; var squareDistance = 5
          var patternCanvas = fabric.document.createElement('canvas')
          var rect = new fabric.Rect({
            width: squareWidth,
            height: squareWidth,
            angle: 45,
            fill: this.color
          })

          var canvasWidth = rect.getBoundingRect().width

          patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance
          rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 })

          var ctx = patternCanvas.getContext('2d')
          rect.render(ctx)

          return patternCanvas
        }

        var img = new Image()
        img.src = '../assets/honey_im_subtle.png'

        var texturePatternBrush = new fabric.PatternBrush(canvas)
        texturePatternBrush.source = img
      }
      if (value === 'hline') {
        canvas.freeDrawingBrush = vLinePatternBrush
      } else if (value === 'vline') {
        canvas.freeDrawingBrush = hLinePatternBrush
      } else if (value === 'square') {
        canvas.freeDrawingBrush = squarePatternBrush
      } else if (value === '钻石') {
        canvas.freeDrawingBrush = diamondPatternBrush
      } else if (value === 'texture') {
        canvas.freeDrawingBrush = texturePatternBrush
      } else if (value === '铅笔') {
        const text = 'Pencil'
        canvas.freeDrawingBrush = new fabric[text + 'Brush'](canvas)
      }
      if (canvas.freeDrawingBrush) {
        var brush = canvas.freeDrawingBrush
        brush.color = drawingColorEl.value
        if (brush.getPatternSrc) {
          brush.source = brush.getPatternSrc.call(brush)
        }
        brush.width = parseInt(this.lineWidth, 10) || 1
      }
    },
    setEarser() {
      this.canvas.isDrawingMode = true // 启用绘图模式

      // 设置橡皮擦样式
      this.canvas.freeDrawingBrush = new fabric.EraserBrush(this.canvas)
      this.canvas.freeDrawingBrush.color = 'rgba(0,0,0,0)' // 设置颜色为透明
      this.canvas.freeDrawingBrush.width = 30 // 设置橡皮擦的大小
    },
    setUndoErasing() {
      this.canvas.isDrawingMode = true
      this.canvas.freeDrawingBrush = new fabric.EraserBrush(this.canvas)
      this.canvas.freeDrawingBrush.width = 10
      this.canvas.freeDrawingBrush.inverted = true // 恢复被擦拭的地方
    },
    // 打开或关闭绘画模式
    changeDrawing() {
      this.canvas.isDrawingMode = !this.canvas.isDrawingMode
      console.log(this.canvas.isDrawingMode)

      if (this.canvas.isDrawingMode) {
        this.controlBtn = '取消绘图模式'
        this.controlDrawing = true
      } else {
        this.controlBtn = '开启绘图模式'
        this.controlDrawing = false
      }
    },
    // 改变线宽
    changeLineWidth(value) {
      this.lineWidth = value
      this.canvas.freeDrawingBrush.width = parseInt(this.lineWidth, 10) || 1
    },
    setBrush() {
      var $ = function(id) { return document.getElementById(id) }
      var canvas = this.canvas
      fabric.Object.prototype.transparentCorners = false

      var drawingColorEl = $('drawing-color')
      drawingColorEl.onchange = function() {
        var brush = canvas.freeDrawingBrush
        brush.color = this.value
        if (brush.getPatternSrc) {
          brush.source = brush.getPatternSrc.call(brush)
        }
      }
      if (canvas.freeDrawingBrush) {
        canvas.freeDrawingBrush.color = drawingColorEl.value
        canvas.freeDrawingBrush.source = canvas.freeDrawingBrush.getPatternSrc && canvas.freeDrawingBrush.getPatternSrc.call(this)
        canvas.freeDrawingBrush.width = parseInt(this.lineWidth, 10) || 1
      }
      var mainScriptEl = document.getElementById('main')
      if (!mainScriptEl) return
      var preEl = document.createElement('pre')
      var codeEl = document.createElement('code')
      codeEl.innerHTML = mainScriptEl.innerHTML
      codeEl.className = 'language-javascript'
      preEl.appendChild(codeEl)
      document.getElementById('bd-wrapper').appendChild(preEl)

      window.addEventListener('load', function() {
        var canvas = this.canvas
        var canvases = this.__canvases || this.canvases

        canvas && canvas.calcOffset && canvas.calcOffset()

        if (canvases && canvases.length) {
          for (var i = 0, len = canvases.length; i < len; i++) {
            canvases[i].calcOffset()
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.toolStyle{
  flex: 1;
  margin-left: 10px;
  background: none;
  ::v-deep .el-input__inner{
    border: 0 !important;
    background-color: #29292a !important;
  }
}
.modeStyle{
  margin-left:10px;
  ::v-deep .el-input__inner{
    border-radius: 5px;
    overflow: hidden !important;
  }
}

input{
  margin-right: 5px;
}
::v-deep .el-tabs--left{
  background: #151515;
  color: #fff;
}
::v-deep .el-tabs__nav-wrap.is-right::after{
  background: #151515;
}
::v-deep .el-tabs__item{
  color: #fff;
}
::v-deep .el-tabs__item.is-active{
  color: #409EFF;
}
::v-deep .el-tabs__nav-wrap.is-left::after{
  background: #151515 !important;
}
::v-deep .ivu-layout-header {
  padding: 0 10px;
}
.home,.ivu-layout{
  height: calc( 100vh - 30px );
}
.img_header{
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #515a6e;
  color: #fff;
}
.info{
  margin-left: 10px;
}
.icon{
  display: block;
}
.rightTools{
  width: 380px;
  height: 100%;
  padding:10px;
  overflow-y: auto;
  background:#fff;
  background: #29292a;
}
.canvas-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#canvas{
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAHUlEQVQ4jWNgYGAQIYAJglEDhoUBg9+FowbQ2gAARjwKARjtnN8AAAAASUVORK5CYII=");
  background-size: 30px 30px;
}
.left-panel{
  padding: 10px;
}
.drawing_item{
  margin: 10px 0;
  font-size: 16px;
}
.content{
  background: #29292a;
  color: #fff;
  flex: 1;
  width: 200px;
  padding:10px;
  padding-top: 0;
  height: 100%;
  overflow-y: auto;
}
</style>