GCLS_Page_TC/src/components/corpus/Strockred.vue

<!--  -->
<template>
  <div class="strockredBox">
    <div class="strockred">
      <div @click="resetHanzi" class="strock-play-box" v-if="1 == 2">
        <!-- <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"
      >
        <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' }"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getContentFile } from "@/api/api";
const HanziWriter = require("hanzi-writer");
export default {
  name: "Strockred",
  components: {},
  props: [
    "targetDiv",
    "hanzicolor",
    "Book_text",
    "wordNum",
    "tianColor",
    "drawingColor",
    "BoxbgType",
  ],
  data() {
    return {
      writer: null,
      colorsList: ["#404040", "#f65d4d", "#19b068", "#52a1ea", "#ff8c49"],
    };
  },
  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,
    },
  },
  //方法集合
  methods: {
    initHanziwrite() {
      let _this = this;
      let node = document.getElementById(`${_this.targetDiv}`);
      node.removeChild(node.children[0]);
      let options = {
        charDataLoader: function (char, onComplete) {
          let MethodName = "hz_resource_manager-GetHZStrokesContent";
          let data = {
            hz: char,
          };
          getContentFile(MethodName, data).then((res) => {
            onComplete(res);
          });
        },
        padding: 5,
        showCharacter: false,
        outlineColor: _this.hanzicolor,
        strokeColor: _this.drawingColor,
        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);
    },
  },
  //生命周期 - 创建完成（可以访问当前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 "../../assets/Scss/_handle.scss";

//@import url(); 引入公共css类
.strockredBox {
  width: 100%;
  height: 100%;
}
.tian-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.strockred {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  //chinawrite220.png
  .character-target-div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    // background-size: 100% 100%;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
  }
  .animate-butto {
    width: 240px;
    height: 160px;
    font-size: 28px;
  }
}
</style>