pbl-student-table/src/components/tools/imgDraw/imgDraw.vue

<template>
  <div class="imgDraw">
    <a href="javascript:void(0);" ref="download" download="picture.png" v-show="false"></a>
    <el-button type="primary" @click="handleShowCanvas" v-show="false">showCanvas</el-button>
    <el-dialog destroy-on-close :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
      :visible.sync="show" fullscreen>
      <!-- <p slot="title" class="title">Vue-ImagePainter🎨</p> -->
      <div class="d_body">
        <div class="board" ref="board">
          <img id="img1" ref="img1" v-bind:src="baseMap" hidden="hidden" />
          <canvas id="ctx_front" ref="ctx_front" :style="'cursor:' + cursor"></canvas>
          <canvas id="ctx_base" ref="ctx_base" :style="'cursor:' + cursor"></canvas>
          <canvas id="ctx_back" ref="ctx_back" :style="'cursor:' + cursor"></canvas>
          <input name="text" id="text" @blur="handleTextBlur" @keyup.enter="handleTextBlur" v-model="text" autofocus
            autocomplete="off" :style="
              'font-size:' + (this.slide * 10 + 14) + 'px;color:' + defaultColor
            " />
        </div>
        <div :class="['tools', 'settings', isExpand ? '' : 'noExpand']">
          <div class="tool_item" v-for="(item, index) in settings" :key="item.icon">
            <button v-if="index == 0">
              <svg class="icon" aria-hidden="true" :style="'color:' + defaultColor">
                <use :xlink:href="item.icon" />
              </svg>
              <span :style="'color:' + defaultColor">{{ item.name }}</span>
              <el-color-picker v-model="defaultColor"></el-color-picker>
            </button>
            <div v-else-if="index == 1" class="slide">
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="item.icon" />
              </svg>
              <span>{{ item.name }}</span>&emsp;&emsp;
              <el-slider ref="slide" v-model="slide" :min="1" :max="100" :step="1" style="width: 70px"></el-slider>
            </div>
            <button v-else @click.stop="item.fun">
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="item.icon" />
              </svg>
              <span>{{ item.name }}</span>
            </button>
          </div>
          <div class="tool_item" v-for="item in btns" :key="item.icon">
            <button @click.stop="item.fun" v-if="item.name == '上一步'" :disabled="prevDis"
              :style="prevDis ? 'cursor:not-allowed' : ''">
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="item.icon" />
              </svg>
              <span>{{ item.name }}</span>
            </button>
            <button @click.stop="item.fun" v-else-if="item.name == '下一步'" :disabled="nextDis"
              :style="nextDis ? 'cursor:not-allowed' : ''">
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="item.icon" />
              </svg>
              <span>{{ item.name }}</span>
            </button>
            <button @click.stop="item.fun" v-else>
              <svg class="icon" aria-hidden="true" v-if="item.icon">
                <use :xlink:href="item.icon" />
              </svg>
              <span>{{ item.name }}</span>
            </button>
          </div>
          <div class="tool_item go_up">
            <button @click.stop="handleShowOrHide(0)">
              <i class="el-icon-caret-top"></i>
              <span>收起</span>
            </button>
          </div>
          <div class="pull" v-if="!isExpand">
            <span class="line"></span>
            <span class="round" title="展开" @click.stop="handleShowOrHide(1)"></span>
          </div>
        </div>
        <div :class="['tools', 'bars', showTools ? '' : 'hideTools']">
          <div class="el-icon-s-tools arrow" v-if="!showTools" title="展开" @click.stop="handleShowTools(1)"></div>
          <div class="el-icon-arrow-right arrow" v-else title="收起" @click.stop="handleShowTools(0)"></div>
          <div :class="[
            'tool_item',
            activeTool == item.toolType ? 'activeTool' : '',
          ]" v-for="item in tools" :key="item.toolType" @click.stop="handleChangeToolType(item.toolType)">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="item.icon" />
            </svg>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import cursors from "./cursor";
