字体

src/views/CalligraphyMaster/cread.vue

@@ -271,11 +271,11 @@ const locale_zh = {
   Reset: "重置",
   Flip: "镜像",
   Rotate: "旋转",
-  Draw: "画",
+  Draw: "画笔",
   Shape: "形状标注",
   Icon: "图标标注",
   Text: "文字标注",
-  Mask: "遮罩",
+  Mask: "上传图片",
   Filter: "滤镜",
   Bold: "加粗",
   Italic: "斜体",
@@ -351,7 +351,7 @@ const customTheme = {
   "loadButton.color": "#222",
   "loadButton.fontFamily": "NotoSans, sans-serif",
   "loadButton.fontSize": "12px",
-  // "loadButton.display": "none", // 隐藏
+  "loadButton.display": "none", // 隐藏
 
   // download button
   "downloadButton.backgroundColor": "#fdba3b",
@@ -359,7 +359,7 @@ const customTheme = {
   "downloadButton.color": "#fff",
   "downloadButton.fontFamily": "NotoSans, sans-serif",
   "downloadButton.fontSize": "12px",
-  // "downloadButton.display": "none", // 隐藏
+  "downloadButton.display": "none", // 隐藏
 
   // icons default
   "menu.normalIcon.color": "#8a8a8a",
@@ -623,7 +623,7 @@ export default {
             "shape",
             "icon",
             "text",
-            "filter",
+            // "filter",
           ], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
           //initMenu: "none", // 默认打开的菜单项
           menuBarPosition: "bottom", // 菜单所在的位置
@@ -636,55 +636,72 @@ export default {
       });
       $(".tie-mask-apply").css("display", "none");
       let fontArray = [
-        "FZLTH",
-        "Arial",
-        "Arial Black",
-        "Caveat",
-        "Comic Sans MS",
-        "Courier New",
-        "Georgia1",
-        "Impact",
-        "Lobster Two",
-        "Lucida Console",
-        "Luckiest Guy",
-        "Open Sans",
-        "Pacifico",
-        "Palatino Linotype",
-        "Press Start 2P",
-        "Roboto",
-        "Tahoma",
-        "Tangerine",
-        "Times New Roman",
-        "Tourney",
-        "Ultra",
-        "Verdana",
-        "Symbol",
-        "Webdings",
-        "Wingdings",
-      ];
+        {
+            value: 'FZLTH',
+            img: require('../../assets/teacherdev/img1.png')
+        },
+        {
+            value: 'FZJCGFKTK',
+            img: require('../../assets/teacherdev/img2.png')
+        },
+        {
+            value: 'sourceR',
+            img: require('../../assets/teacherdev/img1.png')
+        },
+        {
+            value: 'robot',
+            img: require('../../assets/teacherdev/img2.png')
+        },
+      ]
+    //   let fontArray = [
+    //     "FZLTH",
+    //     "Arial",
+    //     "Arial Black",
+    //     "Caveat",
+    //     "Comic Sans MS",
+    //     "Courier New",
+    //     "Georgia1",
+    //     "Impact",
+    //     "Lobster Two",
+    //     "Lucida Console",
+    //     "Luckiest Guy",
+    //     "Open Sans",
+    //     "Pacifico",
+    //     "Palatino Linotype",
+    //     "Press Start 2P",
+    //     "Roboto",
+    //     "Tahoma",
+    //     "Tangerine",
+    //     "Times New Roman",
+    //     "Tourney",
+    //     "Ultra",
+    //     "Verdana",
+    //     "Symbol",
+    //     "Webdings",
+    //     "Wingdings",
+    //   ];
 
       let fontSelectHTML =
-        '<select #fontselect class="form-select font-selector">';
+        '<div class="font-select-box"><input class="font-select-value" value="" /><ul #fontselect class="form-select font-selector font-select-list">';
       for (let i = 0; i < fontArray.length; i++) {
         fontSelectHTML +=
-          '<option style="font-family:Arial Black;font-size:30px" value="' +
-          fontArray[i] +
-          '" ' +
-          ">" +
-          fontArray[i] +
-          "</option>";
+          '<li value="' +
+          fontArray[i].value +
+          '" ><img src="'+fontArray[i].img+'" /></li>';
       }
-      fontSelectHTML += "</select>";
+      fontSelectHTML += "</ul></div>";
 
       let textMenuAlign = document.querySelector(
-        ".tui-image-editor-menu-text .tie-text-align-button"
+        ".tui-image-editor-menu-text .tie-text-effect-button"
       );
       textMenuAlign.insertAdjacentHTML("afterbegin", fontSelectHTML);
 
       document
-        .querySelector(".font-selector")
-        .addEventListener("change", () =>
-          this.TUI_updateFontOnText($(".font-selector option:selected").val())
+        .querySelector(".font-selector li")
+        .addEventListener("click", (e) =>
+        console.log($(this))
+
+        //   this.TUI_updateFontOnText($(".font-selector li:click").val())
         );
       this.instance.on("objectActivated", (props) => {
         this.TUI_selectedItem = props;
@@ -1121,5 +1138,29 @@ export default {
       line-height: 32px;
     }
   }
+  .font-select-box{
+    position: relative;
+    width: 100px;
+    input{
+        width: 100%;
+        height: 30px;
+        border: none;
+    }
+  }
+  .font-select-list{
+    display: flex;
+    width: 100px;
+    flex-flow: wrap;
+    li{
+        background: #ffffff;
+        font-size: 0;
+        padding: 10px 5px;
+        cursor: pointer;
+        img{
+            width: 100%;
+        }
+    }
+    
+  }
 }
 </style>