uni-image-editor 1.0.0

package/image-editor.vue

@@ -0,0 +1,971 @@
+<template>
+  <view class="image-editor-container">
+    <view
+      class="image-editor-container-main"
+      v-show="!isCutting"
+      @tap="submitDrawText"
+    >
+      <view class="image-editor-main-content">
+        <view class="content-canvas-area">
+          <view class="content-canvas-container">
+            <div class="image-editor-canvas-loading-mask" v-show="renderCanvasLoading"></div>
+            <canvas
+              :id="canvasId"
+              :canvas-id="canvasId"
+              class="image-editor-canvas"
+              :style="canvasStyle"
+              :disable-scroll="true"
+              @touchstart="handleGraffitiStart"
+              @touchmove="handleGraffitiMove"
+              @touchend="handleGraffitiEnd"
+              @tap.stop="showInputModal"
+              @error="handleCanvasError"
+            >
+            </canvas>
+            <!-- 输入文字弹窗组件 -->
+            <input-text-modal
+              v-model="text"
+              ref="inputTextModal"
+              :color.sync="curTextConfig.color"
+              :size.sync="curTextConfig.size"
+              @submit="drawtTextFinish"
+              @tap.stop="() => {}"
+              @cancel="drawTextCancel"
+              :containerPosition="canvasPostion"
+            />
+          </view>
+        </view>
+        <!-- 图片编辑器工具配置区域-->
+        <view class="content-tool-area">
+          <!-- 点击配置区域不提交文本输入 -->
+          <view class="content-tool-config" @tap.stop="() => {}">
+            <edit-graffiti-config
+              v-if="isEditGraffitiConfig"
+              :configs="graffitiConfigsData"
+              :color.sync="curGraffitiConfig.color"
+              :shape.sync="curGraffitiConfig.shape"
+              :rough.sync="curGraffitiConfig.rough"
+            ></edit-graffiti-config>
+
+            <edit-text-config
+              v-else
+              :configs="textConfigsData"
+              :color.sync="curTextConfig.color"
+              :size.sync="curTextConfig.size"
+            ></edit-text-config>
+          </view>
+          <!-- 图片编辑器工具栏根据列表-->
+          <view class="content-tool-list">
+            <view
+              v-for="(config, index) in filterToolConfigs"
+              :key="index"
+              class="content-tool-item"
+              :class="{ 'content-tool-item-disabled': config.disabled }"
+              :style="{
+                color:
+                  curEditConfigTool === config.name
+                    ? config.activeColor
+                    : config.color,
+              }"
+              @tap="doToolAction(config)"
+            >
+              <i
+                :class="`iconfont ${config.icon}`"
+                :style="{
+                  transform:
+                    config.name === 'redo' ? 'scaleX(-1)' : 'scaleX(1)',
+                  fontSize: config.iconSize + 'px',
+                }"
+              ></i>
+              <text
+                :style="{
+                  fontSize: config.textSize + 'px',
+                }"
+                >{{ config.text }}</text
+              >
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 图片编辑器底部区域 -->
+      <view class="image-editor-bottom">
+        <slot name="cancel">
+          <i class="iconfont icon-cuowuguanbiquxiao" @tap="cancel"></i>
+        </slot>
+        <text class="image-editor-bottom-title">{{ bottomTitle }}</text>
+        <slot name="confirm">
+          <i class="iconfont icon-dui" @tap="confirm"></i>
+        </slot>
+      </view>
+    </view>
+    <!-- 图片裁剪组件 -->
+    <image-clipper
+      v-if="isGetCanvasSize"
+      ref="image-clipper"
+      v-show="isCutting"
+      :image-url="clipImgUrl"
+      @success="cutSuccess"
+      :is-show-photo-btn="false"
+      @cancel="cutFail"
+      @fail="cutFail"
+      :beforeConfirm="beforeCutConfirm"
+      :width="canvasSizeRpx.width"
+      :height="canvasSizeRpx.height"
+    ></image-clipper>
+  </view>
+</template>
+
+<script>
+import {
+  CONVERT_IMG_NET_TO_LOCAL_TYPE,
+  DEFAULT_TOOLS_CONFIGS,
+  IMG_EDITOR_RENDER_TYPE,
+  IMG_EDITOR_TOOL_TYPE,
+  IMG_EDITOR_TOOL_TYPE_TEXT,
+} from "./js/const";
+import ImageClipper from "./components/image-clipper/image-clipper.vue";
+import EditGraffitiConfig from "./components/edit-graffiti-config.vue";
+import EditTextConfig from "./components/edit-text-config.vue";
+import Editor from "./js/editor";
+import { getAutoFitSize, renderAwait, base64ToUrl, convertNetImageUrlToBase64OfH5, convertNetImgUrlToLocal, isBase64Image, isNetImageUrl } from "./js/utils";
+
+import InputTextModal from "./components/input-text-modal.vue";
+
+let editorCtx;
+
+export default {
+  props: {
+    toolConfigs: {
+      type: Array,
+      default(){
+       return  DEFAULT_TOOLS_CONFIGS 
+      },
+    },
+    canvasId: {
+      type: String,
+      default: "image-editor-canvas",
+    },
+    imgUrl: {
+      type: String,
+      default: "",
+    },
+    convertImgType: {
+      type: String,
+      default: CONVERT_IMG_NET_TO_LOCAL_TYPE.canvas,
+    },
+    maxTransparencyRate:{
+      type: Number,
+      default: 5
+    }
+  },
+  components: {
+    ImageClipper,
+    EditGraffitiConfig,
+    EditTextConfig,
+    InputTextModal,
+  },
+  data() {
+    return {
+      // 当前涂鸦的配置对象
+      curGraffitiConfig: {
+        // 涂鸦的颜色
+        color: "",
+        // 涂鸦的形状
+        shape: "",
+        // 涂鸦的粗糙度（可能是笔触的粗细或不规则程度）
+        rough: "",
+      },
+      // 当前文本的配置对象
+      curTextConfig: {
+        // 文本的颜色
+        color: "",
+        // 文本的大小
+        size: "",
+      },
+      // 画布的大小配置
+      canvasSize: {
+        // 画布的宽度
+        width: "",
+        // 画布的高度
+        height: "",
+      },
+      // 当前选中的工具（可能是画笔、橡皮擦等）
+      curTool: "",
+      // 当前编辑配置的工具（用于调整涂鸦或文本属性的工具）
+      curEditConfigTool: "",
+      // 当前画布上的图片
+      curImgUrl: "",
+      // 当前步骤
+      curStep: -1,
+      // 裁剪的图片URL
+      clipImgUrl: "",
+      // 输入模态框是否可见
+      inputModalVisible: false,
+      // 输入模态框的文本内容（
+      text: "",
+      // 画布上元素的位置配置
+      canvasPostion: {
+        // x坐标
+        x: 0,
+        // y坐标
+        y: 0,
+      },
+      // 编辑记录数据
+      editRecordData: [],
+      renderCanvasLoading: false, // 渲染画布加载状态
+      startGraffitiTime: null, // 开始涂鸦时间
+      isGraffiting: false, // 是否正在涂鸦
+      confirmLoading: false,
+    };
+  },
+  computed: {
+    // 过滤后的工具栏配置
+    filterToolConfigs() {
+      return this.toolConfigs.map((item) => {
+        if (item.name === IMG_EDITOR_TOOL_TYPE.redo) {
+          item.disabled =
+            !this.editRecordData.length || // 如果没有编辑记录
+            this.curStep === this.editRecordData.length - 1; // 或者当前步骤是最后一步
+        }
+
+        if (item.name === IMG_EDITOR_TOOL_TYPE.repeal) {
+          item.disabled = this.curStep < 0 || !this.editRecordData.length; // 如果当前步骤小于0或没有编辑记录
+        }
+        return {
+          ...item,
+          iconSize: uni.upx2px(item.iconSize),
+          textSize: uni.upx2px(item.textSize),
+        };
+      });
+    },
+    curEditRecordData() {
+      return this.editRecordData[this.curStep];
+    },
+    // 获取涂鸦配置数据
+    graffitiConfigsData() {
+      return (
+        this.toolConfigs.find(
+          (config) => config.name === IMG_EDITOR_TOOL_TYPE.graffiti
+        )?.graffitiConfigs || {} // 如果找到涂鸦工具配置，则返回涂鸦配置，否则返回空对象
+      );
+    },
+
+    // 返回当前底部的标题（根据是否在编辑涂鸦配置）
+    bottomTitle() {
+      return IMG_EDITOR_TOOL_TYPE_TEXT[this.curEditConfigTool];
+    },
+
+   
+
+    // 获取文本配置数据
+    textConfigsData() {
+      return (
+        this.toolConfigs.find(
+          (config) => config.name === IMG_EDITOR_TOOL_TYPE.text
+        )?.textConfigs || {} // 如果找到文本工具配置，则返回文本配置，否则返回空对象
+      );
+    },
+
+    // 判断当前是否在编辑涂鸦配置
+    isEditGraffitiConfig() {
+      return this.curEditConfigTool === IMG_EDITOR_TOOL_TYPE.graffiti;
+    },
+
+    // 判断当前是否在使用裁剪工具
+    isCutting() {
+      return this.curTool === IMG_EDITOR_TOOL_TYPE.cut;
+    },
+
+    // 返回canvas的样式，包括宽度、高度和背景图片（当前canvas的图片）
+    canvasStyle() {
+      return `width:${this.canvasSize.width}px;height:${this.canvasSize.height}px;background-image:url(${this.curImgUrl});background-size:${this.canvasSize.width}px ${this.canvasSize.height}px;`;
+    },
+
+    // 判断是否已经获取了canvas的大小
+    isGetCanvasSize() {
+      return this.canvasSize.width && this.canvasSize.height;
+    },
+
+    // 返回canvas的高度与宽度的比例
+    canvasSizeRatio() {
+      return this.canvasSize.height / this.canvasSize.width;
+    },
+
+    // 不能传小数否则图片拖动会失效
+    // 传给裁剪组件要传rpx
+    canvasSizeRpx() {
+      return {
+        width: 750,
+        height: parseInt(750 * this.canvasSizeRatio || 1),
+      };
+    },
+  },
+
+  mounted() {
+    this.init();
+  },
+
+  methods: {
+     // 处理canvas渲染错误
+    handleCanvasError(err){
+      console.log(`canvas渲染错误`,err);
+    },    // 取消
+    cancel() {
+      this.$emit("cancel");
+    },
+    // 确认
+    async confirm() {
+      if (this.confirmLoading) {
+        return
+      }
+
+      this.confirmLoading = true
+
+      uni.showLoading({
+        title: "生成图片中",
+        mask: true
+      });
+      await this.submitDrawText(true);
+
+
+
+      // 确保编辑器渲染完成
+      await renderAwait(100)
+
+      try {
+        console.log('校验图片中...');
+        await this.validImage();
+      } catch (error) {
+        this.confirmLoading = false
+        uni.hideLoading()
+        // uni.showToast({
+        //   title: "图片有空白部分,已重置为初始编辑状态,请重新编辑",
+        //   icon: "none",
+        // });
+        // 执行兜底策略，重置图片到初始状态
+        this.clear()
+
+
+        console.log(`图片校验失败${error}`);
+        return
+      }
+      console.log('校验图片成功');
+      let curData
+
+      // 当前步骤为初始状态，且原生图片是网络图片，app端需要转化网络图片为临时路径，h5端需要转化为base64
+      if (this.curStep === -1 && isNetImageUrl(editorCtx.originImgData.url)) {
+        console.log('初始步骤但原生图片是网络图片');
+        let imgData = {
+          url: '',
+          tempFilePath: ''
+        }
+        try {
+
+          // 使用uni.downlaod转化图片中
+          if (this.convertImgType === CONVERT_IMG_NET_TO_LOCAL_TYPE.download) {
+
+            console.log('使用uni.downlaod转化图片中...');
+            // 转化原始网络路径url为临时图片url
+
+
+            const blobUrl = await convertNetImgUrlToLocal(
+              editorCtx.originImgData.url
+            );
+
+            imgData.url = blobUrl;
+       
+
+
+
+
+            // #ifdef H5
+            const tempFilePath = await convertNetImageUrlToBase64OfH5(
+              editorCtx.originImgData.url
+            );
+            imgData.tempFilePath = tempFilePath;
+
+            // #endif 
+          } else {
+// 使用canvas转化图片中
+            console.log('使用canvas转化图片中...');
+            const res = await editorCtx.canvasToImgUrl();
+
+            await this.validImage();
+            imgData.url = res.url;
+            imgData.tempFilePath = res.tempFilePath;
+            console.log(`使用canvas转化图片成功`);
+          }
+
+
+
+
+
+        } catch (error) {
+          this.confirmLoading = false
+          uni.hideLoading()
+          // 执行兜底策略，重置图片到初始状态
+          this.clear()
+          console.log(`转化网络图片失败${error}`);
+          return
+        }
+
+        curData = {
+          imgData
+        }
+
+        // 当前步骤为初始状态，且原生图片不是网络图片，app端不需要转化，h5端需要转化为base64
+      } else if (this.curStep === -1 && !isNetImageUrl(editorCtx.originImgData.url)) {
+        console.log('初始步骤但不原生图片不是网络图片');
+        curData = { imgData: editorCtx.originImgData }
+
+        // #ifdef H5
+        console.log('h5不是网络图片转化初始图片');
+
+        const tempFilePath = await convertNetImageUrlToBase64OfH5(
+          editorCtx.originImgData.url
+        );
+
+        curData = {
+          imgData: {
+            url: editorCtx.originImgData.url,
+            tempFilePath
+          }
+        }
+
+        // #endif 
+
+
+      }
+
+
+
+      else {
+        console.log('不是初始步骤');
+        curData = this.curEditRecordData || { imgData: editorCtx.originImgData }
+      }
+      this.confirmLoading = false
+      uni.hideLoading()
+
+      this.$emit(
+        "success",
+        curData,
+      );
+
+    },
+    // 校验图片
+    validImage() {
+      return editorCtx.validImage();
+    },
+    // 获取编辑器实例
+    getEditorInsatcne() {
+      return editorCtx;
+    },
+    // 执行工具动作
+    doToolAction(config) {
+      // 是否提交渲染文字
+      const isSumbitEmptyText = this.inputModalVisible && !this.text;
+      this.submitDrawText();
+
+      // 设置当前工具
+      this.curTool = config.name;
+
+      // 如果工具是涂鸦或文本类型，则设置当前编辑配置工具
+      if (
+        [IMG_EDITOR_TOOL_TYPE.graffiti, IMG_EDITOR_TOOL_TYPE.text].includes(
+          config.name
+        )
+      ) {
+        this.curEditConfigTool = config.name;
+      }
+
+      // 根据当前工具执行相应的操作
+      switch (this.curTool) {
+        case IMG_EDITOR_TOOL_TYPE.redo: // 重做
+          // 输入空文字时点击撤销或重置提交时，不执行重做和撤销
+          !isSumbitEmptyText && this.redo();
+          break;
+        case IMG_EDITOR_TOOL_TYPE.repeal: // 撤销
+          // 输入空文字时点击撤销或重置提交时，不执行重做和撤销
+          !isSumbitEmptyText && this.repeal();
+          break;
+        case IMG_EDITOR_TOOL_TYPE.clear: // 清除
+          this.clear();
+          break;
+        case IMG_EDITOR_TOOL_TYPE.cut: // 裁剪
+          this.cutStart();
+          break;
+        default:
+          break;
+      }
+    },
+
+    // 撤销操作
+    repeal() {
+      editorCtx.repeal(); // 调用editorCtx的repeal方法
+    },
+
+    // 重做操作
+    redo() {
+      editorCtx.redo(); // 调用editorCtx的redo方法
+    },
+
+    // 清除操作
+    clear() {
+      editorCtx.clear(); // 调用editorCtx的clear方法
+    },
+
+    // 更新canvas的位置
+    updateCanvasPosition() {
+      // 创建一个选择器查询，在当前Vue组件的上下文中查找
+      const query = uni.createSelectorQuery().in(this);
+      query
+        .select(`#${this.canvasId}`) // 选择ID为canvasId的元素
+        .boundingClientRect((res) => {
+          // 获取该元素的边界信息
+          // 更新canvas的位置信息
+          this.canvasPostion.x = res.left;
+          this.canvasPostion.y = res.top;
+        })
+        .exec(); // 执行查询
+    },
+   async beforeCutConfirm(valid){
+     if (!valid) {
+       uni.showToast({
+         title: "裁剪失败,图片的尺寸至少与裁剪框的尺寸相等，或者更大",
+         icon: "none",
+       });
+  
+     }
+
+
+     return valid
+    },
+    // 初始化
+    init() {
+      // 初始化当前工具为涂鸦工具
+      this.curTool = IMG_EDITOR_TOOL_TYPE.graffiti;
+      // 初始化当前编辑配置工具为涂鸦工具
+      this.curEditConfigTool = IMG_EDITOR_TOOL_TYPE.graffiti;
+
+      // 初始化涂鸦工具的配置
+      this.curGraffitiConfig = {
+        // 使用涂鸦配置数据中第一个颜色
+        color: this.graffitiConfigsData.colors[0],
+        // 使用涂鸦配置数据中第一个形状的名称
+        shape: this.graffitiConfigsData.shapes[0].name,
+        // 使用涂鸦配置数据中第一个粗糙度
+        rough: this.graffitiConfigsData.roughs[0],
+      };
+
+      // 初始化文本工具的配置
+      this.curTextConfig = {
+        // 使用文本配置数据中第一个颜色
+        color: this.textConfigsData.colors[0],
+        // 使用文本配置数据中第一个大小
+        size: this.textConfigsData.sizes[0],
+      };
+
+      // 将当前Vue实例的this保存到_this变量中，以便在闭包中使用
+      const _this = this;
+
+      // 获取图片信息
+      uni.getImageInfo({
+        src: this.imgUrl, // 图片的URL
+        success: (imgInfo) => {
+          // 调用函数来获取自动适应的画布大小
+          const size = getAutoFitSize(imgInfo.width, imgInfo.height);
+
+          // 设置画布大小
+          _this.canvasSize = size;
+
+          // 创建一个配置对象opts，用于初始化Editor实例
+          const opts = {
+            initConvert: false, //初始化转化初图片
+            editFinishValid: true, // 编辑完成后校验
+            canvasId: _this.canvasId, // 画布ID
+            originImgUrl: _this.imgUrl, // 原始图片URL
+            vueInstance: _this, // Vue实例
+            // 展开_this.canvasSize对象到opts对象中
+            ..._this.canvasSize,
+            // 当渲染步骤更新时调用此回调函数，并更新当前步骤
+            updateStepCb: (step) => (_this.curStep = step),
+            // 当图片URL更新时调用此回调函数，并更新当前画布图片
+            updateImgUrlCb: (url) => (_this.curImgUrl = url),
+            // 当图片渲染完成后调用此回调函数，并获取新的画布宽度和高度
+            renderImgCb: (width, height) => {
+              _this.canvasSize = { width, height }; // 更新画布大小
+
+              setTimeout(() => {
+                _this.updateCanvasPosition();
+              }, 100);
+            },
+            // 当编辑记录数据更新时调用此回调函数，并更新编辑记录数据
+            updateEditRecordDataCb: (data) => (_this.editRecordData = data),
+            renderCanvasLoadingCb: (val) => _this.renderCanvasLoading = val,
+            maxTransparencyRate: this.maxTransparencyRate
+          };
+
+          // 使用opts配置对象初始化Editor实例
+          editorCtx = new Editor(opts);
+        },
+        fail: (err) => {
+          // 图片信息获取失败时打印错误信息
+          console.log(err);
+        },
+      });
+    },
+
+    // 开始图片裁剪
+    cutStart(data) {
+      // 如果 editorCtx 不存在，则直接返回
+      if (!editorCtx || this.curTool !== IMG_EDITOR_TOOL_TYPE.cut) {
+        return;
+      }
+
+      // 初始化 configs 对象，用于存储编辑配置
+      let configs;
+
+      // 将当前画布上的图片 URL 保存到 this.clipImgUrl
+      // 剪切开始时才把当前图片赋值给剪切组件，防止剪切组件过早执行某些操作
+      this.clipImgUrl = this.curImgUrl;
+
+      // 设置 configs 对象，包括编辑类型和渲染类型
+      configs = {
+        type: this.curTool, // 当前使用的编辑工具
+        renderType: IMG_EDITOR_RENDER_TYPE.img, // 渲染类型为图片
+      };
+
+      // 调用 editorCtx 的 handleEditStart 方法，开始编辑操作
+      editorCtx.handleEditStart(configs);
+    },
+
+    // 图片裁剪失败
+    cutFail(err) {
+      // 如果 editorCtx 不存在，则直接返回
+      if (!editorCtx || this.curTool !== IMG_EDITOR_TOOL_TYPE.cut) {
+        return;
+      }
+
+      // 将当前工具重置为默认的或之前配置的编辑工具
+      this.curTool = this.curEditConfigTool;
+
+      // 调用 editorCtx 的 handleEditFail 方法，传入错误信息
+      editorCtx.handleEditFail(err);
+    },
+
+    // 图片裁剪成功
+    cutSuccess(res) {
+      // 如果 editorCtx 不存在，则直接返回
+      if (!editorCtx || this.curTool !== IMG_EDITOR_TOOL_TYPE.cut) {
+        return;
+      }
+
+      // 根据编辑后的图片尺寸计算适应的画布大小
+      this.canvasSize = getAutoFitSize(res.width, res.height);
+
+      // 初始化 configs 对象，包括图片高度、宽度、图片URL和编辑类型
+
+      const configs = {
+        imgData: {
+          ...res,
+          tempFilePath: res.url,
+          height: this.canvasSize.height, // 编辑后的图片高度
+          width: this.canvasSize.width, // 编辑后的图片宽度
+          url: isBase64Image(res.url) ? base64ToUrl(res.url) : res.url, // 编辑后的图片URL（如果是Base64则转换为URL）
+        },
+        type: this.curTool, // 当前使用的编辑工具
+      };
+
+      // 将当前工具重置为默认的或之前配置的编辑工具
+      this.curTool = this.curEditConfigTool;
+
+      // 调用 editorCtx 的 handleEditFinish 方法，传入编辑成功的配置
+      editorCtx.handleEditFinish(configs);
+    },
+
+    // 开始涂鸦编辑
+    handleGraffitiStart(e) {
+            // 如果 editorCtx 不存在、当前编辑配置工具不是涂鸦工具、或当前工具是裁剪工具，则直接返回
+      if (
+        !editorCtx ||
+        this.curEditConfigTool !== IMG_EDITOR_TOOL_TYPE.graffiti ||
+        this.curTool === IMG_EDITOR_TOOL_TYPE.cut
+      ) {
+        return;
+      }
+
+      this.startGraffitiTime = new Date().getTime();
+
+      // 初始化 configs 对象
+      let configs;
+
+      // 获取触摸事件的第一个触摸点的 x 和 y 坐标
+      const x = e.touches[0].x;
+      const y = e.touches[0].y;
+
+      // 设置 configs 对象，包括涂鸦类型、坐标、颜色、形状、粗糙度、渲染类型和填充颜色
+      configs = {
+        type: this.curEditConfigTool, // 涂鸦类型
+        x, // 涂鸦开始的 x 坐标
+        y, // 涂鸦开始的 y 坐标
+        color: this.curGraffitiConfig.color, // 涂鸦颜色
+        shape: this.curGraffitiConfig.shape, // 涂鸦形状（可能是一个固定的值或多种可选形状）
+        rough: this.curGraffitiConfig.rough, // 涂鸦的粗糙度
+        renderType: IMG_EDITOR_RENDER_TYPE.img, // 渲染类型为图片
+        fillColor: this.curGraffitiConfig.color, // 填充颜色（对于涂鸦来说，可能与颜色相同）
+      };
+
+      // 调用 editorCtx 的 handleEditStart 方法，传入涂鸦配置
+      editorCtx.handleEditStart(configs);
+    },
+
+    // 结束涂鸦编辑
+    handleGraffitiEnd(e) {
+      // 如果 editorCtx 不存在、当前编辑配置工具不是涂鸦工具、或当前工具是裁剪工具，则直接返回
+      if (
+        !editorCtx ||
+        this.curEditConfigTool !== IMG_EDITOR_TOOL_TYPE.graffiti ||
+        this.curTool === IMG_EDITOR_TOOL_TYPE.cut
+      ) {
+        return;
+      }
+
+
+
+      const now = new Date().getTime()
+
+      // 判断当前时间与上一次涂鸦时间的时间差是否小于200ms进行涂鸦防抖或是点击或者长按，执行编辑失败
+      if (now - this.startGraffitiTime < 200 || !this.isGraffiting) {
+        editorCtx.handleEditFail();
+
+        return
+      }
+
+      this.isGraffiting = false
+
+      // 初始化 configs 对象
+      let configs;
+
+      // 获取触摸事件变化中第一个触摸点的 x 和 y 坐标（结束点）
+      const x = e.changedTouches[0].x;
+      const y = e.changedTouches[0].y;
+
+      // 设置 configs 对象，包括涂鸦类型和坐标（结束点）
+      configs = {
+        type: this.curEditConfigTool, // 涂鸦类型
+        x, // 涂鸦结束的 x 坐标
+        y, // 涂鸦结束的 y 坐标
+      };
+
+      editorCtx.handleEditFinish(configs);
+    },
+
+    // 处理涂鸦移动
+    handleGraffitiMove(e) {
+      // 如果 editorCtx 不存在、当前编辑配置工具不是涂鸦工具、或当前工具是裁剪工具，则直接返回
+      if (
+        !editorCtx ||
+        this.curEditConfigTool !== IMG_EDITOR_TOOL_TYPE.graffiti ||
+        this.curTool === IMG_EDITOR_TOOL_TYPE.cut
+      ) {
+        return;
+      }
+
+      // 点击或者长按不会触发move事件，根据这个区分是触摸还是点击长按，过滤这些操作
+      this.isGraffiting = true
+
+      // 获取触摸事件的第一个触摸点的 x 和 y 坐标（移动中的点）
+      const x = e.touches[0].x;
+      const y = e.touches[0].y;
+
+      // 调用 editorCtx 的 handleEditting 方法，传入涂鸦的 x、y 坐标和涂鸦类型
+      // 涂鸦过程中实时更新涂鸦的绘制
+      editorCtx.handleEditting({ x, y, type: IMG_EDITOR_TOOL_TYPE.graffiti });
+    },
+    // 当在canvas上点击时触发的方法
+    showInputModal(e) {
+      // 如果editorCtx不存在或者当前编辑配置工具不是文本工具，则直接返回
+      if (!editorCtx || this.curEditConfigTool !== IMG_EDITOR_TOOL_TYPE.text) {
+        return;
+      }
+
+      // 判断输入模态框是否可见
+      if (!this.inputModalVisible) {
+        // 如果不可见，则设置为可见，并调用开始绘制文本的方法
+        this.inputModalVisible = true;
+        this.drawtTextStart(e);
+        return;
+      }
+
+      this.submitDrawText();
+    },
+     async submitDrawText(noSubmit = false) {
+      if (!editorCtx) {
+        return;
+      }
+
+      if (this.inputModalVisible) {
+        this.inputModalVisible = false;
+       const data = this.$refs.inputTextModal.submit(noSubmit);
+       noSubmit && await this.drawtTextFinish(data) 
+      }
+    },
+
+    // 开始绘制文本的方法
+    drawtTextStart(e) {
+      // 如果editorCtx不存在、输入模态框不可见或者当前编辑配置工具不是文本工具，则直接返回
+      if (
+        !editorCtx ||
+        !this.inputModalVisible ||
+        this.curEditConfigTool !== IMG_EDITOR_TOOL_TYPE.text
+      ) {
+        return;
+      }
+
+      // 初始化配置对象
+      let configs;
+      configs = {
+        type: this.curEditConfigTool, // 文本类型
+        color: this.curTextConfig.color, // 文本颜色
+        size: this.curTextConfig.size, // 文本大小
+        renderType: IMG_EDITOR_RENDER_TYPE.img, // 渲染类型为图片
+      };
+
+      // 调用editorCtx的handleEditStart方法，开始编辑文本
+      editorCtx.handleEditStart(configs);
+
+      // 获取触摸点的客户端坐标（即屏幕上的坐标）
+      const x = e.touches[0].clientX;
+      const y = e.touches[0].clientY;
+
+      // 在输入模态框中显示输入框，并定位到触摸点的位置
+      this.$refs.inputTextModal.showAt(x, y);
+    },
+
+    drawTextCancel() {
+      if (!editorCtx || this.curEditConfigTool !== IMG_EDITOR_TOOL_TYPE.text) {
+      }
+
+      this.inputModalVisible && (this.inputModalVisible = false);
+
+      // 调用 editorCtx 的 handleEditFail 方法，传入错误信息
+      editorCtx.handleEditFail();
+    },
+
+    // 完成绘制文本的方法
+    async drawtTextFinish(state = {}) {
+      // 如果editorCtx不存在、当前编辑配置工具不是文本工具或者输入的内容为空，则直接返回
+      if (!editorCtx || this.curEditConfigTool !== IMG_EDITOR_TOOL_TYPE.text) {
+      }
+
+      if (!state.text.trim()) {
+        this.drawTextCancel();
+        return;
+      }
+
+      // 初始化配置对象
+      let configs = {
+        text: state.text, // 文本内容
+        x: state.left, // 文本开始的x坐标
+        y: state.top, // 文本开始的y坐标
+        maxWidth: state.width, // 文本的最大宽度
+        color: state.color, // 文本颜色
+        size: state.size, // 文本大小
+        lineHeight: state.lineHeight, // 文本行高
+        type: this.curEditConfigTool,
+      };
+
+      // 清空当前文本内容
+      this.text = "";
+
+      // 调用editorCtx的handleEditSuccess方法，完成文本编辑
+     await editorCtx.handleEditFinish(configs);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.image-editor-container {
+  position: relative;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  .image-editor-container-main {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .image-editor-bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 140rpx;
+    padding: 0 40rpx;
+    background-color: #fff;
+
+    .image-editor-bottom-title {
+      font-weight: bold;
+      font-size: 32rpx;
+      color: #000000;
+    }
+    .iconfont {
+      font-size: 55rpx;
+    }
+
+    .icon-dui {
+      font-size: 50rpx;
+    }
+  }
+  .image-editor-main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .content-canvas-area {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      overflow-y: auto;
+      .content-canvas-container {
+        position: relative;
+        .image-editor-canvas-loading-mask{
+            background-color: transparent;
+            z-index: 10070;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+        }
+      }
+    }
+    .content-tool-area {
+      background-color: #fff;
+
+      .content-tool-config {
+        padding: 20rpx 0 20rpx 120rpx;
+        font-size: 24rpx;
+      }
+      .active-edit-config-tool {
+        color: #2979ff;
+      }
+      .content-tool-list {
+        display: flex;
+        padding: 0 30rpx;
+        .content-tool-item-disabled {
+          color: #aaaaaa !important;
+        }
+
+        .content-tool-item {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}
+</style>