涂色提组件优化

闫增涛

2024-07-01 0ab7ff07fd29ac32be045d505ae2d2b9290647a7

涂色提组件优化

 .env.product

@@ -1,6 +1,6 @@
VUE_APP_ENV = 'product'
VUE_APP_API_URL = "https://jsek.bnuic.com"
VUE_APP_RESOURCE_CTX = 'https://jsek.bnuic.com/books/resource/'
VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/english'
VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/mathBook'
VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook"
VUE_APP_BOOK_ID = 'english'
VUE_APP_BOOK_ID = 'mathBook'

 src/App.vue

@@ -65,7 +65,7 @@
        process.env.VUE_APP_RESOURCE_CTX +
          (process.env.VUE_APP_ENV == "product"
            ? process.env.VUE_APP_BOOK_ID
            : "artAndDrama")
            : "mathBook")
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

 src/books/mathBook/assets/main.less

@@ -771,6 +771,11 @@
      }
    }
  }
  .gr-title {
    font-size: 16px;
    color:#00aeef;
    margin-top: 40px;
  }
}

/* 媒体查询做基础响应式布局 */

 src/books/mathBook/view/components/chapter001.vue

@@ -571,6 +571,11 @@
              v-if="questionData"
              :isReal="false"
            ></examinations>
            <p class="gr-title">四、函数 f(x)=x’-3 的图像在 轴左边的部分如图所示，请你画出这个函数图像在 y轴右边的部分.</p>
            <div style="margin:0 auto;width:330px">
              <graffiti :page="9" :bcImg="this.config.activeBook.resourceUrl + '/images/0103-2.jpg'" :imgHeight="300" :imgWidth="300" :bcColor="'#d3edfa'"  /> 
            </div>
            
          </div>
        </div>
      </div>
@@ -817,11 +822,12 @@

