GCLS_Page_TC/src/components/corpus/Strockplayredline.vue

<!--  -->
<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:'#DEDEDE'}"
    />
    <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>
import { getContentFile } from "@/api/api";
const HanziWriter = require("hanzi-writer");
export default {
  name: "Strockplayredline",
  components: {},
  props: [
    "targetDiv",
    "Book_text",
    "playStorkes",
    "strokeColor",
    "strokeColorgray",
    "curItem",
    "strokeNumber",
    "targetDivGray",
    "BoxbgType"
  ],
  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: _this.strokeColor,
          charDataLoader: function (char, onComplete) {
            let charData = _this.handleData(_this.strokeNumber);
            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)));
          },
        }
      );
    },
    handleData(stroke_num) {
      if (this.curItem) {
        let charData = JSON.parse(JSON.stringify(this.curItem));
        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;
    _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: 100%; //444px
  height: 100%; //480px
}
.character-target-div {
  width: 100%;
  height: 100%;
  z-index: 99999;
  position: absolute;
}
.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>