戏剧添加涂色题

闫增涛

2024-07-01 8522ef2481b45f7b0d854679eaedb2a4c5271261

戏剧添加涂色题

 src/books/artAndDrama/view/components/chapter004.vue

@@ -66,6 +66,7 @@
                            class="hs1">◇</span>春天来了，春风吹过，柳树发芽了，迎春花开了，小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
                    <!-- 图片缺失 -->
                    <!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
                     <graffiti  :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'" :imgWidth="596" :imgHeight="800" />
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
                <div class="page-footer">
@@ -207,6 +208,7 @@
</template>
<script>
import { getResourcePath } from "@/assets/methods/resources";
import graffiti from '@/components/graffiti/index.vue'
export default {
    name: "chapterFour",
    props: {
@@ -214,6 +216,7 @@
            type: Array,
        },
    },
    components:{graffiti},
    //在这里对调用的方法进行挂载
    mounted() {
        this.getVidoePath();

 src/books/artAndDrama/view/components/index.vue

@@ -160,7 +160,7 @@

    // 测试页面跳转
    //  setTimeout(() => {
    //  this.gotoPage(6,38);
    //  this.gotoPage(4,32);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",

 src/components/graffiti/index.vue

@@ -1,6 +1,6 @@
<!-- 涂色连线题控件 -->
<template>
  <div class="page">
  <div class="page" :style="{height:imgHeight + 120 + 'px'}">
    <div class="main">
      <div id="canvas_panel">
        <canvas
@@ -32,6 +32,12 @@
    },
    bcImg:{
      type:String
    },
    imgWidth:{
      type:Number
    },
    imgHeight:{
      type:Number
    }
  },
  data() {
@@ -122,7 +128,7 @@
          imgData.setAttribute('crossOrigin', '');
        }
        imgData.onload = () => {
          this.context.drawImage(imgData,0,0)
          this.context.drawImage(imgData,0,0,this.imgWidth,this.imgHeight)
        }
      }
      resetCanvas();
@@ -218,7 +224,7 @@
        imgData.setAttribute('crossOrigin', '');
      }
      imgData.onload = () => {
        this.context.drawImage(imgData,0,0)
        this.context.drawImage(imgData,0,0,this.imgWidth,this.imgHeight)
      }
    },
    // 保存画布背景和划线到本地方法
@@ -280,7 +286,6 @@
  display: flex;
  flex-direction: column;
  width:100%;
  height: 866px;
}

.main {