ti

src/components/corpus/Strockplayredline.vue

@@ -99,7 +99,7 @@ export default {
         _this.Book_text,
         {
           padding: 5,
-          showOutline: true,
+          showOutline: false,
           strokeColor: _this.isHighlight ? "#AAAAAA" : "#000000",
           radicalColor: _this.isHighlight ? "#000000" : "#AAAAAA",
           charDataLoader: function (char, onComplete) {

src/components/corpus/StrockplayredlineCorpus.vue

@@ -0,0 +1,218 @@
+<!--  -->
+<template>
+  <div :class="['strockplayRedInner']">
+    <!-- <div
+      @click="playHanzi"
+      :class="[
+        'strock-play-box',
+        themeColor == 'green'
+          ? 'green-border'
+          : themeColor == 'red'
+          ? 'red-border'
+          : themeColor == 'brown'
+          ? 'brown-border'
+          : 'blue-border',
+      ]"
+      v-if="playStorkes"
+    ></div> -->
+    <template v-if="Book_text != '〇'">
+      <div
+        :id="targetDivGray"
+        class="character-target-div character-target-div-gray"
+      ></div>
+      <div :id="targetDiv" class="character-target-div"></div>
+    </template>
+    <template v-else>
+      <span class="book-text">{{ Book_text }}</span>
+    </template>
+    <svg-icon
+      icon-class="tian"
+      className="tian-bg"
+      v-if="BoxbgType == 0"
+      :style="{ color: '#DE4444' }"
+    />
+    <svg-icon
+      icon-class="mi"
+      className="tian-bg"
+      v-if="BoxbgType == 1"
+      :style="{ color: '#DEDEDE' }"
+    />
+    <!-- <svg-icon
+      icon-class="tian"
+      :className="tianColor ? 'tian-bg-red' : 'tian-bg'"
+    /> -->
+  </div>
+</template>
+
+<script>
+const HanziWriter = require("hanzi-writer");
+export default {
+  name: "StrockplayredlineCorpus",
+  components: {},
+  props: [
+    "targetDiv",
+    "Book_text",
+    "playStorkes",
+    "strokeColor",
+    "strokeColorgray",
+    "curItem",
+    "targetDivGray",
+    "BoxbgType",
+    "judgeAnswer",
+  ],
+  data() {
+    return {
+      writer: null,
+    };
+  },
+  computed: {},
+  watch: {
+    targetDiv: {
+      handler: function (val, oldVal) {
+        if (val != oldVal) {
+          let _this = this;
+          _this.$nextTick(() => {
+            _this.initHanziwrite();
+          });
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+  },
+  //方法集合
+  methods: {
+    initHanziwrite() {
+      let _this = this;
+      if (_this.Book_text == "〇") return false;
+      _this.writer = null;
+
+      //var ren = require("hanzi-writer-data/国");
+      _this.writer = HanziWriter.default.create(
+        _this.targetDiv,
+        _this.Book_text,
+        {
+          padding: 5,
+          showOutline: true,
+          strokeColor: "#000000",
+          charDataLoader: function (char, onComplete) {
+            let charData = _this.handleData();
+            onComplete(charData);
+          },
+        }
+      );
+      _this.writer = HanziWriter.default.create(
+        _this.targetDivGray,
+        _this.Book_text,
+        {
+          padding: 5,
+          showOutline: true,
+          strokeColor: _this.strokeColorgray,
+          charDataLoader: function (char, onComplete) {
+            onComplete(JSON.parse(JSON.stringify(_this.curItem.hz_json)));
+          },
+        }
+      );
+    },
+    handleData2() {
+      if (this.curItem.hz_json) {
+        let charData = JSON.parse(JSON.stringify(this.curItem.hz_json));
+        charData.radStrokes = [];
+        for (let i = 0; i < Number(this.judgeAnswer); i++) {
+          charData.radStrokes.push(i);
+        }
+        console.log(charData);
+        return charData;
+      }
+    },
+    handleData() {
+      let stroke_num = Number(this.judgeAnswer);
+      if (this.curItem) {
+        let charData = JSON.parse(JSON.stringify(this.curItem.hz_json));
+        if (stroke_num) {
+          let stroke_arr = [];
+          for (let i = 0; i < stroke_num; i++) {
+            stroke_arr.push(i + 1);
+          }
+          stroke_arr = stroke_arr.map((item) => (item = Number(item) - 1));
+          let strokes = [],
+            medians = [];
+          for (let i = 0; i < stroke_arr.length; i++) {
+            let stroke_num = stroke_arr[i];
+            strokes.push(charData.strokes[stroke_num]);
+            medians.push(charData.medians[stroke_num]);
+          }
+          charData.strokes = strokes;
+          charData.medians = medians;
+        } else if (charData) {
+          charData.radStrokes = [];
+        }
+        return charData;
+      }
+    },
+    playHanzi(event) {
+      let _this = this;
+      _this.writer.animateCharacter();
+      event.stopPropagation();
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let _this = this;
+    console.log(_this.Book_text);
+    _this.$nextTick(() => {
+      _this.initHanziwrite();
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+// @import "../common.scss";
+.strockplayRedInner {
+  position: relative;
+  width: 64px; //444px
+  height: 64px;
+}
+.character-target-div {
+  width: 100%;
+  height: 100%;
+  z-index: 99999;
+  position: absolute;
+  border: 2px solid #de4444;
+  border-radius: 8px;
+}
+.character-target-div-gray {
+  top: 0;
+  left: 0;
+}
+.tian-bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.animate-butto {
+  width: 240px;
+  height: 160px;
+  font-size: 28px;
+}
+.book-text {
+  font-size: 96px;
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 128px;
+}
+</style>

src/views/corpus/Result.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="result" v-loading="loading">
-    <Header :projectShow="true" :seekShow="true" :seekOption="false" :seekOptions="true" @changehzdata="changehzdata" />
+    <Header
+      :projectShow="true"
+      :seekShow="true"
+      :seekOption="false"
+      :seekOptions="true"
+      @changehzdata="changehzdata"
+    />
     <div class="main">
-      <div
-        class="hanzi_list"
-      >
+      <div class="hanzi_list">
         <div class="top_jf">
           <div class="j_f">
             <div :class="[JFIndex == 0 ? 'sele' : '']" @click="jfEvent(0)">
@@ -15,48 +19,56 @@
             </div>
           </div>
         </div>
-        <div class="list_one_box"
-            :style="{
-                overflowY: unfold ? 'scroll' : 'hidden',
-            }">
-            <div
+        <div
+          class="list_one_box"
+          :style="{
+            overflowY: unfold ? 'scroll' : 'hidden',
+          }"
+        >
+          <div
             class="list_one"
             v-for="(item, index) in ShowHzData"
             :key="'index' + index"
-            >
+          >
             <Strockplayredline
-                v-if="item.hzDetail.hz_json"
-                :Book_text="JFIndex == 0 ? item.con : item.fanti"
-                :playStorkes="true"
-                :curItem="item.hzDetail"
-                :targetDiv="'bwcHanziIntp' + index + item.con"
-                :isHighlight="false"
-                :judgeAnswer="2"
+              v-if="item.hzDetail.hz_json"
+              :Book_text="JFIndex == 0 ? item.con : item.fanti"
+              :playStorkes="true"
+              :curItem="item.hzDetail"
+              :targetDiv="'bwcHanziIntp' + index + item.con"
+              :isHighlight="false"
+              :judgeAnswer="2"
             />
             <div class="Highlight" v-if="item.hzDetail.hz_json">
-                <div class="play_audio">
+              <div class="play_audio">
                 <img src="../../assets/teacherdev/speaker-one.png" alt="" />
                 <span>{{ item.pinyin }}</span>
-                </div>
-                <div
+              </div>
+              <div
                 v-for="(items, indexs) in item.hzDetail.hz_json.medians.length"
                 :key="'row' + indexs"
                 class="row"
-                >
-                <Strockplayredline
-                    :Book_text="JFIndex == 0 ? item.con : item.fanti"
-                    :playStorkes="false"
-                    :curItem="item.hzDetail"
-                    :targetDiv="'bwcHanziIntp_height' + index + item.con + indexs"
-                    :isHighlight="true"
-                    :judgeAnswer="indexs + 1"
+              >
+                <StrockplayredlineCorpus
+                  :Book_text="JFIndex == 0 ? item.con : item.fanti"
+                  :playStorkes="false"
+                  :curItem="item.hzDetail"
+                  :targetDiv="'bwcHanziIntp_height' + index + item.con + indexs"
+                  :targetDivGray="
+                    'bwcHanziIntp_height_Grey' + index + item.con + indexs
+                  "
+                  :isHighlight="true"
+                  :judgeAnswer="indexs + 1"
+                  :BoxbgType="0"
+                  strokeColorgray="#aaaaaa"
+                  strokeColor="#000000"
                 />
                 <div class="number">{{ indexs + 1 }}</div>
-                </div>
-            </div>
+              </div>
             </div>
+          </div>
         </div>
-        <div class="shouqi" v-if="hzData.length>2">
+        <div class="shouqi" v-if="hzData.length > 2">
           <span @click="updownHz">
             <template v-if="unfold">
               <img src="../../assets/teacherdev/up.png" alt="" />
@@ -208,15 +220,15 @@
                           }"
                           v-html="items.con"
                         ></div>
-                        </div>
-                            <div
-                            class="shiyi"
-                            :style="{
-                                marginBottom: sizeIndex == 2 ? '0' : '5px',
-                            }"
-                            >
+                      </div>
+                      <div
+                        class="shiyi"
+                        :style="{
+                          marginBottom: sizeIndex == 2 ? '0' : '5px',
+                        }"
+                      >
                         （{{ item.shiyi }}）
-                        </div>
+                      </div>
                     </div>
                   </div>
                   <div class="bottom">{{ item.laiyuan }}</div>
@@ -244,7 +256,11 @@
                     }"
                   >
                     <div v-for="(txt, indexs) in item.resArr" :key="indexs">
-                      <span v-for="(txts, indexs) in txt" v-html="txts" :key="indexs"></span>
+                      <span
+                        v-for="(txts, indexs) in txt"
+                        v-html="txts"
+                        :key="indexs"
+                      ></span>
                     </div>
                   </div>
                 </div>
@@ -328,6 +344,7 @@
 import Header from "@/components/Header";
 import { getLogin } from "@/api/api";
 import Strockplayredline from "@/components/corpus/Strockplayredline";
+import StrockplayredlineCorpus from "@/components/corpus/StrockplayredlineCorpus";
 import "@/utils/pinyin_dict_withtone";
 import "@/utils/pinyinUtil";
 const OpenCC = require("opencc-js");
@@ -339,6 +356,7 @@ export default {
   components: {
     Header,
     Strockplayredline,
+    StrockplayredlineCorpus,
   },
   props: {},
   data() {
@@ -892,8 +910,8 @@ export default {
       this.hzData = [];
       let arr = this.$route.query.keyword.split("");
       arr.forEach((item) => {
-        if(!/^[\u4e00-\u9fa5]/.test(item)){
-            return
+        if (!/^[\u4e00-\u9fa5]/.test(item)) {
+          return;
         }
         let result = pinyinUtil.getPinyin(item);
         let obj = {
@@ -988,21 +1006,21 @@ export default {
         background: #de4444;
       }
     }
-    .list_one_box{ 
-        max-height: 750px;
-        padding: 0 27px;
-        &::-webkit-scrollbar-track-piece {
-            background: #fff;
-        }
+    .list_one_box {
+      max-height: 750px;
+      padding: 0 27px;
+      &::-webkit-scrollbar-track-piece {
+        background: #fff;
+      }
 
-        &::-webkit-scrollbar {
-            width: 4px;
-        }
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
 
-        &::-webkit-scrollbar-thumb {
-            background: #D9D9D9;
-            border-radius: 20px;
-        }
+      &::-webkit-scrollbar-thumb {
+        background: #d9d9d9;
+        border-radius: 20px;
+      }
     }
     .list_one {
       margin-bottom: 20px;