涂色提组件优化

闫增涛

2024-07-01 0ab7ff07fd29ac32be045d505ae2d2b9290647a7

 src/components/graffiti/index.vue

@@ -13,7 +13,7 @@
        >
      </div>
    </div>
    <div class="footer">
    <div class="footer" :style="{backgroundColor:bcColor}">
      <BrushSize :size="brushSize" @change-size="onChangeSize"  @change-color="onChangeColor" />
      <ToolBtns :tool="brushTool" @change-tool="onChangeTool" />
    </div>
@@ -38,6 +38,10 @@
    },
    imgHeight:{
      type:Number
    },
    bcColor:{
      type:String,
      default:'#fff'
    }
  },
  data() {
@@ -59,12 +63,14 @@
  },
  mounted() {
    this.backgroundImage = this.bcImg
    this.canvas = document.getElementById("canvas");
    this.canvas = (this.container ? this.container : document).getElementById("canvas");
    if (this.canvas.getContext) {
      this.context = this.canvas.getContext("2d", { willReadFrequently: true });
      this.initCanvas();
      // window.addEventListener('resize', updateCanvasPosition);
      window.addEventListener("scroll",this.updateCanvasOffset,true); // 添加滚动条滚动事件监听器
      (
        this.container ? this.container : document
      ).addEventListener("scroll",this.updateCanvasOffset,true); // 添加滚动条滚动事件监听器
      this.getCanvasOffset();
      this.context.lineGap = "round";
      this.context.lineJoin = "round";
@@ -107,7 +113,9 @@
    initCanvas() {
      const that = this
      const resetCanvas = () => {
        const elPanel = document.getElementById("canvas_panel");
        const elPanel = (
        this.container ? this.container : document
      ).getElementById("canvas_panel");
        that.canvas.width = elPanel.clientWidth;
        that.canvas.height = elPanel.clientHeight;
        that.context = that.canvas.getContext("2d", {
@@ -234,7 +242,9 @@
    },
    // 保存为一张图片并下载的方法
    saveImgData() {
      var link = document.createElement("a");
      var link = (
        this.container ? this.container : document
      ).createElement("a");
      var imgData = this.canvas.toDataURL({format: 'png', quality:1, width:20000, height:4000});
      var strDataURI = imgData.substr(22, imgData.length);
      var blob = dataURLtoBlob(imgData);
@@ -269,7 +279,6 @@
    saveData(data) {
      this.historyData.length >= 50 && this.historyData.shift(); // 设置储存上限为50步
      this.historyData.push(data);
      console.log('数据',this.historyData);
    },
    // 清除、撤销、保存状态不需要保持，操作完后恢复笔刷状态
    resetToolActive() {
@@ -297,7 +306,6 @@
  justify-content: space-around;
  align-items: center;
  height: 88px;
  background-color: #fff;
}

#canvas_panel {