卡片 田字格

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

@@ -49,13 +49,19 @@
                 :key="'row' + indexs"
                 class="row"
               >
-                <Strockplayredline
+                <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>
@@ -337,6 +343,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");
@@ -348,6 +355,7 @@ export default {
   components: {
     Header,
     Strockplayredline,
+    StrockplayredlineCorpus
   },
   props: {},
   data() {