涂色题

闫增涛

2024-06-26 172199d84e17b2285aef2c1112fbed3c6f25f27c

涂色题

 src/assets/images/brush.png

 src/assets/images/revoke.png

 src/assets/images/rubber.png

 src/assets/images/save.png

 src/assets/images/scrub.png

 src/books/artAndDance/view/components/chapter006.vue

@@ -311,10 +311,14 @@
        </ul>
      </div>
    </div>
    <!-- <div class="page-box" page="30">
        <giffiti :page="30" :bcImg="'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF'" />
    </div> -->
  </div>
</template>

<script>
import giffiti from '@/components/graffiti/index.vue'
export default {
  name: "chapterSix",
  props: {
@@ -322,6 +326,7 @@
      type: Array,
    },
  },
  components:{giffiti}
};
</script>


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

@@ -194,7 +194,7 @@

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

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

@@ -96,7 +96,7 @@
              class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />。</p>
          <h3 class="lefth3" id="c014" style="margin-top: 7%;"><img class="img-gn1" alt=""
              src="../../assets/images/czysj.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>阅读下面的文字，为小蚂蚁选择一种性格吧。</p>
          <!-- <p class="text"><span class="hs1">◇</span>阅读下面的文字，为小蚂蚁选择一种性格吧。</p> -->
          <drag  :question="dragQuestion" :page="16" class="drag-text"/> 
          <!-- <choice class="text" :questions="questions"  :primaryColor="accentColor"  hoverBackgroundColor="green" hoverColor="white"></choice> -->
          <p class="center  openImgBox"><img class="img-e" alt="" src="../../assets/images/2-2.gif" /></p>
@@ -501,7 +501,7 @@
  background-color: red;
}
.drag-text {
  margin: 0 6%;
  margin: 0 4%;
  font-family: "STKaiti";
  font-size: 19px;
}

 src/books/childHealth/view/content/components/chapter007.vue

@@ -3834,7 +3834,7 @@
      this.pathThree = await getResourcePath("79aa2ccd431dcc000dbe2962ded4397c");
      this.pathFour = await getResourcePath("94654e3d22604a815f9f4558616d8f39");
      this.pathFive = await getResourcePath("2373520e42d1be7bb70fbd5729d2f860");
      this.pathSix = await getResourcePath("bf7cabfb18771490b5cbb2eebdf424a3");
      this.pathSix = await getResourcePath("dac5587e1f5e51b67f221773b04c1aed");
      this.pathSeven = await getResourcePath("99a137c537d757a6ee39e6888218ca7c");
      this.pathEight = await getResourcePath("9a1e8e3374e3bdf82a5066ead76398ef");
      this.pathNine = await getResourcePath("7ae6133d91e84c4ea5c96d5d4ac62fb9");

 src/books/childHealth/view/content/index.vue

@@ -238,7 +238,7 @@

    // 测试页面跳转
    // setTimeout(() => {
    // this.gotoPage(1,10);
    // this.gotoPage(7,182);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",

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

@@ -575,10 +575,6 @@
        </div>
      </div>
    </div>
    <!-- <div class="page-box padding-116" page="10">
      <drag :question="dragQuestion" :page="10"/> 
        <graffiti style="width:100%" />
    </div> -->
    <!-- 函数控件弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