<script>
import examinations from "@/components/examinations/index.vue";
import graffiti from '@/components/graffiti/index.vue'
import { getResourcePath } from "@/assets/methods/resources";
import { getCollectResource,setCollectResource } from "@/assets/methods/resources";
export default {
  name: "chapter-one",
  components: { examinations },
  components: { examinations,graffiti },
  props: {
    showPageList: {
      type: Array,

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

@@ -163,7 +163,7 @@

    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(2, 10);
    //   this.gotoPage(1, 9);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
@@ -870,12 +870,11 @@
            if(item.type && item.type == 'material') {
              if(!item.infoList.length) return false
              item.infoList.forEach(citem => {
                if(citem.answer) citem.answer.replace(/\<math/gi, '<math class="examination-math"')
                if(citem.answer) citem.answer = citem.answer.replace(/\<math/gi, '<math class="examination-math"')
              })
            } else {
              if(item.answer) item.answer.replace(/\<math/gi, '<math class="examination-math"')
              if(item.answer) item.answer = item.answer.replace(/\<math/gi, '<math class="examination-math"')
            }
            console.log('题目',item);
              item.isCollect = this.collectId.indexOf(item.id) > -1 ? true :false
            if (this.questionId[num][page].indexOf(item.id) > -1) {
              if (item.type && item.type == "material") {

 src/components/examinations/index.vue

@@ -464,20 +464,24 @@
        >保存</el-button
      >
      <el-button
        @click="(e) =>{
          handleQuestion()
          saveAnswer(e)
        }"
        @click="
          (e) => {
            handleQuestion();
            saveAnswer(e);
          }
        "
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >提交</el-button
      >
      <el-button @click="redo" class="examinations-btn-box">重做</el-button>
      <el-button
        @click="(e) => {
          openAnswers()
          saveAnswer(e)
        }"
        @click="
          (e) => {
            openAnswers();
            saveAnswer(e);
          }
        "
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >查看答案</el-button
@@ -1204,9 +1208,6 @@
    .referBox {
      display: flex;
      margin-bottom: 10px;
      /deep/  math {
        display: flex;
      }
      span {
        width: 80px;
        color: #999;
@@ -1376,4 +1377,9 @@
  width: 18px;
  object-fit: contain;
}
/deep/ .examination-math {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>

 src/components/graffiti/components/brushSize.vue

@@ -1,15 +1,23 @@
<template>
  <div class="wrap-range">
  <div class="brushSize">
    <!-- 为了不在子组件中变更值，不用v-model -->
     <div class="wrap-range">
    <input
      type="range"
      :value="brushSize"
      min="1"
      max="30"
      title="调整笔刷粗细"
      class="input-brush"
      @change="(event) => $emit('change-size', +event.target.value)"
    />
    <el-color-picker v-model="checkColor" @change="onChangeColor"></el-color-picker>
     </div>

    <!-- <el-color-picker v-model="checkColor" @change="onChangeColor"></el-color-picker> -->
     <div>
       <input type="color" v-model="checkColor" @input="onChangeColor">
     </div>
    
  </div>
</template>

@@ -32,8 +40,8 @@
    }
  },
  methods:{
    onChangeColor(color) {
      this.$emit("change-color", color);
    onChangeColor(e) {
      this.$emit("change-color", e.srcElement.value);
    },
  }
};
@@ -41,9 +49,13 @@
// const brushSize = computed(() => props.size);
</script>
<style lang="less" scoped>
.brushSize {
  display: flex;
}
.wrap-range {
  display: flex;
  align-items: center;
  margin-right: 10px;
  .el-color-picker {
    margin-left: 20px;
  }

 src/components/graffiti/index.vue

@@ -13,7 +13,7 @@
        >
      </div>
    </div>
    <div class="footer">
    <div class="footer" :style="{backgroundColor:bcColor}">
      <BrushSize :size="brushSize" @change-size="onChangeSize"  @change-color="onChangeColor" />
      <ToolBtns :tool="brushTool" @change-tool="onChangeTool" />
    </div>
@@ -38,6 +38,10 @@
    },
    imgHeight:{
      type:Number
    },
    bcColor:{
      type:String,
      default:'#fff'
    }
  },
  data() {
@@ -59,12 +63,14 @@
  },
  mounted() {
    this.backgroundImage = this.bcImg
    this.canvas = document.getElementById("canvas");
    this.canvas = (this.container ? this.container : document).getElementById("canvas");
    if (this.canvas.getContext) {
      this.context = this.canvas.getContext("2d", { willReadFrequently: true });
      this.initCanvas();
      // window.addEventListener('resize', updateCanvasPosition);
      window.addEventListener("scroll",this.updateCanvasOffset,true); // 添加滚动条滚动事件监听器
      (
        this.container ? this.container : document
      ).addEventListener("scroll",this.updateCanvasOffset,true); // 添加滚动条滚动事件监听器
      this.getCanvasOffset();
      this.context.lineGap = "round";
      this.context.lineJoin = "round";
@@ -107,7 +113,9 @@
    initCanvas() {
      const that = this
      const resetCanvas = () => {
        const elPanel = document.getElementById("canvas_panel");
        const elPanel = (
        this.container ? this.container : document
      ).getElementById("canvas_panel");
        that.canvas.width = elPanel.clientWidth;
        that.canvas.height = elPanel.clientHeight;
        that.context = that.canvas.getContext("2d", {
@@ -234,7 +242,9 @@
    },
    // 保存为一张图片并下载的方法
    saveImgData() {
      var link = document.createElement("a");
      var link = (
        this.container ? this.container : document
      ).createElement("a");
      var imgData = this.canvas.toDataURL({format: 'png', quality:1, width:20000, height:4000});
      var strDataURI = imgData.substr(22, imgData.length);
      var blob = dataURLtoBlob(imgData);
@@ -269,7 +279,6 @@
    saveData(data) {
      this.historyData.length >= 50 && this.historyData.shift(); // 设置储存上限为50步
      this.historyData.push(data);
      console.log('数据',this.historyData);
    },
    // 清除、撤销、保存状态不需要保持，操作完后恢复笔刷状态
    resetToolActive() {
@@ -297,7 +306,6 @@
  justify-content: space-around;
  align-items: center;
  height: 88px;
  background-color: #fff;
}

#canvas_panel {