From 172199d84e17b2285aef2c1112fbed3c6f25f27c Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期三, 26 六月 2024 19:51:22 +0800 Subject: [PATCH] 涂色题 --- src/books/artAndDance/view/components/chapter006.vue | 5 src/assets/images/rubber.png | 0 src/components/dragQuestion/index.vue | 258 ++++++++++++++++++---------- src/assets/images/brush.png | 0 src/books/childHealth/view/content/index.vue | 2 src/books/mathBook/view/components/chapter001.vue | 8 /dev/null | 61 ------ src/components/graffiti/components/toolBtns.vue | 57 +++++- src/books/childHealth/view/content/components/chapter007.vue | 2 src/books/artAndDrama/view/components/chapter002.vue | 4 src/components/graffiti/index.vue | 62 ++++-- src/components/graffiti/components/brushSize.vue | 20 ++ src/assets/images/scrub.png | 0 src/books/artAndDance/view/components/index.vue | 2 src/assets/images/revoke.png | 0 src/assets/images/save.png | 0 16 files changed, 281 insertions(+), 200 deletions(-) diff --git a/src/assets/images/brush.png b/src/assets/images/brush.png new file mode 100644 index 0000000..5f23599 --- /dev/null +++ b/src/assets/images/brush.png Binary files differ diff --git a/src/assets/images/revoke.png b/src/assets/images/revoke.png new file mode 100644 index 0000000..97c4e20 --- /dev/null +++ b/src/assets/images/revoke.png Binary files differ diff --git a/src/assets/images/rubber.png b/src/assets/images/rubber.png new file mode 100644 index 0000000..bf9955c --- /dev/null +++ b/src/assets/images/rubber.png Binary files differ diff --git a/src/assets/images/save.png b/src/assets/images/save.png new file mode 100644 index 0000000..f7b2421 --- /dev/null +++ b/src/assets/images/save.png Binary files differ diff --git a/src/assets/images/scrub.png b/src/assets/images/scrub.png new file mode 100644 index 0000000..2ef004c --- /dev/null +++ b/src/assets/images/scrub.png Binary files differ diff --git a/src/books/artAndDance/view/components/chapter006.vue b/src/books/artAndDance/view/components/chapter006.vue index 765ae71..5ae1e73 100644 --- a/src/books/artAndDance/view/components/chapter006.vue +++ b/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> diff --git a/src/books/artAndDance/view/components/index.vue b/src/books/artAndDance/view/components/index.vue index 6678a4d..9893475 100644 --- a/src/books/artAndDance/view/components/index.vue +++ b/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", diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue index 44e8754..b104e7a 100644 --- a/src/books/artAndDrama/view/components/chapter002.vue +++ b/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; } diff --git a/src/books/childHealth/view/content/components/chapter007.vue b/src/books/childHealth/view/content/components/chapter007.vue index 61d378d..e61b2d2 100644 --- a/src/books/childHealth/view/content/components/chapter007.vue +++ b/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"); diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue index cc40f13..d18a39c 100644 --- a/src/books/childHealth/view/content/index.vue +++ b/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", diff --git a/src/books/mathBook/view/components/chapter001.vue b/src/books/mathBook/view/components/chapter001.vue index 13c1ab5..a7f9230 100644 --- a/src/books/mathBook/view/components/chapter001.vue +++ b/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, diff --git a/src/components/dragQuestion/index.vue b/src/components/dragQuestion/index.vue index f3d8d04..d1e4169 100644 --- a/src/components/dragQuestion/index.vue +++ b/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" @@ -18,41 +42,41 @@ {{ item.userAnswer[ditem.num].txt }} <span> <svg - v-if="getItemRight(index,ditem.num)" - t="1716986419862" - class="icon" - viewBox="0 0 1820 1024" - version="1.1" - xmlns="http://www.w3.org/2000/svg" - p-id="18767" - xmlns:xlink="http://www.w3.org/1999/xlink" - width="40" - height="20" - > - <path - d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" - fill="#1AFA29" - p-id="18768" - ></path> - </svg> - <svg - v-if="getItemRight(index,ditem.num) == false" - t="1716987085767" - class="icon" - viewBox="0 0 1024 1024" - version="1.1" - xmlns="http://www.w3.org/2000/svg" - p-id="25745" - xmlns:xlink="http://www.w3.org/1999/xlink" - width="20" - height="20" - > - <path - d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" - fill="#d81e06" - p-id="25746" - ></path> - </svg> + v-if="getItemRight(index, ditem.num)" + t="1716986419862" + class="icon" + viewBox="0 0 1820 1024" + version="1.1" + xmlns="http://www.w3.org/2000/svg" + p-id="18767" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="40" + height="20" + > + <path + d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" + fill="#1AFA29" + p-id="18768" + ></path> + </svg> + <svg + v-if="getItemRight(index, ditem.num) == false" + t="1716987085767" + class="icon" + viewBox="0 0 1024 1024" + version="1.1" + xmlns="http://www.w3.org/2000/svg" + p-id="25745" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="20" + height="20" + > + <path + d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" + fill="#d81e06" + p-id="25746" + ></path> + </svg> </span> </span> </span> @@ -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"> + <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 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++) { // 鏃х瓟妗堣祴鍊� @@ -232,24 +277,23 @@ maxX: null, maxY: null, spaceList: [], - submitState:false, - isLift:false + submitState: 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"); - if(!this.spaceList.length) this.getSpaceInfo(this.parentDom); + if (!this.spaceList.length) this.getSpaceInfo(this.parentDom); const parentInfo = this.parentDom.getBoundingClientRect(); this.parentX = parentInfo.x; this.parentY = parentInfo.y; @@ -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,22 +322,22 @@ e.y <= item.maxY ) { // 濡傛灉绉诲姩鍒扮┖鏍艰寖鍥村唴,涓旈紶鏍囨姮璧峰悗,灏嗙瓟妗堝~鍏ョ┖鏍�,骞跺皢璇ョ┖鏍肩殑鏁版嵁娓呯┖(绌烘牸涓嶈兘鍒犻櫎,鍙兘娓呯┖,鍚﹀垯瀵艰嚧鏁扮粍绱㈠紩鏀瑰彉,涓嶈兘姝g‘鍐欏叆鍒版寚瀹氱┖鏍间腑) - 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) + value: this.moveDom.textContent.charAt(0), + txt: this.moveDom.textContent.slice(2), } ); - if(this.drageQuestion[this.questionIndex].userAnswer[index]) { + 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) { + if (this.isLift && this.moveDom) { // 鍦ㄩ潪绌烘牸鍖哄煙鎶捣榧犳爣 this.moveDom.style.position = ""; this.moveDom.style.left = "0px"; @@ -308,22 +352,20 @@ mouseup(e) { if (this.moveDom) { // this.moveDom = null; - } - this.isLift = true - + this.isLift = true; }, // 鑾峰彇棰樼洰绌烘牸鍧愭爣 getSpaceInfo(parentDom) { let arr = []; const list = parentDom.querySelectorAll(".space"); - + for (let index = 0; index < list.length; index++) { const itemInfo = list[index].getBoundingClientRect(); arr.push({ minX: itemInfo.x, maxX: itemInfo.x + itemInfo.width, - minY: itemInfo.y + 3 , + minY: itemInfo.y + 3, maxY: itemInfo.y + itemInfo.height, }); } @@ -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++) { @@ -439,18 +479,18 @@ } }, // 鏄剧ず瀵归敊鏂规硶 - getItemRight(num,number) { - 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 - if(answer && userAns) { - flag = answer == userAns - } - return flag - } + getItemRight(num, number) { + 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; + if (answer && userAns) { + flag = answer == userAns; + } + 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; + } +} /** 瑙f瀽 */ .objective { /deep/ .el-collapse-item__header { diff --git a/src/components/graffiti/components/brushSize.vue b/src/components/graffiti/components/brushSize.vue index 9c47a7c..52d103b 100644 --- a/src/components/graffiti/components/brushSize.vue +++ b/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; diff --git a/src/components/graffiti/components/colorPicker.vue b/src/components/graffiti/components/colorPicker.vue deleted file mode 100644 index 4cde0de..0000000 --- a/src/components/graffiti/components/colorPicker.vue +++ /dev/null @@ -1,61 +0,0 @@ -<template> - <div> - <span - v-for="(color, index) of colorList" - class="color-item" - :class="{ active: colorSelected === color }" - :style="{ backgroundColor: color }" - :key="index" - @click="onChangeColor(color)" - ></span> - </div> -</template> - -<script> -export default { - props: { - color: { - type: String, - }, - }, - computed:{ - colorSelected() { - return this.color - } - }, - data() { - return { - colorList: [ - "#000000", - "#808080", - "#FF3333", - "#0066FF", - "#FFFF33", - "#33CC66", - ], - }; - }, - methods: { - onChangeColor(color) { - this.$emit("change-color", color); - }, - }, -}; -</script> - -<style scoped> -.color-item { - display: inline-block; - width: 32px; - height: 32px; - margin: 0 4px; - box-sizing: border-box; - border: 4px solid white; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); - cursor: pointer; - transition: 0.3s; -} -.color-item.active { - box-shadow: 0 0 15px #00ccff; -} -</style> diff --git a/src/components/graffiti/components/toolBtns.vue b/src/components/graffiti/components/toolBtns.vue index aad1a3f..83e91d7 100644 --- a/src/components/graffiti/components/toolBtns.vue +++ b/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> @@ -20,24 +26,46 @@ default: "brush", }, }, - computed:{ + 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> diff --git a/src/components/graffiti/index.vue b/src/components/graffiti/index.vue index 8980a01..de1beef 100644 --- a/src/components/graffiti/index.vue +++ b/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; } -- Gitblit v1.9.1