From 0ab7ff07fd29ac32be045d505ae2d2b9290647a7 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期一, 01 七月 2024 15:32:51 +0800
Subject: [PATCH] 涂色提组件优化
---
src/components/graffiti/index.vue | 156 +++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 123 insertions(+), 33 deletions(-)
diff --git a/src/components/graffiti/index.vue b/src/components/graffiti/index.vue
index 8980a01..a14524d 100644
--- a/src/components/graffiti/index.vue
+++ b/src/components/graffiti/index.vue
@@ -1,11 +1,11 @@
+<!-- 娑傝壊杩炵嚎棰樻帶浠� -->
<template>
- <div class="page">
+ <div class="page" :style="{height:imgHeight + 120 + 'px'}">
<div class="main">
<div id="canvas_panel">
<canvas
id="canvas"
:style="{
- backgroundImage: `url(${backgroundImage})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
@@ -13,9 +13,8 @@
>
</div>
</div>
- <div class="footer">
- <BrushSize :size="brushSize" @change-size="onChangeSize" />
- <ColorPicker :color="brushColor" @change-color="onChangeColor" />
+ <div class="footer" :style="{backgroundColor:bcColor}">
+ <BrushSize :size="brushSize" @change-size="onChangeSize" @change-color="onChangeColor" />
<ToolBtns :tool="brushTool" @change-tool="onChangeTool" />
</div>
</div>
@@ -23,16 +22,33 @@
<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
+ },
+ imgWidth:{
+ type:Number
+ },
+ imgHeight:{
+ type:Number
+ },
+ bcColor:{
+ type:String,
+ default:'#fff'
+ }
+ },
data() {
return {
canvas: null,
context: null,
- painting: false,
+ painting: false, // 璁板綍鐘舵�侊紝榧犳爣鏄惁鍦ㄦ寜涓嬬姸鎬�
historyData: [], // 瀛樺偍鍘嗗彶鏁版嵁锛岀敤浜庢挙閿�
brushSize: 5, // 绗斿埛澶у皬
brushColor: "#000000", // 绗斿埛棰滆壊
@@ -42,16 +58,19 @@
top: 0,
},
backgroundImage:
- "https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF",
+ "",
};
},
mounted() {
- this.canvas = document.getElementById("canvas");
+ this.backgroundImage = this.bcImg
+ 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); // 娣诲姞婊氬姩鏉℃粴鍔ㄤ簨浠剁洃鍚櫒
+ (
+ this.container ? this.container : document
+ ).addEventListener("scroll",this.updateCanvasOffset,true); // 娣诲姞婊氬姩鏉℃粴鍔ㄤ簨浠剁洃鍚櫒
this.getCanvasOffset();
this.context.lineGap = "round";
this.context.lineJoin = "round";
@@ -61,15 +80,42 @@
this.canvas.addEventListener("mouseleave", this.closePaint);
}
this.toolClear();
+ const oldData = localStorage.getItem(this.config.activeBook.name + '-graffiti-' + this.page)
+ if(oldData) {
+ this.backgroundImage = oldData
+ }
},
+ // watch:{
+ // backgroundImage:{
+ // handler(newValue) {
+ // if(newValue && this.context) {
+ // const imgData = new Image();
+ // // 鍒嗕袱绉嶆儏鍐碉紝鍒濇鐨勫浘鐗� 鐩存帴鐢ㄥ閮ㄩ摼鎺ワ紝闇�瑕佸姞璺ㄥ煙鍜屾椂闂存埑锛屼簩娆′繚瀛樼殑浣滀负鑳屾櫙鍒欎笉闇�瑕�
+ // const oldData = localStorage.getItem(this.config.activeBook.name + '-graffiti-' + this.page)
+ // if(oldData) {
+ // imgData.src = newValue
+ // } else {
+ // imgData.src = newValue + '?' + new Date().getTime();
+ // imgData.setAttribute('crossOrigin', '');
+ // }
+ // imgData.onload = () => {
+ // this.context.drawImage(imgData,0,0)
+ // }
+ // }
+ // }
+ // }
+ // },
methods: {
changeBackground(imgUrl) {
this.backgroundImage = imgUrl;
},
+ // 鍒濆鍖� 鐢诲竷锛岃缃ぇ灏忚儗鏅壊
initCanvas() {
const that = this
- function resetCanvas() {
- const elPanel = document.getElementById("canvas_panel");
+ const resetCanvas = () => {
+ 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", {
@@ -79,9 +125,22 @@
that.context.fillRect(0, 0, that.canvas.width, that.canvas.height);
that.context.fillStyle = "black";
that.getCanvasOffset(); // 鏇存柊鐢诲竷浣嶇疆
+ // 璁剧疆鐢诲竷鑳屾櫙鍥�
+ const imgData = new Image();
+ // 鍒嗕袱绉嶆儏鍐碉紝鍒濇鐨勫浘鐗� 鐩存帴鐢ㄥ閮ㄩ摼鎺ワ紝闇�瑕佸姞璺ㄥ煙鍜屾椂闂存埑锛屼簩娆′繚瀛樼殑浣滀负鑳屾櫙鍒欎笉闇�瑕�
+ const oldData = localStorage.getItem(this.config.activeBook.name + '-graffiti-' + this.page)
+ if(oldData) {
+ imgData.src = oldData
+ } else {
+ imgData.src = this.backgroundImage + '?' + new Date().getTime();
+ imgData.setAttribute('crossOrigin', '');
+ }
+ imgData.onload = () => {
+ this.context.drawImage(imgData,0,0,this.imgWidth,this.imgHeight)
+ }
}
-
resetCanvas();
+ // 鐩戝惉绐楀彛澶у皬 锛岀獥鍙ｆ敼鍙橀噸鏂版覆鏌撶敾甯�
window.addEventListener("resize", resetCanvas);
},
@@ -99,7 +158,7 @@
y: y - this.canvasOffset.top,
};
},
-
+ // 榧犳爣鎶捣鏂规硶
downCallback(event) {
// 鍏堜繚瀛樹箣鍓嶇殑鏁版嵁锛岀敤浜庢挙閿�鏃舵仮澶嶏紙缁樺埗鍓嶄繚瀛橈紝涓嶆槸缁樺埗鍚庡啀淇濆瓨锛�
const data = this.context.getImageData(
@@ -118,7 +177,7 @@
this.brushTool === "eraser" ? "#FFFFFF" : this.brushColor;
this.painting = true;
},
-
+ // 榧犳爣绉诲姩鏂规硶(璁＄畻鍧愭爣骞舵覆鏌撹建杩�)
moveCallback(event) {
if (!this.painting) {
return;
@@ -131,16 +190,19 @@
closePaint() {
this.painting = false;
},
+ // 閲嶆柊璁＄畻鐢诲竷鐨勫亸绉诲��
updateCanvasOffset() {
- this.getCanvasOffset(); // 閲嶆柊璁＄畻鐢诲竷鐨勫亸绉诲��
+ this.getCanvasOffset();
},
-
+ // 鏀瑰彉绗斿埛澶у皬
onChangeSize(size) {
this.brushSize = size;
},
+ // 鏀瑰彉绗斿埛棰滆壊
onChangeColor(color) {
this.brushColor = color;
},
+ // 淇濆瓨锛屾竻绌虹瓑鎸夐挳
onChangeTool(tool) {
this.brushTool = tool;
switch (tool) {
@@ -155,32 +217,62 @@
break;
}
},
+ // 娓呯┖canvas鎵�鏈夊唴瀹�(鑳屾櫙鍥鹃櫎澶�)
toolClear() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.resetToolActive();
+ // 鏂板姞鍐呭锛屾竻绌哄悗灏嗚儗鏅浘鍐嶈缃笂鍘�
+ const imgData = new Image();
+ // 鍒嗕袱绉嶆儏鍐碉紝鍒濇鐨勫浘鐗� 鐩存帴鐢ㄥ閮ㄩ摼鎺ワ紝闇�瑕佸姞璺ㄥ煙鍜屾椂闂存埑锛屼簩娆′繚瀛樼殑浣滀负鑳屾櫙鍒欎笉闇�瑕�
+ const oldData = localStorage.getItem(this.config.activeBook.name + '-graffiti-' + this.page)
+ if(oldData) {
+ imgData.src = oldData
+ } else {
+ imgData.src = this.backgroundImage + '?' + new Date().getTime();
+ imgData.setAttribute('crossOrigin', '');
+ }
+ imgData.onload = () => {
+ this.context.drawImage(imgData,0,0,this.imgWidth,this.imgHeight)
+ }
},
+ // 淇濆瓨鐢诲竷鑳屾櫙鍜屽垝绾垮埌鏈湴鏂规硶
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(this.config.activeBook.name + '-graffiti-' + this.page,imgData)
},
+ // 淇濆瓨涓轰竴寮犲浘鐗囧苟涓嬭浇鐨勬柟娉�
+ saveImgData() {
+ 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);
+ 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) {
this.resetToolActive();
return;
}
+ // 灏嗙敾鐨勪笂涓�姝ユ暟鎹啓鍏anvas 閲嶆柊娓叉煋
const lastIndex = this.historyData.length - 1;
this.context.putImageData(this.historyData[lastIndex], 0, 0);
this.historyData.pop();
-
this.resetToolActive();
},
// 瀛樺偍鏁版嵁
@@ -202,8 +294,7 @@
.page {
display: flex;
flex-direction: column;
- width: 1038px;
- height: 866px;
+ width:100%;
}
.main {
@@ -215,7 +306,6 @@
justify-content: space-around;
align-items: center;
height: 88px;
- background-color: #fff;
}
#canvas_panel {
--
Gitblit v1.9.1