import "../../../assets/drawIcon/iconfont";
import bgA from "./img";
export default {
  name: "imgDraw",
  props: {
    drawShow: {
      type: Boolean,
      default: false,
    },
    bg: {
      type: String,
    },
    closeDraw: {
      type: Function,
    },
  },
  data() {
    return {
      show: true,
      defaultColor: "#333333",
      cursor: `url('${cursors.pen}'),auto`,
      slide: 1,
      settings: [
        {
          icon: "#icon-youqitong_huaban1",
          name: "颜色",
          fun: "",
        },
        {
          icon: "#icon-huabi_huaban1",
          name: "粗细",
          fun: "",
        },
        {
          icon: "#icon-fangda_huaban1",
          name: "放大",
          fun: () => {
            return this.handleBeLarge();
          },
        },
        {
          icon: "#icon-suoxiao_huaban1",
          name: "缩小",
          fun: () => {
            return this.handleBeSmall();
          },
        },
      ],
      activeTool: 1,
      tools: [
        {
          icon: "#icon-huabi_huaban1",
          name: "画笔",
          toolType: 1,
        },
        // {
        //   icon: "#icon-zhixian_huaban1",
        //   name: "直线",
        //   toolType: 2,
        // },
        // {
        //   icon: "#icon-yuanquan_huaban1",
        //   name: "圆形",
        //   toolType: 3,
        // },
        // {
        //   icon: "#icon-juxinggongju_huaban1",
        //   name: "矩形",
        //   toolType: 4,
        // },
        // {
        //   icon: "#icon-xiangpi_huaban1",
        //   name: "橡皮",
        //   toolType: 5,
        // },
        {
          icon: "#icon-wenzi_huaban1",
          name: "文字",
          toolType: 6,
        },
      ],
      btns: [
        {
          icon: "#icon-chexiao",
          name: "上一步",
          fun: () => {
            return this.handlePrev();
          },
        },
        {
          icon: "#icon-zhongzuo",
          name: "下一步",
          fun: () => {
            return this.handleNext();
          },
        },
        {
          icon: "#icon-lajixiang_huaban1",
          name: "清除",
          fun: () => {
            return this.handleClearCanvas();
          },
        },
        {
          // icon: "#icon-baocun",
          icon: "",
          name: "关闭",
          fun: () => {
            // return this.handleCanvas2Img();
            // return (this.show = false);
            return this.$emit("closeDraw");
          },
        },
        {
          icon: "",
          name: "保存批注",
          fun: () => {
            return this.handleSave();
          },
        },
      ],
      canvas_front: null,
      canvas_back: null,
      canvas_base: null,
      ctx_base: null,
      ctx_front: null,
      ctx_back: null,
      currentImg: {
        url: "",
        width: "",
        height: "",
        scale: 1,
        index: 0,
      },
      isExpand: 1,
      showTools: 1,
      canDraw: false,
      text: "",
      canvasStore: [""],
      prevDis: true,
      nextDis: true,
      baseMap: "",
      tl: 0,
      tt: 0,
    };
  },
  methods: {
    /** 显示或隐藏设置栏*/
    handleShowOrHide(status) {
      this.isExpand = status;
    },
    /** 显示或隐藏工具栏*/
    handleShowTools(status) {
      this.showTools = status;
    },
    handleShowCanvas() {
      this.show = true;
    },
    /** 工具切换*/
    handleChangeToolType(type) {
      this.activeTool = type;
      switch (type) {
        case 0:
          this.cursor = `pointer`;
          break;
        case 1:
          this.cursor = `url('${cursors.pen}'),auto`;
          break;
        case 2:
          this.cursor = `crosshair`;
          break;
        case 3:
          this.cursor = `crosshair`;
          break;
        case 4:
          this.cursor = `crosshair`;
          break;
        case 5:
          this.cursor = `url('${cursors.eraser}'),auto`;
          break;
        case 6:
          this.cursor = `url('${cursors.text}'),auto`;
          break;
        default:
          this.cursor = `url('${cursors.pen}'),auto`;
          break;
      }
      this.handleDrawCanvas(type);
    },
    /** 初始化画布*/
    handleInitCanvas() {
      this.currentImg = {
        url: this.bg || bgA,
        width: "",
        height: "",
        scale: 1,
        index: 0,
      };
      this.canvasStore = [this.bg || bgA];
      this.prevDis = true;
      this.nextDis = true;
      this.baseMap = this.bg || bgA;
      // 用于绘制的画板
      this.canvas_front = document.getElementById("ctx_front");
      // 用于生成绘制后图片的画板
      this.canvas_back = document.getElementById("ctx_back");
      // 底图画板，橡皮擦除时获取像素放到绘制画板中，达到不擦出底图的效果
      this.canvas_base = document.getElementById("ctx_base");

      this.ctx_base = this.canvas_base.getContext("2d");
      this.ctx_front = this.canvas_front.getContext("2d");
      this.ctx_back = this.canvas_back.getContext("2d");
      this.ctx_front.strokeStyle = this.defaultColor;
      let img = new Image();
      img.src = this.baseMap;
      img.crossOrigin = "";
      let _this = this;
      img.onload = function () {
        let _wWith = window.screen.availWidth - 100
        let _width = parseInt(this.width);
        let _height = parseInt(this.height);
        let width = _wWith
        let height = _height / _width * width
        _this.currentImg.width = width;
        _this.currentImg.height = height;
        _this.canvas_front.width = width;
        _this.canvas_front.height = height;
        _this.canvas_back.width = width;
        _this.canvas_back.height = height;
        _this.canvas_base.width = width;
        _this.canvas_base.height = height;
        _this.ctx_front.drawImage(this, 0, 0, width, height);
        _this.ctx_back.drawImage(this, 0, 0, width, height);
        _this.ctx_base.drawImage(this, 0, 0, width, height);
      };
    },
    /** 处理放大缩小*/
    handleDrawImage() {
      let _this = this;
      let img = new Image();
      let baseImg = new Image();
      img.src = this.currentImg.url;
      baseImg.src = this.baseMap;
      _this.currentImg.width = _this.currentImg.width * this.currentImg.scale;
      _this.currentImg.height = _this.currentImg.height * this.currentImg.scale;
      img.onload = function () {
        _this.canvas_front.width = _this.currentImg.width;
        _this.canvas_front.height = _this.currentImg.height;
        _this.canvas_back.width = _this.currentImg.width;
        _this.canvas_back.height = _this.currentImg.height;
        _this.ctx_front.drawImage(
          this,
          0,
          0,
          _this.currentImg.width,
          _this.currentImg.height
        );
        _this.ctx_back.drawImage(
          this,
          0,
          0,
          _this.currentImg.width,
          _this.currentImg.height
        );
      };
      baseImg.onload = () => {
        _this.canvas_base.width = _this.currentImg.width;
        _this.canvas_base.height = _this.currentImg.height;
        _this.ctx_base.drawImage(
          baseImg,
          0,
          0,
          _this.currentImg.width,
          _this.currentImg.height
        );
      };
    },
    handleBeLarge() {
      this.currentImg.scale = 1;
      this.currentImg.scale += 0.1;
      this.$nextTick(() => {
        this.handleDrawImage();
      });
    },
    handleBeSmall() {
      this.currentImg.scale = 1;
      this.currentImg.scale -= 0.1;
      this.$nextTick(() => {
        this.handleDrawImage();
      });
    },
    /** 下载图片*/
    handleCanvas2Img() {
      let canvas = document.getElementById("ctx_back");
      this.$refs.download.href = canvas.toDataURL();
      this.$refs.download.click();
    },
    /** 清除画布*/
    handleClearCanvas() {
      this.handleInitCanvas();
    },
    handleFrommatCanvas() {
      this.ctx_front.clearRect(
        0,
        0,
        this.canvas_front.width,
        this.canvas_front.height
      );
    },
    handleDrawCanvas(type) {
      // type
      // const type = this.activeTool
      this.canDraw = false;
      let sx, sy, mx, my;
      let text = document.getElementById("text");
      //鼠标按下
      let mousedown = (e) => {
        this.ctx_front.strokeStyle = this.defaultColor;
        this.ctx_front.lineWidth = this.slide;
        e = e || window.event;
        sx = e.clientX - this.canvas_front.offsetLeft;
        sy = e.clientY - this.canvas_front.offsetTop;
        const cbx = this.ctx_base.getImageData(
          (e.offsetX || e.pageX) - this.slide / 2,
          (e.offsetY || e.pageY) - this.slide / 2,
          this.slide * 2,
          this.slide * 2
        );
        this.ctx_front.moveTo(sx, sy);
        this.canDraw = true;

        switch (type) {
          case 1:
            this.ctx_front.beginPath();
            break;
          case 5:
            this.ctx_front.putImageData(
              cbx,
              (e.offsetX || e.pageX) - this.slide / 2,
              (e.offsetY || e.pageY) - this.slide / 2
            );
            break;
          case 6:
            this.handleTextBlur();
            this.text = "";
            text.style.fontSize = 14 + this.slide * 10 + "px";
            text.style.color = this.defaultColor;
            text.style.left =
              (e.offsetX || e.pageX) + this.canvas_front.offsetLeft - 20 + "px";
            text.style.top =
              (e.offsetY || e.pageY) + this.canvas_front.offsetTop - 10 + "px";
            text.style.zIndex = 10;
            text.style.display = "block";
            this.tl = (e.offsetX || e.pageX) - 20;
            this.tt = (e.offsetY || e.pageY) + 10;
            break;
        }
      };
      let mousemove = (e) => {
        e = e || window.event;
        var scrollL =
          document.getElementsByClassName("d_body")[0].scrollLeft ||
          document.getElementsByClassName("d_body")[0].scrollLeft;
        var scrollT =
          document.getElementsByClassName("d_body")[0].scrollTop ||
          document.getElementsByClassName("d_body")[0].scrollTop;
        mx = e.clientX - this.canvas_front.offsetLeft + scrollL;
        my = e.clientY - this.canvas_front.offsetTop + scrollT;
        const cbx = this.ctx_base.getImageData(
          (e.offsetX || e.pageX) - this.slide / 2,
          (e.offsetY || e.pageY) - this.slide / 2,
          this.slide * 2,
          this.slide * 2
        );
        if (this.canDraw) {
          switch (type) {
            case 1:
              this.ctx_front.lineTo(mx - 8, my);
              this.ctx_front.stroke();
              break;
            case 2:
              this.handleFrommatCanvas();
              this.ctx_front.beginPath();
              this.ctx_front.moveTo(sx - 10, sy - 20);
              this.ctx_front.lineTo(mx - 10, my - 20);
              this.ctx_front.stroke();
              break;
            case 3:
              this.handleFrommatCanvas();
              this.ctx_front.beginPath();
              // eslint-disable-next-line no-case-declarations
              let rds = Math.sqrt(
                (sx - 10 - mx) * (sx - 10 - mx) +
                (sy - 49 - my) * (sy - 49 - my)
              );
              this.ctx_front.arc(sx - 15, sy - 69, rds, 0, Math.PI * 2, false);
              this.ctx_front.stroke();
              break;
            case 4:
              this.handleFrommatCanvas();
              this.ctx_front.beginPath();
              this.ctx_front.moveTo(sx - 10, sy - 79);
              this.ctx_front.lineTo(mx - 10, sy - 79);
              this.ctx_front.lineTo(mx - 10, my - 79);
              this.ctx_front.lineTo(sx - 10, my - 79);
              this.ctx_front.lineTo(sx - 10, sy - 79);
              this.ctx_front.stroke();
              break;
            case 5:
              this.ctx_front.putImageData(
                cbx,
                (e.offsetX || e.pageX) - this.slide + 20,
                (e.offsetY || e.pageY) - this.slide + 20
              );
              break;
          }
        }
      };
      let mouseup = () => {
        if (this.canDraw) {
          this.canDraw = false;
          this.ctx_front.closePath();
          if (type != 6) {
            this.handleSaveCanvasStore();
          }
        }
      };
      this.canvas_front.onmousedown = (e) => mousedown(e);
      this.canvas_front.onmousemove = (e) => mousemove(e);
      this.canvas_front.onmouseup = (e) => mouseup(e);
      this.canvas_front.onmouseout = (e) => mouseup(e);
      this.canvas_front.onmouseleave = (e) => mouseup(e);

      const newHandlemousedown = function (e) {
        mousedown(e.touches[0])
      }
      const newHandlemousemove = function (e) {
        mousemove(e.touches[0])
      }
      const newHandlemouseup = function (e) {
        mouseup(e.touches[0])
      }
      // this.canvas_front.removeEventListener("touchstart",newHandlemousedown,true);
      // this.canvas_front.removeEventListener("touchmove",newHandlemousemove,true);
      // this.canvas_front.removeEventListener("touchend",newHandlemouseup,true);
      this.canvas_front.ontouchstart = newHandlemousedown
      this.canvas_front.ontouchmove = newHandlemousemove
      this.canvas_front.ontouchend = newHandlemouseup
      // this.canvas_front.addEventListener("touchstart",newHandlemousedown,false);
      // this.canvas_front.addEventListener("touchmove",newHandlemousemove,false);
      // this.canvas_front.addEventListener("touchend",newHandlemouseup,false);
      // this.canvas_front.ontouchstart = (e) => mousedown(e);
      // this.canvas_front.ontouchmove = (e) => mousemove(e);

      // this.canvas_front.ontouchend  = (e) => mouseup(e);
    },
    /** 失焦或者回车绘制文本，框隐藏*/
    handleTextBlur() {
      let text = document.getElementById("text");
      this.ctx_front.font = `300 ${text.style.fontSize} sans-serif`;
      this.ctx_front.fillStyle = this.defaultColor;
      this.ctx_front.fillText(this.text, this.tl, this.tt);
      text.style.display = "none";
      this.text = "";
      text.value = "";
      this.handleSaveCanvasStore();
    },
    /** 上一步*/
    handlePrev() {
      if (this.currentImg.index > 0) {
        this.nextDis = false;
        this.currentImg.index -= 1;
        this.currentImg.index == 0
          ? (this.prevDis = true)
          : (this.prevDis = false);
        this.currentImg.url = this.canvasStore[this.currentImg.index];
        this.currentImg.scale = 1;
        this.handleDrawImage();
      } else {
        this.prevDis = true;
      }
    },
    /** 下一步*/
    handleNext() {
      if (this.currentImg.index < this.canvasStore.length - 1) {
        this.prevDis = false;
        this.currentImg.index += 1;
        this.currentImg.index == this.canvasStore.length - 1
          ? (this.nextDis = true)
          : (this.nextDis = false);
        this.currentImg.url = this.canvasStore[this.currentImg.index];
        this.currentImg.scale = 1;
        this.handleDrawImage();
      } else {
        this.nextDis = true;
      }
    },
    /** 保存绘制*/
    handleSaveCanvasStore() {
      let url = this.canvas_front.toDataURL();
      let image = new Image();
      image.src = url;
      image.onload = () => {
        this.ctx_front.clearRect(
          0,
          0,
          this.canvas_front.width,
          this.canvas_front.height
        );
        this.ctx_front.drawImage(image, 0, 0, image.width, image.height);
        this.ctx_back.drawImage(image, 0, 0, image.width, image.height);
        const url2 = this.canvas_back.toDataURL();
        this.currentImg.url = url2;
        this.currentImg.index += 1;
        this.canvasStore.push(url2);
        this.prevDis = false;
        console.log(this.canvasStore);
      };
    },
    // 将网络图片转换成base64格式
    transBase64FromImage(image) {
      let canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      let ctx = canvas.getContext("2d");
      ctx.drawImage(image, 0, 0, image.width, image.height);
      // 可选其他值 image/jpeg
      return canvas.toDataURL("image/jpeg");
    },
    // 设置需要展示的图片  base64
    setAvatarBase64(src, callback) {
      let _this = this;
      let image = new Image();
      // 处理缓存
      // image.src = src + "?v=" + Math.random();
      image.src = src;
      // 支持跨域图片
      image.crossOrigin = "*";
      image.onload = function () {
        let base64 = _this.transBase64FromImage(image);
        // callback && callback(base64);
        console.log(base64);
        // return base64
      };
    },
    handleSave() {
      let url = this.canvas_back.toDataURL();
      console.log(url);
      this.$emit("addImgDraw", url);
    },
    //双指
    doubleFin() {
      // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行
      let that = this;
      this.$nextTick(() => {
        // 获取放大或缩小的区域DOM
        let matrix_box = document.querySelector(".board");
        matrix_box.addEventListener("touchstart", function (event) {
          var touches = event.touches;
          var events = touches[0];
          var events2 = touches[1];

          // event.preventDefault();

          // 第一个触摸点的坐标
          that.displacement.pageX = events.pageX;
          that.displacement.pageY = events.pageY;

          that.displacement.moveable = true;

          if (events2) {
            that.displacement.pageX2 = events2.pageX;
            that.displacement.pageY2 = events2.pageY;
          }

          that.displacement.originScale = that.displacement.scale || 1;
          // console.log(that.displacement);
        });
        document.addEventListener("touchmove", function (event) {
          if (!that.displacement.moveable) {
            return;
          }

          event.preventDefault();

          var touches = event.touches;
          var events = touches[0];
          var events2 = touches[1];
          // 双指移动
          if (events2) {
            // 第2个指头坐标在touchmove时候获取
            if (!that.displacement.pageX2) {
              that.displacement.pageX2 = events2.pageX;
            }
            if (!that.displacement.pageY2) {
              that.displacement.pageY2 = events2.pageY;
            }

            // 双指缩放比例计算
            var zoom =
              that.getDistance(
                {
                  x: events.pageX,
                  y: events.pageY
                },
                {
                  x: events2.pageX,
                  y: events2.pageY
                }
              ) /
              that.getDistance(
                {
                  x: that.displacement.pageX,
                  y: that.displacement.pageY
                },
                {
                  x: that.displacement.pageX2,
                  y: that.displacement.pageY2
                }
              );
            // 应用在元素上的缩放比例
            var newScale = that.displacement.originScale * zoom;
            // 最大缩放比例限制
            // if (newScale > 1) {
            //   newScale = 1;
            // }
            // 记住使用的缩放值
            that.displacement.scale = newScale;

            this.currentImg.scale = newScale
            this.handleDrawImage()
            // 图像应用缩放效果
            // console.log(newScale);
            // matrix_box.style.transform = "scale(" + newScale + ")";
            // 设置旋转元素的基点位置
            // matrix_box.style.transformOrigin = "0px 0px 0px";
          }
        });
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.show = this.drawShow;
      this.handleInitCanvas();
      this.handleChangeToolType(1);
      // this.doubleFin();
    });
  },
  watch: {
    drawShow(val) {
      this.show = val;
      this.ctx_base = null;
      this.ctx_front = null;
      this.ctx_back = null;
      this.handleInitCanvas();
      if (this.$equipment()) {
        this.handleChangeToolType(0);

        this.tools = [
          {
            icon: "#icon-zhixian_huaban1",
            name: "移动",
            toolType: 0,
          }, {
            icon: "#icon-huabi_huaban1",
            name: "画笔",
            toolType: 1,
          },
          {
            icon: "#icon-wenzi_huaban1",
            name: "文字",
            toolType: 6,
          },
        ]
      } else {
        this.handleChangeToolType(1);

        this.tools = [{
          icon: "#icon-huabi_huaban1",
          name: "画笔",
          toolType: 1,
        },
        {
          icon: "#icon-wenzi_huaban1",
          name: "文字",
          toolType: 6,
        },
        ]
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="css">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.imgDraw>>>.el-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.imgDraw>>>.el-dialog>div {
  width: 100%;
  box-sizing: border-box;
}

.imgDraw>>>.el-dialog .el-dialog__header {
  padding: 0 20px;
}

.imgDraw>>>.el-dialog .el-dialog__header p {
  padding: 20px 0;
  border-bottom: 1px solid #bdbdbd;
}

.imgDraw>>>.el-dialog .el-dialog__body {
  padding: 10px 20px;
  flex: 1;
  height: 0;
  padding-top: 0;
  position: relative;
  overflow: hidden;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body {
  height: 100%;
  overflow-y: auto;
  padding-top: 20px;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .board {
  position: relative;
  min-height: 100%;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .board canvas {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .board #ctx_front {
  z-index: 5;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .board #ctx_back {
  z-index: 3;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .board #ctx_base {
  z-index: 1;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .board #text {
  position: absolute;
  z-index: -1;
  resize: none;
  outline: none;
  border: 1px dashed #eeeeee;
  overflow: hidden;
  background: transparent;
  line-height: 30px;
  display: none;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .tools {
  width: 100%;
  position: absolute;
  display: flex;
  z-index: 5;
  background: #ffffff;
  transition: all 0.2s ease-in-out;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 5px 10px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border: 1px solid #eeeeee;
  border-top: 0;
  width: auto;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .tool_item {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .tool_item:not(:last-of-type) {
  margin-right: 25px;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .go_up {
  margin-right: 0 !important;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  background: #ffffff;
  border: 1px solid #eeeeee;
  outline: none;
  cursor: pointer;
  position: relative;
  flex-wrap: nowrap;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings button svg {
  color: #333333;
  font-size: 18px;
  margin-right: 5px;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings button span {
  white-space: nowrap;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings button>>>.el-color-picker {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings button>>>.el-color-picker .el-color-picker__trigger {
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .slide {
  width: 150px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .slide svg {
  font-size: 18px;
  margin-right: 5px;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .slide>>>.el-slider {
  flex: 1;
  width: 0;
  margin-left: 10px;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .slide>>>.el-slider .el-slider__button-wrapper .el-slider__button {
  width: 12px;
  height: 12px;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .pull {
  position: absolute;
  right: 20px;
  bottom: -45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-right: 0;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .pull .line {
  width: 2px;
  height: 30px;
  background: dodgerblue;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .settings .pull .round {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: dodgerblue;
  cursor: pointer;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars {
  top: 100px;
  right: 30px;
  z-index: 10;
  padding: 15px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border: 1px solid #eeeeee;
  width: auto;
  display: flex;
  flex-direction: column;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .tool_item {
  cursor: pointer;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .tool_item:not(:last-of-type) {
  margin-bottom: 15px;
  border-bottom: 1px solid #dddddd;
  padding-bottom: 10px;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .tool_item svg {
  font-size: 24px;
  margin-right: 8px;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .tool_item span {
  font-size: 18px;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .tool_item:hover svg {
  color: dodgerblue;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .tool_item:hover span {
  color: dodgerblue;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .activeTool {
  border-color: dodgerblue !important;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .activeTool svg {
  color: dodgerblue;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .activeTool span {
  color: dodgerblue;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .arrow {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  border: 1px solid #606266;
  color: #606266;
  position: absolute;
  left: -10px;
  background: #ffffff;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .el-icon-s-tools {
  left: -30px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  color: dodgerblue;
  border-color: dodgerblue;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .bars .el-icon-arrow-right {
  left: calc(100% - 10px);
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .hideTools {
  right: -100px;
}

.imgDraw>>>.el-dialog .el-dialog__body .d_body .noExpand {
  top: -50px;
}

.imgDraw>>>.el-dialog .el-dialog__footer {
  text-align: center !important;
}

.imgDraw>>>.el-dialog .el-dialog__footer span button {
  padding-left: 40px;
  padding-right: 40px;
}

.imgDraw>>>.el-dialog .el-dialog__footer span button:first-of-type {
  margin-right: 50px;
}

.imgDraw>>>.el-dialog .el-dialog__footer span button:last-of-type {
  margin-left: 50px;
}

div {
  user-select: none;
}
</style>