@@ -823,11 +819,9 @@
import examinations from "@/components/examinations/index.vue";
import { getResourcePath } from "@/assets/methods/resources";
import { getCollectResource,setCollectResource } from "@/assets/methods/resources";
import drag from '@/components/dragQuestion/index.vue'
import graffiti from "@/components/graffiti/index.vue"
export default {
  name: "chapter-one",
  components: { examinations,drag,graffiti },
  components: { examinations },
  props: {
    showPageList: {
      type: Array,

 src/components/dragQuestion/index.vue

@@ -1,5 +1,29 @@
<template>
  <div class="drag-box">
  <div class="drag-box" :style="{ borderColor: bcColor }">
    <div class="title-box">
      <p class="text"><span class="hs1">◇</span>{{ titileText }}</p>
      <span class="svg-btn t0">
        <el-tooltip class="item" effect="dark" content="请拖拽答案到括号里吧" placement="top-start">
          <svg
          t="1719309984490"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6316"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="20"
          height="20"
        >
          <path
            d="M510.66571776 2.32285525c281.13999758 0.03143566 510.59693795 229.62226973 510.04273323 510.34079346-0.55769771 281.76056661-229.64788451 510.68426013-510.37339307 509.99849074-281.55681565-0.68693447-509.37908565-228.64309817-509.75166009-510.05321216C0.20965945 231.71226624 229.53852701 2.29141959 510.66571776 2.32285525zM972.54389419 512.41565298C972.50314354 258.01834837 766.47298389 51.25351879 510.91837042 50.72958578c-254.73844338-0.52160398-461.85256163 206.22576071-462.11918507 461.70003911-0.26545949 254.42175431 206.44814165 460.98865493 461.56614428 461.71517497C764.4715611 974.86899086 972.5846437 766.95849529 972.54389419 512.41565298zM539.07335282 677.31941831c-21.78046749 0-42.9799515 0-64.78370475 0 0-12.93997511-0.69159139-25.64243456 0.14553657-38.24359993 1.68939179-25.44566841 7.57490347-49.85162069 20.87115321-72.0221275 10.34708992-17.25368889 23.52341675-32.14269326 38.16209863-45.82548935 18.18046691-16.99288633 36.5774939-33.76688469 54.39702926-51.13118151 10.49262649-10.22367517 19.81863026-21.62794496 24.66675485-35.82070101 11.61384277-34.00090851 4.18913394-64.36339485-18.43079054-91.405312-37.56481536-44.90802403-100.39250489-46.44605838-138.86663567-23.96934258-24.24993792 14.16597845-38.78965362 35.84282283-47.27736433 61.9113893-3.80491662 11.68719417-6.43273045 23.75744057-9.84295083 36.5856438-22.35912192-2.65459257-45.24566983-5.3720576-68.99030357-8.19081558 0.88602851-5.92276935 1.52056946-11.49159197 2.57425635-16.9800795 5.91229042-30.78861824 16.59935403-59.50246343 36.69741568-84.13079666 24.48396061-30.00271872 56.38215225-47.47180259 93.95744654-54.68344547 39.22044359-7.527168 78.41527125-6.71448974 116.55641316 5.67360967 48.83402752 15.86002717 84.96908857 46.85006848 101.39030641 96.21501497 15.76571904 47.39379427 8.01966421 92.16443165-23.01345564 132.15913187-19.68590051 25.37115307-44.16869717 45.98383275-67.17633194 68.0751673-10.12121714 9.71837099-20.36119211 19.49728541-29.15278394 30.3741292-13.05873294 16.15459442-18.04308025 35.69262933-19.61720718 56.12134969C540.4507136 653.56547072 539.84644437 665.12226418 539.07335282 677.31941831zM470.0818853 814.35345351c0-25.59353401 0-50.94023737 0-76.69910073 25.64359851 0 50.98447986 0 76.7526582 0 0 25.51552569 0 50.86921501 0 76.69910073C521.33997454 814.35345351 495.85239154 814.35345351 470.0818853 814.35345351z"
            p-id="6317"
          ></path>
        </svg>
    </el-tooltip>

      </span>
    </div>
    <div
      v-for="(item, index) in drageQuestion"
      :key="item.id"
@@ -61,7 +85,14 @@
      <!-- 选项 -->
      <ul class="option-box">
        <li v-for="(citem, cindex) in item.option" :key="cindex">
          <span class="drag-option" @mousedown="mousedown" v-show="item.userAnswer.findIndex(eitem => eitem.value == citem.value) == -1"
          <span
            class="drag-option"
            @mousedown="mousedown"
            v-show="
              item.userAnswer.findIndex(
                (eitem) => eitem.value == citem.value
              ) == -1
            "
            >{{ citem.value }}、{{ citem.txt }}</span
          >
        </li>
@@ -94,14 +125,20 @@
                    style="margin-left: 20px"
                  >
                    <span>您的答案：</span>
                    <span class="errorBox" v-if="item.userAnswer.length">
                    <span
                      class="errorBox"
                      v-if="item.userAnswer.length"
                        v-for="(answerItem, answerIdnex) in item.userAnswer"
                        :key="answerIdnex"
                        >{{ answerItem.value
                        }}<span
                          v-if="
                            answerIdnex !== item.userAnswer.length - 1 &&
                            answerItem.value
                          "
                          >,</span
                        ></span
                      >
                      <span v-for="(answerItem,answerIdnex) in item.userAnswer" :key="answerIdnex">{{answerItem.value}}<span v-if="answerIdnex !== item.userAnswer.length - 1 && answerItem.value">,</span></span>
                      
                      </span
                    >
                    </span>
                  </p>
                </div>
                <p class="difficulty" v-if="item.difficulty">
@@ -192,6 +229,14 @@
    page: {
      type: Number,
    },
    bcColor: {
      type: String,
      default: "#8fae34",
    },
    titileText: {
      type: String,
      default: "阅读下面的文字，为小蚂蚁选择一种性格吧。",
    },
  },
  watch: {
    question: {
@@ -200,7 +245,7 @@
          this.config.activeBook.name + "-drag-" + this.page
        );
        if (oldAnswer) {
          this.submitState = true
          this.submitState = true;
          oldAnswer = JSON.parse(oldAnswer);
          for (let index = 0; index < newValue.length; index++) {
            // 旧答案赋值
@@ -233,19 +278,18 @@
      maxY: null,
      spaceList: [],
      submitState:false,
      isLift:false
      isLift: false,
    };
  },
  mounted() {
  },
  mounted() {},
  methods: {
    // 1.选项拖拽
    // 2.限制拖拽移动只能在题范围内
    // 3.限制鼠标松开要在空格的范围内
    mousedown(e) {
      e.preventDefault();
      if(this.submitState) return false
      this.isLift = false
      if (this.submitState) return false;
      this.isLift = false;
      this.moveDom = e.toElement;
      this.parentDom = this.getParentWithClass(e.toElement, "question-box");
      this.questionIndex = this.parentDom.getAttribute("num");
@@ -263,14 +307,14 @@
      // 限制在此题范围内拖动
      if (e.x <= this.maxX && e.y < this.maxY) {
        const moveX = e.x - this.parentX;
        const moveY = e.y - this.parentY;
        const moveY = e.y - this.parentY + 40;
        this.moveDom.style.left = moveX + "px";
        this.moveDom.style.top = moveY + "px";
        // 如果还有有空格
        if (this.spaceList.length) {
          for (let index = 0; index < this.spaceList.length; index++) {
            let item = this.spaceList[index];
            if(!item) return false
            if (!item) return false;
            if (
              e.x >= item.minX &&
              e.x <= item.maxX &&
@@ -278,19 +322,19 @@
              e.y <= item.maxY
            ) {
              // 如果移动到空格范围内,且鼠标抬起后,将答案填入空格,并将该空格的数据清空(空格不能删除,只能清空,否则导致数组索引改变,不能正确写入到指定空格中)
              if(!this.isLift) return false
              if (!this.isLift) return false;
              this.$set(
                this.drageQuestion[this.questionIndex].userAnswer,
                index,
                {
                  value:this.moveDom.textContent.charAt(0),
                  txt:this.moveDom.textContent.slice(2)
                  txt: this.moveDom.textContent.slice(2),
                }
              );
              if(this.drageQuestion[this.questionIndex].userAnswer[index]) {
                this.moveDom.style.display = "none";
                this.moveDom = null;
                this.$set(this.spaceList,index,{})
                this.$set(this.spaceList, index, {});
              }
            } else {
              if(this.isLift && this.moveDom) {
@@ -308,10 +352,8 @@
    mouseup(e) {
      if (this.moveDom) {
        // this.moveDom = null;
        
      }
      this.isLift = true
    
      this.isLift = true;
    },
    // 获取题目空格坐标
    getSpaceInfo(parentDom) {
@@ -355,51 +397,49 @@
    },
    // 提交
    submitData() {
      this.submitState = true
      this.submitState = true;
      let arr = [];
      const data = this.drageQuestion;
      for (let index = 0; index < data.length; index++) {
        const item = data[index];
        for (let cindex = 0; cindex < item.userAnswer.length; cindex++) {
          let citem = item.userAnswer[cindex];
          arr[cindex] = citem.value
          arr[cindex] = citem.value;
        }
        item.isRight = JSON.stringify(arr)  == JSON.stringify(item.answer)
        item.isComplete = true
        item.isRight = JSON.stringify(arr) == JSON.stringify(item.answer);
        item.isComplete = true;
      }
    },
    redio() {
      this.submitState = false
      this.submitState = false;
      localStorage.removeItem(
        this.config.activeBook.name + "-drag-" + this.page
      );
      let arr = []
      let arr = [];
      // const data = []
      for (let index = 0; index < this.drageQuestion.length; index++) {
        const item = this.drageQuestion[index];
        item.isComplete = false
        item.isRight = null
        item.isComplete = false;
        item.isRight = null;
        for (let cindex = 0; cindex < item.option.length; cindex++) {
          const citem = item.option[cindex];
          arr.push(
            {
              txt:'',
              value:''
          arr.push({
            txt: "",
            value: "",
          });
            }
          )
        }
        item.userAnswer = arr
        item.userAnswer = arr;
      }
      const optionList = (
        this.container ? this.container : document
      ).querySelectorAll(".drag-option");
      for (let index = 0; index < optionList.length; index++) {
        const item = optionList[index];
        item.style.position = null
        item.style.top = null
        item.style.left = null
        item.style.position = null;
        item.style.top = null;
        item.style.left = null;
      }
      this.spaceList = []
      this.spaceList = [];
    },
    seeAnswer() {
      for (let index = 0; index < this.drageQuestion.length; index++) {
@@ -440,17 +480,17 @@
    },
    // 显示对错方法
    getItemRight(num,number) {
      if(!this.submitState) return null
      let flag = null
      const item = this.question[num]
      if (!this.submitState) return null;
      let flag = null;
      const item = this.question[num];
      console.log(item,num,number);
      const answer = item.answer[number]
      const userAns = item.userAnswer[number].value
      const answer = item.answer[number];
      const userAns = item.userAnswer[number].value;
      if(answer && userAns) {
        flag = answer == userAns
        flag = answer == userAns;
      } 
      return flag
    }
      return flag;
    },
  },
};
</script>
@@ -460,7 +500,11 @@
  text-indent: 0 !important;
}
.drag-box {
  box-sizing: border-box;
  position: relative;
  border: 1px solid;
  padding: 10px;
  border-radius: 10px;
}
.space {
  display: inline-block;
@@ -510,6 +554,28 @@
.el-collapse {
  width: 100%;
}
.svg-btn {
  margin-left: 5px;
  cursor: pointer;
  display: flex;
  padding: 3px;
  fill: #fff;
  border: 1px solid #8fae34;
  border-radius: 5px;
  background-color: #8fae34;
  &:hover {
    fill: #8fae34;
    background-color: #fff;
  }
}
.title-box {
  display: flex;
  margin-bottom: 20px;
  p {
    margin: 0;
    text-indent: 2em !important;
  }
}
/** 解析 */
.objective {
  /deep/ .el-collapse-item__header {

 src/components/graffiti/components/brushSize.vue

@@ -9,6 +9,7 @@
      title="调整笔刷粗细"
      @change="(event) => $emit('change-size', +event.target.value)"
    />
    <el-color-picker v-model="checkColor" @change="onChangeColor"></el-color-picker>
  </div>
</template>

@@ -24,12 +25,29 @@
    brushSize() {
      return this.size
    }
  },
  data() {
    return  {
      checkColor:"#000000"
    }
  },
  methods:{
    onChangeColor(color) {
      this.$emit("change-color", color);
    },
  }
};

// const brushSize = computed(() => props.size);
</script>
<style scoped>
<style lang="less" scoped>
.wrap-range {
  display: flex;
  align-items: center;
  .el-color-picker {
    margin-left: 20px;
  }
}
.wrap-range input {
  width: 150px;
  height: 20px;

 src/components/graffiti/components/colorPicker.vue

File was deleted

 src/components/graffiti/components/toolBtns.vue

@@ -5,9 +5,15 @@
      :key="index"
      :class="{ active: toolSelected === item.name }"
      :title="item.title"
      @click="onChangeTool(item.name)"
      @click="onChangeTool(item.name, index)"
      :style="{ boxShadow: index == num ? '0 0 15px #00ccff' : '' }"
    >
      <i :class="['iconfont', item.icon]"></i>
      <img
        :src="item.icon"
        alt=""
        class="giaffiti-btn"
        :style="{ width: index == 0 ? '18px' : '' }"
      />
    </button>
  </div>
</template>
@@ -22,22 +28,44 @@
  },
  computed:{
    toolSelected() {
      return this.tool
    }
      return this.tool;
    },
  },
  data() {
    return {
      toolList: [
        { name: "brush", title: "画笔", icon: "icon-qianbi" },
        { name: "eraser", title: "橡皮擦", icon: "icon-xiangpi" },
        { name: "clear", title: "清空", icon: "icon-qingchu" },
        { name: "undo", title: "撤销", icon: "icon-chexiao" },
        { name: "save", title: "保存", icon: "icon-fuzhi" },
        {
          name: "brush",
          title: "画笔",
          icon: require("@/assets/images/brush.png"),
        },
        {
          name: "eraser",
          title: "橡皮擦",
          icon: require("@/assets/images/rubber.png"),
        },
        {
          name: "clear",
          title: "清空",
          icon: require("@/assets/images/scrub.png"),
        },
        {
          name: "undo",
          title: "撤销",
          icon: require("@/assets/images/revoke.png"),
        },
        {
          name: "save",
          title: "保存",
          icon: require("@/assets/images/save.png"),
        },
      ],
      num: 0,
    };
  },
  methods: {
    onChangeTool(tool) {
    onChangeTool(tool, index) {
      if (index == 0 || index == 1) this.num = index;
      this.$emit("change-tool", tool);
    },
  },
@@ -45,6 +73,10 @@
</script>

<style scoped>
.tools {
  display: flex;
  align-items: center;
}
.tools button {
  /* border-radius: 50%; */
  width: 32px;
@@ -71,4 +103,7 @@
.tools button i {
  font-size: 20px;
}
.giaffiti-btn {
  width: 24px;
}
</style>

 src/components/graffiti/index.vue

@@ -14,8 +14,7 @@
      </div>
    </div>
    <div class="footer">
      <BrushSize :size="brushSize" @change-size="onChangeSize" />
      <ColorPicker :color="brushColor" @change-color="onChangeColor" />
      <BrushSize :size="brushSize" @change-size="onChangeSize"  @change-color="onChangeColor" />
      <ToolBtns :tool="brushTool" @change-tool="onChangeTool" />
    </div>
  </div>
@@ -23,11 +22,18 @@

<script>
import BrushSize from "./components/brushSize.vue";
import ColorPicker from "./components/colorPicker.vue";
import ToolBtns from "./components/toolBtns.vue";
export default {
  name: "graffiti",
  components: { BrushSize, ColorPicker, ToolBtns },
  components: { BrushSize, ToolBtns },
  props:{
    page:{
      type:Number
    },
    bcImg:{
      type:String
    }
  },
  data() {
    return {
      canvas: null,
@@ -42,16 +48,17 @@
        top: 0,
      },
      backgroundImage:
        "https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF",
        "",
    };
  },
  mounted() {
    this.backgroundImage = this.bcImg
    this.canvas = 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); // 添加滚动条滚动事件监听器
      window.addEventListener("scroll",this.updateCanvasOffset,true); // 添加滚动条滚动事件监听器
      this.getCanvasOffset();
      this.context.lineGap = "round";
      this.context.lineJoin = "round";
@@ -61,6 +68,10 @@
      this.canvas.addEventListener("mouseleave", this.closePaint);
    }
    this.toolClear();
    const oldData = localStorage.getItem('graffiti-data')
    if(oldData) {
      this.backgroundImage = oldData
    }
  },
  methods: {
    changeBackground(imgUrl) {
@@ -143,6 +154,7 @@
    },
    onChangeTool(tool) {
      this.brushTool = tool;
      console.log(tool);
      switch (tool) {
        case "clear":
          this.toolClear();
@@ -159,18 +171,30 @@
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.resetToolActive();
    },
    // 原保存方法
    toolSave() {
      const imageDataUrl = this.canvas.toDataURL("image/png");
      console.log(imageDataUrl);
      // const imgUrl = canvas.toDataURL('image/png');
      // const el = document.createElement('a');
      // el.setAttribute('href', imgUrl);
      // el.setAttribute('target', '_blank');
      // el.setAttribute('download', `graffiti-${Date.now()}`);
      // document.body.appendChild(el);
      // el.click();
      // document.body.removeChild(el);
      // resetToolActive();
      var imgData = this.canvas.toDataURL({format: 'png', quality:1, width:800,});
      localStorage.setItem('graffiti-data',imgData)
    },
    // 保存方法，保存为一张图片并下载
    saveImgData() {
      var link = 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);
      var objurl = URL.createObjectURL(blob);
      link.download = "grid1.png";
      link.href = objurl;
      link.click();
    
      function  dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
      }
    },
    toolUndo() {
      if (this.historyData.length <= 0) {
@@ -180,13 +204,13 @@
      const lastIndex = this.historyData.length - 1;
      this.context.putImageData(this.historyData[lastIndex], 0, 0);
      this.historyData.pop();

      this.resetToolActive();
    },
    // 存储数据
    saveData(data) {
      this.historyData.length >= 50 && this.historyData.shift(); // 设置储存上限为50步
      this.historyData.push(data);
      console.log('数据',this.historyData);
    },
    // 清除、撤销、保存状态不需要保持，操作完后恢复笔刷状态
    resetToolActive() {
@@ -202,7 +226,7 @@
.page {
  display: flex;
  flex-direction: column;
  width: 1038px;
  width:100%;
  height: 866px;
}