From 0ab7ff07fd29ac32be045d505ae2d2b9290647a7 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期一, 01 七月 2024 15:32:51 +0800
Subject: [PATCH] 涂色提组件优化
---
src/books/mathBook/view/components/chapter001.vue | 8 +++
.env.product | 4 +-
src/components/graffiti/index.vue | 22 +++++++---
src/books/mathBook/assets/main.less | 5 ++
src/components/graffiti/components/brushSize.vue | 22 ++++++++--
src/components/examinations/index.vue | 28 ++++++++-----
src/books/mathBook/view/components/index.vue | 7 +--
src/App.vue | 2
8 files changed, 67 insertions(+), 31 deletions(-)
diff --git a/.env.product b/.env.product
index 3958a74..76a6d12 100644
--- a/.env.product
+++ b/.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'
\ No newline at end of file
+VUE_APP_BOOK_ID = 'mathBook'
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 77be6ac..58ee2a9 100644
--- a/src/App.vue
+++ b/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;
diff --git a/src/books/mathBook/assets/main.less b/src/books/mathBook/assets/main.less
index 4fc2485..07f8deb 100644
--- a/src/books/mathBook/assets/main.less
+++ b/src/books/mathBook/assets/main.less
@@ -771,6 +771,11 @@
}
}
}
+ .gr-title {
+ font-size: 16px;
+ color:#00aeef;
+ margin-top: 40px;
+ }
}
/* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */
diff --git a/src/books/mathBook/view/components/chapter001.vue b/src/books/mathBook/view/components/chapter001.vue
index a7f9230..a31cf36 100644
--- a/src/books/mathBook/view/components/chapter001.vue
+++ b/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,
diff --git a/src/books/mathBook/view/components/index.vue b/src/books/mathBook/view/components/index.vue
index bd0e2e3..65ba975 100644
--- a/src/books/mathBook/view/components/index.vue
+++ b/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") {
diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue
index 3eb2645..d6d99a8 100644
--- a/src/components/examinations/index.vue
+++ b/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>
diff --git a/src/components/graffiti/components/brushSize.vue b/src/components/graffiti/components/brushSize.vue
index 52d103b..ec5043a 100644
--- a/src/components/graffiti/components/brushSize.vue
+++ b/src/components/graffiti/components/brushSize.vue
@@ -1,15 +1,23 @@
<template>
- <div class="wrap-range">
+ <div class="brushSize">
<!-- 涓轰簡涓嶅湪瀛愮粍浠朵腑鍙樻洿鍊硷紝涓嶇敤v-model -->
- <input
+ <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;
}
diff --git a/src/components/graffiti/index.vue b/src/components/graffiti/index.vue
index 0b0b54a..a14524d 100644
--- a/src/components/graffiti/index.vue
+++ b/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 {
--
Gitblit v1.9.1