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 | 22 +++++++++++++++-------
1 files changed, 15 insertions(+), 7 deletions(-)
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