From 2f88f23ad2ee48f0e7d9169e1f180d309362fabb Mon Sep 17 00:00:00 2001
From: litian <2804272236@qq.com>
Date: 星期三, 22 一月 2025 16:39:13 +0800
Subject: [PATCH] hebing

---
 src/components/paint/index.vue |   55 +++++++++++++++++++++++++++++++------------------------
 1 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/src/components/paint/index.vue b/src/components/paint/index.vue
index 114d6c7..253f7b6 100644
--- a/src/components/paint/index.vue
+++ b/src/components/paint/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="paint">
-    <canvas id="canvas" width="400" :height="canvasHeight"></canvas>
+    <canvas id="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
     <!-- 鎿嶄綔鎸夐挳 -->
     <ul class="paint-btn">
       <li class="paint-btn-box">
@@ -13,8 +13,7 @@
         </button>
         <button @click="saveImgData">淇濆瓨</button>
       </li>
-      <li>
-      </li>
+      <li></li>
       <li>
         <label>鐢荤瑪锛�</label>
         <select name="" id="" @change="changeBrush" v-model="brush">
@@ -56,6 +55,7 @@
 export default {
   data() {
     return {
+      canvasWidth: window.innerWidth > 450 ? 400 : window.innerWidth - 30,
       backgroundImgUrl: "", // 鑳屾櫙
       isDraw: true, // 缁樼敾銆佹閫夋ā寮�
       brush: "Pencil", // 鐢荤瑪绫诲瀷
@@ -121,10 +121,10 @@
       type: Number,
       default: 1,
     },
-    canvasHeight:{
-      type:Number,
-      default:380
-    }
+    canvasHeight: {
+      type: Number,
+      default: 380,
+    },
   },
   mounted() {
     this.init();
@@ -132,14 +132,16 @@
   methods: {
     // 鍒濆鍖栫敾甯�
     init() {
-      this.canvas = new fabric.Canvas("canvas", {
-        isDrawingMode: true,
-      });
+      this.canvas = new fabric.Canvas(
+        (this.container ? this.container : document).querySelector("#canvas"),
+        {
+          isDrawingMode: true,
+        }
+      );
       // 璁剧疆鑳屾櫙
-      this.setBackgroundImage()
-      //
+      this.setBackgroundImage();
       fabric.Object.prototype.transparentCorners = false;
-      this.setBrush()
+      this.setBrush();
     },
     // 鍒涘缓鍚勭绗斿埛
     setBrush() {
@@ -147,7 +149,7 @@
         // 鐢荤瑪鏍峰紡
         this.vLinePatternBrush = new fabric.PatternBrush(this.canvas);
         this.vLinePatternBrush.getPatternSrc = () => {
-          let patternCanvas = fabric.document.createElement("canvas");
+          let patternCanvas = document.createElement("canvas");
           patternCanvas.width = patternCanvas.height = 10;
           let ctx = patternCanvas.getContext("2d");
           ctx.strokeStyle = this.lineColor;
@@ -161,7 +163,7 @@
         };
         this.hLinePatternBrush = new fabric.PatternBrush(this.canvas);
         this.hLinePatternBrush.getPatternSrc = function () {
-          let patternCanvas = fabric.document.createElement("canvas");
+          let patternCanvas = document.createElement("canvas");
           patternCanvas.width = patternCanvas.height = 10;
           let ctx = patternCanvas.getContext("2d");
           ctx.strokeStyle = this.lineColor;
@@ -177,7 +179,7 @@
         this.squarePatternBrush.getPatternSrc = function () {
           const squareWidth = 10;
           const squareDistance = 2;
-          const patternCanvas = fabric.document.createElement("canvas");
+          const patternCanvas = document.createElement("canvas");
           patternCanvas.width = patternCanvas.height =
             squareWidth + squareDistance;
           const ctx = patternCanvas.getContext("2d");
@@ -189,7 +191,7 @@
         this.diamondPatternBrush.getPatternSrc = function () {
           const squareWidth = 10;
           const squareDistance = 5;
-          const patternCanvas = fabric.document.createElement("canvas");
+          const patternCanvas = document.createElement("canvas");
           const rect = new fabric.Rect({
             width: squareWidth,
             height: squareWidth,
@@ -215,6 +217,7 @@
       const oldData = localStorage.getItem(
         this.config.activeBook.name + "-paint-" + this.page
       );
+      this.oldImg = oldData;
       this.backgroundImgUrl = oldData || this.imgUrl;
       fabric.Image.fromURL(
         this.backgroundImgUrl,
@@ -257,7 +260,7 @@
     // 娓呯┖鐢诲竷
     clearCanvas() {
       this.canvas.clear();
-      this.setBackgroundImage()
+      this.setBackgroundImage();
     },
     // 淇敼鐢荤瑪棰滆壊
     changeLineColor(e) {
@@ -357,25 +360,29 @@
 
 <style lang="less" scoped>
 .paint {
+  position: relative;
   margin-top: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
+}
+.bcImg {
+  position: absolute;
 }
 #canvas {
   border: 1px solid #ccc;
 }
 .paint-btn {
   width: 96%;
-  margin-top:40px;
-  padding:20px;
-  border:1px solid #ededed;
+  margin-top: 40px;
+  padding: 20px;
+  border: 1px solid #ededed;
   li {
-    margin-bottom:6px;
+    margin-bottom: 6px;
   }
 }
 .paint-btn-box {
-  display:flex;
-  justify-content:space-evenly;
+  display: flex;
+  justify-content: space-evenly;
 }
 </style>

--
Gitblit v1.9.1