uni-image-editor 1.0.0

package/js/const.js

@@ -0,0 +1,242 @@
+/*
+ * @Author: msc 864078729@qq.com
+ * @Date: 4024-04-26 09:35:49
+ * @LastEditors: msc 862078729@qq.com
+ * @LastEditTime: 2024-06-17 09:44:26
+ * @FilePath: \code\components\image-editor\js\const.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+// 定义图片编辑器支持的编辑类型
+export const IMG_EDITOR_EDIT_TYPE = {
+  graffiti: "graffiti", // 涂鸦
+  text: "text", // 文字
+  cut: "cut", // 裁剪
+};
+
+// 定义图片编辑器可用的工具类型
+export const IMG_EDITOR_TOOL_TYPE = {
+  graffiti: "graffiti", // 涂鸦
+  text: "text", // 文字
+  cut: "cut", // 裁剪
+  redo: "redo", // 重做
+  repeal: "repeal", // 撤销
+  clear: "clear", // 清空
+};
+
+// 定义图片编辑器工具类型的中文描述
+export const IMG_EDITOR_TOOL_TYPE_TEXT = {
+  [IMG_EDITOR_TOOL_TYPE.graffiti]: "涂鸦",
+  [IMG_EDITOR_TOOL_TYPE.text]: "文字",
+  [IMG_EDITOR_TOOL_TYPE.cut]: "裁剪",
+  [IMG_EDITOR_TOOL_TYPE.redo]: "重做",
+  [IMG_EDITOR_TOOL_TYPE.repeal]: "撤销",
+  [IMG_EDITOR_TOOL_TYPE.clear]: "清空",
+};
+
+// 能取消的操作，如文本、涂鸦，开始时不删除撤销的步骤吗，确认后再删除对应的步骤
+export const CAN_CANCEL_EDIT_TYPE = [
+  IMG_EDITOR_EDIT_TYPE.cut,
+  IMG_EDITOR_EDIT_TYPE.text,
+];
+
+// 定义涂鸦功能中可用的形状类型
+export const IMG_EDITOR_GRAFFITI_SHAPE_TYPE = {
+  curve: "curve", // 曲线
+  line: "line", // 直线
+  rect: "rect", // 矩形
+  circle: "circle", // 圆形
+  hollowRect: "hollowRect", // 空心矩形
+  hollowCircle: "hollowCircle", // 空心圆形
+};
+
+// 定义图片编辑器在处理或渲染图片时使用的数据类型
+export const IMG_EDITOR_RENDER_TYPE = {
+  img: "img", // 图片
+  data: "data", // 数据（可能指图片数据的某种表示形式，如Base64编码的字符串）
+};
+
+export const DEFAULT_TOOLS_CONFIGS = [
+  // 涂鸦工具配置对象
+  {
+    // 工具名称，对应 IMG_EDITOR_TOOL_TYPE 中的 graffiti
+    name: IMG_EDITOR_TOOL_TYPE.graffiti,
+    // 图标类名
+    icon: "icon-tuya",
+    // 默认颜色
+    color: "#000000",
+    // 图标大小
+    iconSize: 40,
+    // 工具提示文本，根据工具类型从 IMG_EDITOR_TOOL_TYPE_TEXT 中获取
+    text: IMG_EDITOR_TOOL_TYPE_TEXT[IMG_EDITOR_TOOL_TYPE.graffiti],
+    // 激活时的颜色
+    activeColor: "#2979ff",
+    // 文本大小（尽管这个属性在涂鸦工具配置中可能并不直接用到，但保持与其他工具配置的一致性）
+    textSize: 24,
+    // 涂鸦配置对象
+    graffitiConfigs: {
+      // 可选颜色列表
+      colors: ["#ff0000", "#1c9d02", "#000000", "#006ce6", "#efaa03", "#ccc"],
+      // 可用形状列表
+      shapes: [
+        // 曲线
+        { icon: "icon-tuxiang-biaojiquxian-01", name: "curve" },
+        // 直线
+        { icon: "icon-zhixian1", name: "line" },
+        // 空心圆
+        { icon: "icon-xingzhuang-tuoyuanxing", name: "hollowCircle" },
+        // 实心圆
+        { icon: "icon-circle", name: "circle" },
+        // 空心矩形
+        { icon: "icon-16gl-square", name: "hollowRect" },
+        // 实心矩形
+        { icon: "icon-16gf-square", name: "rect" },
+      ],
+      // 线条粗细可选值列表
+      roughs: [2, 4, 6, 8, 10, 12],
+    },
+  },
+  // 文本工具配置对象
+  {
+    // 工具名称，对应 IMG_EDITOR_TOOL_TYPE 中的 text
+    name: IMG_EDITOR_TOOL_TYPE.text,
+    // 图标类名
+    icon: "icon-wenzi",
+    // 默认颜色
+    color: "#000000",
+    // 图标大小
+    iconSize: 40,
+    // 文本大小
+    textSize: 24,
+    // 工具提示文本，根据工具类型从 IMG_EDITOR_TOOL_TYPE_TEXT 中获取
+    text: IMG_EDITOR_TOOL_TYPE_TEXT[IMG_EDITOR_TOOL_TYPE.text],
+    // 激活时的颜色
+    activeColor: "#2979ff",
+    // 文本配置对象
+    textConfigs: {
+      // 可选颜色列表
+      colors: ["#ff0000", "#1c9d02", "#000000", "#006ce6", "#efaa03", "#ccc"],
+      // 文本大小可选值列表
+      sizes: [12, 14, 16, 18, 20, 22],
+    },
+  },
+  // 裁剪工具配置
+  {
+    // 工具名称，对应 IMG_EDITOR_TOOL_TYPE 中的 cut
+    name: IMG_EDITOR_TOOL_TYPE.cut,
+    // 图标类名
+    icon: "icon-caijian",
+    // 默认颜色
+    color: "#000000",
+    // 文本大小（尽管这个属性可能并不直接用于图标工具，但保持与其他工具配置的一致性）
+    textSize: 24,
+    // 图标大小
+    iconSize: 40,
+    // 工具提示文本，根据工具类型从 IMG_EDITOR_TOOL_TYPE_TEXT 中获取
+    text: IMG_EDITOR_TOOL_TYPE_TEXT[IMG_EDITOR_TOOL_TYPE.cut],
+    // 激活时的颜色
+    activeColor: "#2979ff",
+  },
+  // 撤销操作工具配置
+  {
+    // 工具名称，对应 IMG_EDITOR_TOOL_TYPE 中的 repeal
+    name: IMG_EDITOR_TOOL_TYPE.repeal,
+    // 图标类名（注意：通常撤销操作图标可能不是 "icon-chexiao1"，这里仅为示例）
+    icon: "icon-chexiao1", // 建议使用更合适的撤销图标类名，如 "icon-undo"
+    // 默认颜色
+    color: "#000000",
+    // 图标大小
+    iconSize: 40,
+    // 文本大小（同样可能不直接用于图标工具）
+    textSize: 24,
+    // 工具提示文本，根据工具类型从 IMG_EDITOR_TOOL_TYPE_TEXT 中获取
+    text: IMG_EDITOR_TOOL_TYPE_TEXT[IMG_EDITOR_TOOL_TYPE.repeal],
+    // 激活时的颜色
+    activeColor: "#2979ff",
+  },
+  // 重做操作工具配置
+  {
+    // 工具名称，对应 IMG_EDITOR_TOOL_TYPE 中的 redo
+    name: IMG_EDITOR_TOOL_TYPE.redo,
+    // 图标类名（注意：通常重做操作图标不是 "icon-chexiao1"，这里仅为示例）
+    icon: "icon-chexiao1", // 建议使用更合适的重做图标类名，如 "icon-redo"
+    // 默认颜色
+    color: "#000000",
+    // 图标大小
+    iconSize: 40,
+    // 文本大小（同样可能不直接用于图标工具）
+    textSize: 24,
+    // 工具提示文本，根据工具类型从 IMG_EDITOR_TOOL_TYPE_TEXT 中获取
+    text: IMG_EDITOR_TOOL_TYPE_TEXT[IMG_EDITOR_TOOL_TYPE.redo],
+    // 激活时的颜色
+    activeColor: "#2979ff",
+  },
+
+  // 清除工具配置
+  {
+    // 工具名称，对应 IMG_EDITOR_TOOL_TYPE 中的 clear
+    name: IMG_EDITOR_TOOL_TYPE.clear,
+    // 图标类名
+    icon: "icon-qingkong",
+    // 默认颜色
+    color: "#000000",
+    // 图标大小
+    iconSize: 40,
+    // 文本大小（同样可能不直接用于图标工具）
+    textSize: 24,
+    // 工具提示文本，根据工具类型从 IMG_EDITOR_TOOL_TYPE_TEXT 中获取
+    text: IMG_EDITOR_TOOL_TYPE_TEXT[IMG_EDITOR_TOOL_TYPE.clear],
+    // 激活时的颜色
+    activeColor: "#2979ff",
+  },
+];
+
+// 文本输入框模态框的输入框默认宽度
+export const INPUT_TEXT_MODAL_INPUT_DEFAULT_WIDTH = 150;
+
+// 文本输入框模态框的输入框默认高度
+export const INPUT_TEXT_MODAL_INPUT_DEFAULT_HEIGHT = 60;
+
+// 文本输入框模态框的拉伸类型，定义了四个方向
+export const INPUT_TEXT_MODAL_STRETCH_TYPE = {
+  topLeft: "top-left", // 左上角
+  topRight: "top-right", // 右上角
+  bottomRight: "bottom-right", // 右下角
+  bottomLeft: "bottom-left", // 左下角
+};
+
+// 文本输入框模态框的拉伸图标配置数组，与拉伸类型一一对应
+export const INPUT_TEXT_MODAL_STRETCH_ICONS_CONFIGS = [
+  {
+    // 左上角的拉伸图标类名
+    icon: "iconfont icon-lashen stretch-icon stretch-icon-top-left",
+    // 对应的拉伸类型
+    name: INPUT_TEXT_MODAL_STRETCH_TYPE.topLeft,
+  },
+  {
+    // 右上角的拉伸图标类名
+    icon: "iconfont icon-lashen stretch-icon stretch-icon-top-right",
+    // 对应的拉伸类型
+    name: INPUT_TEXT_MODAL_STRETCH_TYPE.topRight,
+  },
+  {
+    // 右下角的拉伸图标类名
+    icon: "iconfont icon-lashen stretch-icon stretch-icon-bottom-right",
+    // 对应的拉伸类型
+    name: INPUT_TEXT_MODAL_STRETCH_TYPE.bottomRight,
+  },
+  {
+    // 左下角的拉伸图标类名
+    icon: "iconfont icon-lashen stretch-icon stretch-icon-bottom-left",
+    // 对应的拉伸类型
+    name: INPUT_TEXT_MODAL_STRETCH_TYPE.bottomLeft,
+  },
+];
+
+// 转化网络图片到本地的方式
+export const CONVERT_IMG_NET_TO_LOCAL_TYPE = {
+  // 通过canvas转化
+  canvas: 'canvas',
+  // 通过uni.download下载转化
+  download:'download'
+}