|
|
@@ -0,0 +1,203 @@
|
|
|
+<!-- -->
|
|
|
+<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(Number(_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>
|
natasha