From ddfc3f553120cd2dc08a2f2172f12c752adc65a0 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期三, 03 七月 2024 14:51:44 +0800
Subject: [PATCH] 优化
---
src/components/graffiti/index.vue | 155 +++++++++++++++++++++++++++++++--------------------
1 files changed, 93 insertions(+), 62 deletions(-)
diff --git a/src/components/graffiti/index.vue b/src/components/graffiti/index.vue
index a14524d..902940e 100644
--- a/src/components/graffiti/index.vue
+++ b/src/components/graffiti/index.vue
@@ -1,6 +1,6 @@
<!-- 娑傝壊杩炵嚎棰樻帶浠� -->
<template>
- <div class="page" :style="{height:imgHeight + 120 + 'px'}">
+ <div class="page" :style="{ height: imgHeight + 120 + 'px' }">
<div class="main">
<div id="canvas_panel">
<canvas
@@ -13,8 +13,12 @@
>
</div>
</div>
- <div class="footer" :style="{backgroundColor:bcColor}">
- <BrushSize :size="brushSize" @change-size="onChangeSize" @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>
@@ -26,29 +30,29 @@
export default {
name: "graffiti",
components: { BrushSize, ToolBtns },
- props:{
- page:{
- type:Number
+ props: {
+ page: {
+ type: Number,
},
- bcImg:{
- type:String
+ bcImg: {
+ type: String,
},
- imgWidth:{
- type:Number
+ imgWidth: {
+ type: Number,
},
- imgHeight:{
- type:Number
+ imgHeight: {
+ type: Number,
},
- bcColor:{
- type:String,
- default:'#fff'
- }
+ bcColor: {
+ type: String,
+ default: "#fff",
+ },
},
data() {
return {
canvas: null,
context: null,
- painting: false, // 璁板綍鐘舵�侊紝榧犳爣鏄惁鍦ㄦ寜涓嬬姸鎬�
+ painting: false, // 璁板綍鐘舵�侊紝榧犳爣鏄惁鍦ㄦ寜涓嬬姸鎬�
historyData: [], // 瀛樺偍鍘嗗彶鏁版嵁锛岀敤浜庢挙閿�
brushSize: 5, // 绗斿埛澶у皬
brushColor: "#000000", // 绗斿埛棰滆壊
@@ -57,20 +61,23 @@
left: 0,
top: 0,
},
- backgroundImage:
- "",
+ backgroundImage: "",
};
},
mounted() {
- this.backgroundImage = this.bcImg
- this.canvas = (this.container ? this.container : 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);
- (
- this.container ? this.container : document
- ).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";
@@ -80,9 +87,11 @@
this.canvas.addEventListener("mouseleave", this.closePaint);
}
this.toolClear();
- const oldData = localStorage.getItem(this.config.activeBook.name + '-graffiti-' + this.page)
- if(oldData) {
- this.backgroundImage = oldData
+ const oldData = localStorage.getItem(
+ this.config.activeBook.name + "-graffiti-" + this.page
+ );
+ if (oldData) {
+ this.backgroundImage = oldData;
}
},
// watch:{
@@ -111,13 +120,16 @@
},
// 鍒濆鍖� 鐢诲竷锛岃缃ぇ灏忚儗鏅壊
initCanvas() {
- const that = this
+ const that = this;
const resetCanvas = () => {
const elPanel = (
- this.container ? this.container : document
- ).getElementById("canvas_panel");
- that.canvas.width = elPanel.clientWidth;
- that.canvas.height = elPanel.clientHeight;
+ this.container ? this.container : document
+ ).getElementById("canvas_panel");
+ try {
+ that.canvas.width = elPanel.clientWidth;
+ that.canvas.height = elPanel.clientHeight;
+ } catch (error) {}
+
that.context = that.canvas.getContext("2d", {
willReadFrequently: true,
}); // 娣诲姞杩欎竴琛�
@@ -128,17 +140,19 @@
// 璁剧疆鐢诲竷鑳屾櫙鍥�
const imgData = new Image();
// 鍒嗕袱绉嶆儏鍐碉紝鍒濇鐨勫浘鐗� 鐩存帴鐢ㄥ閮ㄩ摼鎺ワ紝闇�瑕佸姞璺ㄥ煙鍜屾椂闂存埑锛屼簩娆′繚瀛樼殑浣滀负鑳屾櫙鍒欎笉闇�瑕�
- const oldData = localStorage.getItem(this.config.activeBook.name + '-graffiti-' + this.page)
- if(oldData) {
- imgData.src = oldData
+ 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.src = this.backgroundImage + "?" + new Date().getTime();
+ imgData.setAttribute("crossOrigin", "");
}
imgData.onload = () => {
- this.context.drawImage(imgData,0,0,this.imgWidth,this.imgHeight)
- }
- }
+ this.context.drawImage(imgData, 0, 0, this.imgWidth, this.imgHeight);
+ };
+ };
resetCanvas();
// 鐩戝惉绐楀彛澶у皬 锛岀獥鍙ｆ敼鍙橀噸鏂版覆鏌撶敾甯�
window.addEventListener("resize", resetCanvas);
@@ -192,7 +206,7 @@
},
// 閲嶆柊璁＄畻鐢诲竷鐨勫亸绉诲��
updateCanvasOffset() {
- this.getCanvasOffset();
+ this.getCanvasOffset();
},
// 鏀瑰彉绗斿埛澶у皬
onChangeSize(size) {
@@ -224,47 +238,64 @@
// 鏂板姞鍐呭锛屾竻绌哄悗灏嗚儗鏅浘鍐嶈缃笂鍘�
const imgData = new Image();
// 鍒嗕袱绉嶆儏鍐碉紝鍒濇鐨勫浘鐗� 鐩存帴鐢ㄥ閮ㄩ摼鎺ワ紝闇�瑕佸姞璺ㄥ煙鍜屾椂闂存埑锛屼簩娆′繚瀛樼殑浣滀负鑳屾櫙鍒欎笉闇�瑕�
- const oldData = localStorage.getItem(this.config.activeBook.name + '-graffiti-' + this.page)
- if(oldData) {
- imgData.src = oldData
+ 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.src = this.backgroundImage + "?" + new Date().getTime();
+ imgData.setAttribute("crossOrigin", "");
}
imgData.onload = () => {
- this.context.drawImage(imgData,0,0,this.imgWidth,this.imgHeight)
- }
+ this.context.drawImage(imgData, 0, 0, this.imgWidth, this.imgHeight);
+ };
},
// 淇濆瓨鐢诲竷鑳屾櫙鍜屽垝绾垮埌鏈湴鏂规硶
toolSave() {
- var imgData = this.canvas.toDataURL({format: 'png', quality:1, width:800,});
- localStorage.setItem(this.config.activeBook.name + '-graffiti-' + this.page,imgData)
+ 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 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--){
+
+ 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});
+ return new Blob([u8arr], { type: mime });
}
},
// 杩斿洖涓婁竴姝ユ柟娉�(鎾ら攢)
toolUndo() {
- //
+ //
if (this.historyData.length <= 0) {
this.resetToolActive();
return;
@@ -294,7 +325,7 @@
.page {
display: flex;
flex-direction: column;
- width:100%;
+ width: 100%;
}
.main {
--
Gitblit v1.9.1