From 6aac0dd9c6d6bd3de148f3d6e123f9c91b1aab4b Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期二, 02 七月 2024 09:31:04 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

---
 src/components/graffiti/index.vue |   35 ++++++++++++++++++++++++-----------
 1 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/components/graffiti/index.vue b/src/components/graffiti/index.vue
index 11c1519..a14524d 100644
--- a/src/components/graffiti/index.vue
+++ b/src/components/graffiti/index.vue
@@ -1,6 +1,6 @@
 <!-- 娑傝壊杩炵嚎棰樻帶浠� -->
 <template>
-  <div class="page">
+  <div class="page" :style="{height:imgHeight + 120 + 'px'}">
     <div class="main">
       <div id="canvas_panel">
         <canvas
@@ -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>
@@ -32,6 +32,16 @@
     },
     bcImg:{
       type:String
+    },
+    imgWidth:{
+      type:Number
+    },
+    imgHeight:{
+      type:Number
+    },
+    bcColor:{
+      type:String,
+      default:'#fff'
     }
   },
   data() {
@@ -53,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";
@@ -101,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", {
@@ -122,7 +136,7 @@
           imgData.setAttribute('crossOrigin', '');
         }
         imgData.onload = () => {
-          this.context.drawImage(imgData,0,0)
+          this.context.drawImage(imgData,0,0,this.imgWidth,this.imgHeight)
         }
       }
       resetCanvas();
@@ -218,7 +232,7 @@
         imgData.setAttribute('crossOrigin', '');
       }
       imgData.onload = () => {
-        this.context.drawImage(imgData,0,0)
+        this.context.drawImage(imgData,0,0,this.imgWidth,this.imgHeight)
       }
     },
     // 淇濆瓨鐢诲竷鑳屾櫙鍜屽垝绾垮埌鏈湴鏂规硶
@@ -228,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);
@@ -263,7 +279,6 @@
     saveData(data) {
       this.historyData.length >= 50 && this.historyData.shift(); // 璁剧疆鍌ㄥ瓨涓婇檺涓�50姝�
       this.historyData.push(data);
-      console.log('鏁版嵁',this.historyData);
     },
     // 娓呴櫎銆佹挙閿�銆佷繚瀛樼姸鎬佷笉闇�瑕佷繚鎸侊紝鎿嶄綔瀹屽悗鎭㈠绗斿埛鐘舵��
     resetToolActive() {
@@ -280,7 +295,6 @@
   display: flex;
   flex-direction: column;
   width:100%;
-  height: 866px;
 }
 
 .main {
@@ -292,7 +306,6 @@
   justify-content: space-around;
   align-items: center;
   height: 88px;
-  background-color: #fff;
 }
 
 #canvas_panel {

--
Gitblit v1.9.1