uni-image-editor 1.0.0

package/components/input-text-modal.vue

@@ -0,0 +1,431 @@
+<!--
+ * @Author: msc 862078729@qq.com
+ * @Date: 2024-04-29 22:06:07
+ * @LastEditors: msc 862078729@qq.com
+ * @LastEditTime: 2024-06-15 18:08:25
+ * @FilePath: \code\components\image-editor\components\input-text-modal.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <view
+    v-show="visible"
+    class="input-text-modal"
+    :style="modalStyle"
+    @touchstart.self="handleDragStart"
+    @touchmove.self="handleDraging"
+    @touchend.self="handleDragEnd"
+  >
+    <u-input
+      type="textarea"
+      class="input-text-modal-textarea"
+      placeholder=""
+      :spellcheck="false"
+      :clearable="false"
+      :style="{
+        width: '100%',
+        height: '100%',
+        color: color,
+        fontSize: size + 'px',
+      }"
+      :autoHeight="true"
+      v-model="inputValue"
+    />
+    <i
+      v-for="item in strenchIconsConfigs"
+      :key="item.name"
+      :class="item.icon"
+      @touchstart.stop="handleStrenchStart($event, item)"
+      @touchmove.stop="handleStrenchMove($event, item)"
+      @touchend.stop="handleStrenchEnd($event, item)"
+    ></i>
+    <i class="iconfont icon-strike_out" @tap.stop="cancelInputText" />
+  </view>
+</template>
+
+<script>
+import {
+  INPUT_TEXT_MODAL_INPUT_DEFAULT_HEIGHT,
+  INPUT_TEXT_MODAL_INPUT_DEFAULT_WIDTH,
+  INPUT_TEXT_MODAL_STRETCH_ICONS_CONFIGS,
+  INPUT_TEXT_MODAL_STRETCH_TYPE,
+} from "../js/const";
+
+export default {
+  // 组件的props定义，用于接收外部传入的属性值
+  props: {
+    // value属性，类型为String，表示组件内部的值，默认为空字符串
+    value: {
+      type: String,
+      default: "",
+    },
+    // color属性，类型为String，表示文本的颜色，默认为白色
+    color: {
+      type: String,
+      default: "#fff",
+    },
+    // size属性，类型为Number或String，表示文本的大小，默认为12
+    size: {
+      type: [Number, String],
+      default: 12,
+    },
+    // containerPosition属性，类型为Object，表示容器（如模态框）的位置，默认为null
+    containerPosition: {
+      type: Object,
+      default: null,
+    },
+  },
+
+  // 组件的data函数，用于返回组件的初始数据状态
+  data() {
+    return {
+      // inputValue用于存储和显示当前的输入值
+      inputValue: "",
+      // visible用于控制模态框的可见性，但在此代码片段中未使用
+      visible: false,
+      // position对象，用于设置某个元素（如输入框）的位置
+      position: {
+        left: 0,
+        top: 0,
+      },
+      // 输入框的默认宽度
+      width: INPUT_TEXT_MODAL_INPUT_DEFAULT_WIDTH,
+      // 输入框的默认高度
+      height: INPUT_TEXT_MODAL_INPUT_DEFAULT_HEIGHT,
+      // 与可拉伸图标或类似功能相关的配置
+      strenchIconsConfigs: INPUT_TEXT_MODAL_STRETCH_ICONS_CONFIGS,
+      // 与可拉伸功能相关的点数组
+      strenchPoints: [],
+      //与拖动功能相关的点数组
+      dragPoints: [],
+    };
+  },
+
+  // 组件的computed计算属性，用于根据组件的状态返回计算后的值
+  computed: {
+    // modalStyle返回一个样式对象，用于动态设置模态框的样式
+    modalStyle() {
+      return {
+        width: this.width + "px",
+        height: this.height + "px",
+        left: this.position.left + "px",
+        top: this.position.top + "px",
+      };
+    },
+    // exportState返回一个对象，包含了输入框的各种状态信息，如位置、大小、文本内容等
+    exportState() {
+      return {
+        // 根据position和size属性计算出的文本框绘制位置
+        // 给定制定坐标给filltext渲染，渲染出来的文字的x和y坐标相比给定的x,y有差值，需要额外加上差值
+        // 5为弹窗的padding，this.size * 0.1为canvas的filltext的水平对齐方式align离x坐标的差值
+        left: this.position.left + 10 + this.size * 0.1,
+        // 5为弹窗的padding，this.size * 0.1为（行高-当前文字尺寸）/ 2，this.size / 6为canvas的filltext文字对齐方式为top时文字顶端离y坐标的差值
+        top: this.position.top + 10 + 0.1 * this.size + this.size / 6,
+        // 10 为间距
+        width: this.width - 20,
+        // 10 为间距
+        height: this.height - 20,
+        text: this.value,
+        color: this.color,
+        size: this.size,
+        lineHeight: this.size * 1.2,
+      };
+    },
+  },
+
+  // 组件的watch监听器，用于监听data或computed属性的变化，并作出响应
+  watch: {
+    // 监听inputValue的变化，当变化时触发input事件，并传递新的值
+    inputValue: {
+      handler(val) {
+        this.$emit("input", val);
+      },
+      // 设置为immediate: true表示在组件创建时就会立即触发一次handler
+      immediate: true,
+    },
+    // 监听value prop的变化，当变化时更新inputValue的值
+    value: {
+      handler(val) {
+        this.inputValue = val;
+      },
+      // 设置为immediate: true表示在组件创建时就会立即触发一次handler
+      immediate: true,
+    },
+    // 监听exportState计算属性的变化（深度监听），当变化时触发change事件，并传递exportState对象
+    exportState: {
+      handler(val) {
+        this.$emit("change", this.exportState);
+      },
+      // 设置为deep: true表示深度监听exportState的变化
+      deep: true,
+    },
+  },
+  methods: {
+    // 处理拉伸开始的逻辑
+    handleStrenchStart(e, item) {
+      const { x, y } = this.getActualPosition(
+        e.touches[0].clientX,
+        e.touches[0].clientY
+      );
+      this.strenchPoints.push({
+        x,
+        y,
+      });
+    },
+
+    // 处理拉伸过程中
+    handleStrenchMove(e, item) {
+      if (!this.strenchPoints.length) {
+        return;
+      }
+
+      this.strenchPoints.length > 1 && this.strenchPoints.shift();
+
+      const { x, y } = this.getActualPosition(
+        e.touches[0].clientX,
+        e.touches[0].clientY
+      );
+
+      this.strenchPoints.push({
+        x,
+        y,
+      });
+
+      const type = item.name;
+
+      // 计算两个点之间的移动距离
+      const moveX = this.strenchPoints[1].x - this.strenchPoints[0].x;
+
+      const moveY = this.strenchPoints[1].y - this.strenchPoints[0].y;
+
+      // 根据拉伸类型更新元素的位置和大小
+      switch (type) {
+        // 更新左上角拉伸时的位置和大小
+        case INPUT_TEXT_MODAL_STRETCH_TYPE.topLeft:
+          this.position.top = this.position.top + moveY;
+
+          this.position.left = this.position.left + moveX;
+
+          this.width = this.width - moveX;
+
+          this.height = this.height - moveY;
+          break;
+        // 更新右上角拉伸时的位置和大小
+        case INPUT_TEXT_MODAL_STRETCH_TYPE.topRight:
+          this.position.top = this.position.top + moveY;
+          this.width = this.width + moveX;
+
+          this.height = this.height - moveY;
+          break;
+        // 更新左下角拉伸时的位置和大小
+        case INPUT_TEXT_MODAL_STRETCH_TYPE.bottomLeft:
+          this.position.left = this.position.left + moveX;
+          this.width = this.width - moveX;
+
+          this.height = this.height + moveY;
+          break;
+        // 更新右下角拉伸时的位置和大小
+        case INPUT_TEXT_MODAL_STRETCH_TYPE.bottomRight:
+          this.width = this.width + moveX;
+
+          this.height = this.height + moveY;
+
+          break;
+
+        default:
+          break;
+      }
+    },
+    // 处理拉伸结束
+    handleStrenchEnd(e, item) {
+      this.strenchPoints = [];
+    },
+    // 当拖动开始时触发的方法
+    handleDragStart(e) {
+      // 获取触摸点的实际位置（相对于容器）
+      const { x, y } = this.getActualPosition(
+        e.touches[0].clientX, // 触摸点的X坐标
+        e.touches[0].clientY // 触摸点的Y坐标
+      );
+      // 将触摸点的位置信息添加到dragPoints数组中
+      this.dragPoints.push({
+        x,
+        y,
+      });
+    },
+
+    // 当拖动过程中触发的方法
+    handleDraging(e) {
+      // 如果没有dragPoints（即没有开始拖动），则直接返回
+      if (!this.dragPoints.length) {
+        return;
+      }
+
+      // 如果dragPoints中有多个点（通常最多应该只有2个点，用于计算移动距离），则移除第一个点
+      this.dragPoints.length > 1 && this.dragPoints.shift();
+
+      // 获取当前触摸点的实际位置（相对于容器）
+      const { x, y } = this.getActualPosition(
+        e.touches[0].clientX,
+        e.touches[0].clientY
+      );
+
+      // 将新的触摸点位置信息添加到dragPoints数组中
+      this.dragPoints.push({
+        x,
+        y,
+      });
+
+      // 计算移动的距离（即新点与旧点之间的差值）
+      const moveX = this.dragPoints[1].x - this.dragPoints[0].x;
+      const moveY = this.dragPoints[1].y - this.dragPoints[0].y;
+
+      // 更新元素的位置
+      this.position.left += moveX;
+      this.position.top += moveY;
+    },
+
+    // 当拖动结束时触发的方法
+    handleDragEnd(e) {
+      // 清空dragPoints数组，为下一次拖动做准备
+      this.dragPoints = [];
+    },
+
+    // 在指定位置显示元素的方法
+    showAt(x, y) {
+      // 获取相对于容器的实际位置
+      const position = this.getActualPosition(x, y);
+
+      // 计算元素应该显示的位置（通常使其居中显示）
+      this.position.left =
+        position.x - INPUT_TEXT_MODAL_INPUT_DEFAULT_WIDTH / 2;
+      this.position.top =
+        position.y - INPUT_TEXT_MODAL_INPUT_DEFAULT_HEIGHT / 2;
+
+      // 显示元素
+      this.visible = true;
+    },
+
+    // 提交数据并隐藏元素的方法
+    submit(noSubmit = false) {
+      // 触发submit事件，并传递exportState对象
+      !noSubmit && this.$emit("submit", this.exportState);
+      if(noSubmit){
+        return this.exportState 
+      }
+      // 隐藏元素
+      this.hide();
+      // 重置元素状态
+      this.reset();
+
+      
+    },
+
+    // 隐藏元素的方法
+    hide() {
+      this.visible = false;
+    },
+
+    // 显示元素的方法
+    show() {
+      this.visible = true;
+    },
+
+    cancelInputText() {
+      this.$emit("cancel");
+      this.hide();
+      this.reset();
+    },
+
+    // 获取相对于容器的实际位置的方法
+    getActualPosition(x, y) {
+      // 减去容器位置，得到相对于容器的实际位置
+      return {
+        x: x - this.containerPosition.x,
+        y: y - this.containerPosition.y,
+      };
+    },
+
+    // 重置元素状态的方法
+    reset() {
+      // 重置元素的宽度、高度、位置、输入值等属性
+      this.width = INPUT_TEXT_MODAL_INPUT_DEFAULT_WIDTH;
+      this.height = INPUT_TEXT_MODAL_INPUT_DEFAULT_HEIGHT;
+      this.position.left = 0;
+      this.position.top = 0;
+      this.inputValue = "";
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.input-text-modal {
+  position: absolute;
+  padding: 10px;
+  box-sizing: border-box;
+  background-color: transparent;
+  border: 1px solid #fff;
+
+  .input-text-modal-textarea {
+    word-break: break-all;
+    overflow: hidden;
+  }
+  .icon-strike_out {
+    color: rgb(61, 104, 232);
+    background-color: #fff;
+    border-radius: 50%;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    translate: -50% -35rpx;
+  
+  }
+
+  .stretch-icon {
+    color: rgb(61, 104, 232);
+    background-color: #fff;
+    border-radius: 50%;
+  }
+
+  .stretch-icon-top-left {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    translate: -50% -50%;
+  }
+  .stretch-icon-top-right {
+    position: absolute;
+    top: 0;
+    right: 0;
+    translate: 50% -50%;
+  
+    transform: rotate(90deg);
+  }
+  .stretch-icon-bottom-right {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    translate: 50% 50%;
+    
+    transform: rotate(-180deg);
+  }
+  .stretch-icon-bottom-left {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    translate: -50% 50%;
+   
+    transform: rotate(270deg);
+  }
+}
+
+::v-deep .u-input__input {
+  color: inherit !important;
+  font-size: inherit !important;
+  padding: 0;
+  width: 100%;
+  height: 100% !important;
+  max-width: 100% !important;
+  line-height: 1 * 1.2;
+}
+</style>