文字排版增加 播放汉字

src/components/Adult/preview/NewWordShow.vue

@@ -63,7 +63,7 @@
               class="strockplay-newWord"
               @click="freeWrite(items, index, indexs + 1)"
             >
-              <div
+              <!-- <div
                 @click.stop="playHanzi(index, indexs, items)"
                 :class="[
                   'strock-play-box',
@@ -75,18 +75,18 @@
                     ? 'brown-border'
                     : 'red-border',
                 ]"
-              ></div>
-              <!-- <img
+              ></div> -->
+              <img
                 v-if="!playStatus && items.strokes_image_url"
                 :src="items.strokes_image_url"
                 alt=""
-              /> -->
-              <FreeWriteQP
-                :id="'cans' + index + indexs"
-                :ref="'cans' + index + indexs"
-                :height="64"
-                :width="64"
               />
+              <!-- <FreeWriteQP
+                :id="'cans' + index + indexs"
+                :ref="'cans'"
+                :height="256"
+                :width="256"
+              /> -->
             </div>
           </div>
         </template>
@@ -147,25 +147,27 @@ export default {
         return;
       }
       this.playStatus = true;
-      console.log(`cans${rowIndex}${colIndex}`);
-      this.$refs[`cans${rowIndex}${colIndex}`].reset();
+      console.log(this.$refs.cans);
+      let ref = null;
+      this.$refs.cans.forEach((item) => {
+        if (item.$el.id == `cans${rowIndex}${colIndex}`) {
+          ref = item;
+        }
+      });
+      ref.reset();
 
       let c = document.getElementById(`cans${rowIndex}${colIndex}`);
       let cxt = document
         .getElementById(`cans${rowIndex}${colIndex}`)
         .getContext("2d");
       cxt.clearRect(0, 0, c.width, c.height);
-      let history = item.history.history;
+      let history = item.history;
       const len = item.history.length;
       let i = 0;
       const runner = () => {
         i++;
         if (i < len) {
-          this.$refs[`cans${rowIndex}${colIndex}`].draw(
-            null,
-            history[i][0],
-            history[i][1]
-          );
+          ref.draw(null, history[i][0], history[i][1]);
           requestAnimationFrame(runner);
         } else {
           console.log("播放完成");
@@ -232,9 +234,9 @@ export default {
       this.isPraShow = true;
     },
     closeifFreeShow(data, rowIndex, colIndex) {
-      this.curQue.option[rowIndex][colIndex] = data;
+      this.curQue.option[rowIndex].imgarr[colIndex-1] = data;
       this.ifFreeShow = false;
-      this.playHanzi(rowIndex, colIndex, data);
+      this.$forceUpdate();
     },
     freeWrite(imgUrl, index, indexs) {
       this.ifFreeShow = true;

src/components/Adult/preview/components/FreewriteLettle.vue

@@ -23,22 +23,34 @@
           :themeColor="themeColor"
           ref="freewrite"
         /> -->
-        <template v-if="imgOrCans">
-          <img :src="currenHzData.strokes_image_url" alt="" />
-        </template>
-        <template v-else>
-          <FreeWriteQP
-            :bgColor.sync="bgColor"
-            :height="height"
-            :isCrop="isCrop"
-            :lineColor="hanzicolor"
-            :lineWidth="hanziweight"
-            :width="width"
-            class="vueEsign"
-            ref="esign"
-            id="esign"
-          />
+        <div
+          @click.stop="play"
+          :class="[
+            'strock-play-box',
+            themeColor == 'green'
+              ? 'green-border'
+              : themeColor == 'red'
+              ? 'red-border'
+              : themeColor == 'brown'
+              ? 'brown-border'
+              : 'red-border',
+          ]"
+        >
+        </div>
+        <template v-if="!hasPlay && currenHzData.strokes_image_url">
+          <img class="img" :src="currenHzData.strokes_image_url" alt="" />
         </template>
+        <FreeWriteQP
+          :bgColor.sync="bgColor"
+          :height="height"
+          :isCrop="isCrop"
+          :lineColor="hanzicolor"
+          :lineWidth="hanziweight"
+          :width="width"
+          class="vueEsign"
+          ref="esign"
+          id="esign"
+        />
       </div>
       <ul class="nav-list">
         <li @click="resetHuahua()">重写</li>
@@ -96,12 +108,39 @@ export default {
       collectFlag: false, // 是否收藏
       imgarr: [],
       imgOrCans: false,
+      hasPlay: false,
     };
   },
   computed: {},
   watch: {},
   //方法集合
   methods: {
+    play(index) {
+      if (this.hasPlay) {
+        this.$message.warning("请等待播放完成");
+        return;
+      }
+      this.$refs.esign.reset();
+      this.hasPlay = true;
+      let c = document.getElementById("esign");
+      let cxt = document.getElementById("esign").getContext("2d");
+      cxt.clearRect(0, 0, c.width, c.height);
+      let history = this.currenHzData.history;
+      const len = history.length;
+      let i = 0;
+      const runner = () => {
+        i++;
+        if (i < len) {
+          this.$refs.esign.draw(null, history[i][0], history[i][1]);
+          requestAnimationFrame(runner);
+        } else {
+          console.log("播放完成");
+          this.hasPlay = false;
+        }
+      };
+      requestAnimationFrame(runner);
+    },
+
     changeNav(index) {
       this.navIndex = index;
     },
@@ -120,8 +159,13 @@ export default {
       this.learn_mode = mode;
     },
     resetHuahua() {
+      if (this.hasPlay) {
+        this.$message.warning("请等待播放完成");
+        return;
+      }
       this.imgOrCans = false;
       this.$refs.esign.reset();
+      this.currenHzData.strokes_image_url = "";
     },
     handleWriteImg() {
       this.$refs.esign
@@ -145,7 +189,7 @@ export default {
               strokes_image_url: write_img,
             };
             // this.imgarr.push(obj);
-            this.closeifFreeShow(obj,this.rowIndex,this.colIndex);
+            this.closeifFreeShow(obj, this.rowIndex, this.colIndex);
           });
           //console.log(Book_img);
           // this.textOcr(res.replace("data:image/png;base64,", ""));
@@ -181,7 +225,6 @@ export default {
 .practice {
   width: 320px;
   max-height: 400px;
-  overflow: auto;
   margin: 0 auto;
   background: #f3f3f3;
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
@@ -202,6 +245,7 @@ export default {
       background-size: cover;
     }
   }
+
   .close-icon {
     position: absolute;
     top: 8px;
@@ -277,6 +321,22 @@ export default {
       background: #fff url("../../../../assets/NPC/chinaTianRed.png") center
         no-repeat;
       background-size: 100% 100%;
+      position: relative;
+      .img {
+        position: absolute;
+      }
+      .strock-play-box {
+        position: absolute;
+        width: 32px;
+        height: 32px;
+        background: #fff url("../../../../assets/NPC/strock-play-red-click-big.png") center
+          no-repeat;
+        background-size: 100% 100%;
+        cursor: pointer;
+        right: 0;
+        top: 0;
+        z-index: 2;
+      }
     }
     .footer {
       position: absolute;