修改汉字显示问题

src/components/Adult/preview/components/Strockplay.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script>
+import { getLogin } from "../../../../api/ajax";
 const HanziWriter = require("hanzi-writer");
 export default {
   components: {},
@@ -53,6 +54,15 @@ export default {
         _this.targetDiv,
         _this.Book_text,
         {
+          charDataLoader: function (char, onComplete) {
+            let MethodName = "hz_resource_manager-GetHZStrokesContent";
+            let data = {
+              hz: char,
+            };
+            getLogin(MethodName, data).then((res) => {
+              onComplete(res);
+            });
+          },
           padding: 5,
           showOutline: true,
           strokeColor: _this.strokeColor ? _this.strokeColor : "#000",

src/components/Adult/preview/components/Strockplayredline.vue

@@ -21,6 +21,7 @@
 </template>
 
 <script>
+import { getLogin } from "../../../../api/ajax";
 const HanziWriter = require("hanzi-writer");
 export default {
   components: {},
@@ -62,6 +63,15 @@ export default {
         _this.targetDiv,
         _this.Book_text,
         {
+          charDataLoader: function (char, onComplete) {
+            let MethodName = "hz_resource_manager-GetHZStrokesContent";
+            let data = {
+              hz: char,
+            };
+            getLogin(MethodName, data).then((res) => {
+              onComplete(res);
+            });
+          },
           padding: 5,
           showOutline: true,
           strokeColor: _this.strokeColor ? _this.strokeColor : "#000",

src/components/Adult/preview/components/Strockred.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="strockredBox">
     <div class="strockred">
-      <div @click="resetHanzi" class="strock-play-box" v-if="1==2">
+      <div @click="resetHanzi" class="strock-play-box" v-if="1 == 2">
         <!-- <img src="../../assets/common/strock-play.png" class="strock-play" /> -->
       </div>
       <div
@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import { getLogin } from "../../../../api/ajax";
 const HanziWriter = require("hanzi-writer");
 export default {
   name: "Strockred",
@@ -50,6 +51,15 @@ export default {
     initHanziwrite() {
       let _this = this;
       let options = {
+        charDataLoader: function (char, onComplete) {
+          let MethodName = "hz_resource_manager-GetHZStrokesContent";
+          let data = {
+            hz: char,
+          };
+          getLogin(MethodName, data).then((res) => {
+            onComplete(res);
+          });
+        },
         padding: 5,
         showCharacter: false,
         strokeColor: _this.hanzicolor,
@@ -140,21 +150,21 @@ export default {
   }
 }
 .clean-btn {
-    position: absolute;
-    bottom: 8px;
-    right: 8px;
-    width: 16px;
-    height: 16px;
-    margin: 0 4px;
-    cursor: pointer;
-    background: url("../../../../assets/icon/Undo-16-disable-Black.png") center
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  width: 16px;
+  height: 16px;
+  margin: 0 4px;
+  cursor: pointer;
+  background: url("../../../../assets/icon/Undo-16-disable-Black.png") center
+    no-repeat;
+  background-size: cover;
+  display: block;
+  &:hover {
+    background: url("../../../../assets/icon/Undo-16-normal-Black.png") center
       no-repeat;
     background-size: cover;
-    display: block;
-    &:hover {
-      background: url("../../../../assets/icon/Undo-16-normal-Black.png") center
-        no-repeat;
-      background-size: cover;
-    }
   }
+}
 </style>

src/components/common/Strockplay.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script>
+import { getLogin } from "../../api/ajax";
 const HanziWriter = require("hanzi-writer");
 export default {
   components: {},
@@ -53,6 +54,15 @@ export default {
         _this.targetDiv,
         _this.Book_text,
         {
+          charDataLoader: function (char, onComplete) {
+            let MethodName = "hz_resource_manager-GetHZStrokesContent";
+            let data = {
+              hz: char,
+            };
+            getLogin(MethodName, data).then((res) => {
+              onComplete(res);
+            });
+          },
           padding: 5,
           showOutline: true,
           strokeColor: _this.strokeColor ? _this.strokeColor : "#000",

src/components/common/Strockred.vue

@@ -1,168 +1,177 @@
 <!--  -->
 <template>
-    <div class="strockredBox">
-        <div class="strockred">
-            <div @click="resetHanzi" class="strock-play-box" v-if="playStorkes">
-                <!-- <img src="../../assets/common/strock-play.png" class="strock-play" /> -->
-            </div>
-            <div
-                :class="wordNum == '2' ? 'character-target-div_220' : ''"
-                :id="targetDiv"
-                class="character-target-div"
-            ></div>
-        </div>
+  <div class="strockredBox">
+    <div class="strockred">
+      <div @click="resetHanzi" class="strock-play-box" v-if="playStorkes">
+        <!-- <img src="../../assets/common/strock-play.png" class="strock-play" /> -->
+      </div>
+      <div
+        :class="wordNum == '2' ? 'character-target-div_220' : ''"
+        :id="targetDiv"
+        class="character-target-div"
+      ></div>
     </div>
+  </div>
 </template>
 
 <script>
+import { getLogin } from "../../api/ajax";
 const HanziWriter = require("hanzi-writer");
 export default {
-    name: "Strockred",
-    components: {},
-    props: ["targetDiv", "hanzicolor", "Book_text", "playStorkes", "wordNum"],
-    data () {
-        return {
-            writer: null,
-            colorsList: ["#404040", "#f65d4d", "#19b068", "#52a1ea", "#ff8c49"],
-        };
+  name: "Strockred",
+  components: {},
+  props: ["targetDiv", "hanzicolor", "Book_text", "playStorkes", "wordNum"],
+  data() {
+    return {
+      writer: null,
+      colorsList: ["#404040", "#f65d4d", "#19b068", "#52a1ea", "#ff8c49"],
+    };
+  },
+  computed: {},
+  watch: {
+    hanzicolor(newVal, oldVal) {
+      this.updateColor(newVal);
     },
-    computed: {},
-    watch: {
-        hanzicolor (newVal, oldVal) {
-            this.updateColor(newVal);
-        },
-        Book_text: {
-            handler: function (val, oldVal) {
-                if (val != oldVal) {
-                    let _this = this;
-                    _this.$nextTick(() => {
-                        _this.initHanziwrite();
-                    });
-                }
-            },
-            // 深度观察监听
-            deep: true,
-        },
+    Book_text: {
+      handler: function (val, oldVal) {
+        if (val != oldVal) {
+          let _this = this;
+          _this.$nextTick(() => {
+            _this.initHanziwrite();
+          });
+        }
+      },
+      // 深度观察监听
+      deep: true,
     },
-    //方法集合
-    methods: {
-        initHanziwrite () {
-            let _this = this;
-            let options = {
-                padding: 5,
-                showCharacter: false,
-                strokeColor: _this.hanzicolor,
-                drawingColor: _this.hanzicolor,
-                drawingWidth: 6,
-            };
-            _this.writer = HanziWriter.default.create(
-                _this.targetDiv,
-                _this.Book_text,
-                options
-            );
-            _this.writer.quiz();
-        },
-        resetHanzi () {
-            let _this = this;
-            _this.writer.quiz();
-        },
-        updateColor (color) {
-            let _this = this;
-            _this.writer.updateColor("strokeColor", color);
-            _this.writer.updateColor("drawingColor", color);
+  },
+  //方法集合
+  methods: {
+    initHanziwrite() {
+      let _this = this;
+      let options = {
+        charDataLoader: function (char, onComplete) {
+          let MethodName = "hz_resource_manager-GetHZStrokesContent";
+          let data = {
+            hz: char,
+          };
+          getLogin(MethodName, data).then((res) => {
+            onComplete(res);
+          });
         },
+        padding: 5,
+        showCharacter: false,
+        strokeColor: _this.hanzicolor,
+        drawingColor: _this.hanzicolor,
+        drawingWidth: 6,
+      };
+      _this.writer = HanziWriter.default.create(
+        _this.targetDiv,
+        _this.Book_text,
+        options
+      );
+      _this.writer.quiz();
     },
-    //生命周期 - 创建完成（可以访问当前this实例）
-    created () { },
-    //生命周期 - 挂载完成（可以访问DOM元素）
-    mounted () {
-        let _this = this;
-        _this.$nextTick(() => {
-            _this.initHanziwrite();
-        });
+    resetHanzi() {
+      let _this = this;
+      _this.writer.quiz();
     },
-    beforeCreate () { }, //生命周期 - 创建之前
-    beforeMount () { }, //生命周期 - 挂载之前
-    beforeUpdate () { }, //生命周期 - 更新之前
-    updated () { }, //生命周期 - 更新之后
-    beforeDestroy () { }, //生命周期 - 销毁之前
-    destroyed () { }, //生命周期 - 销毁完成
-    activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
+    updateColor(color) {
+      let _this = this;
+      _this.writer.updateColor("strokeColor", color);
+      _this.writer.updateColor("drawingColor", color);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let _this = this;
+    _this.$nextTick(() => {
+      _this.initHanziwrite();
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='scss' scoped>
 //@import url(); 引入公共css类
 .strockredBox {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 .strockred {
-    position: relative;
-    margin: 0 auto;
+  position: relative;
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  //chinawrite220.png
+  .character-target-div {
     width: 100%;
     height: 100%;
-    //chinawrite220.png
+    background: url("../../assets/common/bg-field.png") center no-repeat;
+    background-size: 100% 100%;
+    border-radius: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 99999;
+    &_220 {
+      background: url("../../assets/common/chinawrite220.png") center no-repeat;
+      background-size: 100% 100%;
+      border-radius: 0;
+    }
+  }
+  .animate-butto {
+    width: 240px;
+    height: 160px;
+    font-size: 28px;
+  }
+}
+.questionMiddle {
+  .strockred {
     .character-target-div {
-        width: 100%;
-        height: 100%;
-        background: url('../../assets/common/bg-field.png') center no-repeat;
+      background: url("../../assets/common/bg-field.png") center no-repeat;
+      background-size: 100% 100%;
+      border-radius: 16px;
+      &_220 {
+        background: url("../../assets/common/chinawrite220.png") center
+          no-repeat;
         background-size: 100% 100%;
-        border-radius: 24px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        z-index: 99999;
-        &_220 {
-            background: url('../../assets/common/chinawrite220.png') center
-                no-repeat;
-            background-size: 100% 100%;
-            border-radius: 0;
-        }
+        border-radius: 0;
+      }
     }
     .animate-butto {
-        width: 240px;
-        height: 160px;
-        font-size: 28px;
-    }
-}
-.questionMiddle {
-    .strockred {
-        .character-target-div {
-            background: url('../../assets/common/bg-field.png') center no-repeat;
-            background-size: 100% 100%;
-            border-radius: 16px;
-            &_220 {
-                background: url('../../assets/common/chinawrite220.png') center
-                    no-repeat;
-                background-size: 100% 100%;
-                border-radius: 0;
-            }
-        }
-        .animate-butto {
-            width: 160px;
-            height: 106px;
-            font-size: 18px;
-        }
+      width: 160px;
+      height: 106px;
+      font-size: 18px;
     }
+  }
 }
 .questionSmall {
-    .strockred {
-        .character-target-div {
-            background: url('../../assets/common/bg-field.png') center no-repeat;
-            background-size: 100% 100%;
-            border-radius: 12px;
-            &_220 {
-                background: url('../../assets/common/chinawrite220.png') center
-                    no-repeat;
-                background-size: 100% 100%;
-                border-radius: 0;
-            }
-        }
-        .animate-butto {
-            width: 120px;
-            height: 80px;
-            font-size: 14px;
-        }
+  .strockred {
+    .character-target-div {
+      background: url("../../assets/common/bg-field.png") center no-repeat;
+      background-size: 100% 100%;
+      border-radius: 12px;
+      &_220 {
+        background: url("../../assets/common/chinawrite220.png") center
+          no-repeat;
+        background-size: 100% 100%;
+        border-radius: 0;
+      }
+    }
+    .animate-butto {
+      width: 120px;
+      height: 80px;
+      font-size: 14px;
     }
+  }
 }
 </style>