From c8e4219b7d89dbc14d389520499f86e86f699fa5 Mon Sep 17 00:00:00 2001
From: litian <2804272236@qq.com>
Date: 星期四, 24 四月 2025 17:14:27 +0800
Subject: [PATCH] tijiao
---
src/components/paint/index.vue | 34 ++++++++++------------------------
1 files changed, 10 insertions(+), 24 deletions(-)
diff --git a/src/components/paint/index.vue b/src/components/paint/index.vue
index 40386fc..253f7b6 100644
--- a/src/components/paint/index.vue
+++ b/src/components/paint/index.vue
@@ -55,7 +55,7 @@
export default {
data() {
return {
- canvasWidth:400,
+ canvasWidth: window.innerWidth > 450 ? 400 : window.innerWidth - 30,
backgroundImgUrl: "", // 鑳屾櫙
isDraw: true, // 缁樼敾銆佹閫夋ā寮�
brush: "Pencil", // 鐢荤瑪绫诲瀷
@@ -127,15 +127,9 @@
},
},
mounted() {
- this.handleCanvasWidth()
this.init();
},
methods: {
- handleCanvasWidth() {
- if(window.innerWidth < 450) {
- this.canvasWidth = window.innerWidth - 30
- }
- },
// 鍒濆鍖栫敾甯�
init() {
this.canvas = new fabric.Canvas(
@@ -146,7 +140,6 @@
);
// 璁剧疆鑳屾櫙
this.setBackgroundImage();
- //
fabric.Object.prototype.transparentCorners = false;
this.setBrush();
},
@@ -156,10 +149,7 @@
// 鐢荤瑪鏍峰紡
this.vLinePatternBrush = new fabric.PatternBrush(this.canvas);
this.vLinePatternBrush.getPatternSrc = () => {
- let patternCanvas =
- fabric[this.container ? this.container : document].createElement(
- "canvas"
- );
+ let patternCanvas = document.createElement("canvas");
patternCanvas.width = patternCanvas.height = 10;
let ctx = patternCanvas.getContext("2d");
ctx.strokeStyle = this.lineColor;
@@ -173,10 +163,7 @@
};
this.hLinePatternBrush = new fabric.PatternBrush(this.canvas);
this.hLinePatternBrush.getPatternSrc = function () {
- let patternCanvas =
- fabric[this.container ? this.container : document].createElement(
- "canvas"
- );
+ let patternCanvas = document.createElement("canvas");
patternCanvas.width = patternCanvas.height = 10;
let ctx = patternCanvas.getContext("2d");
ctx.strokeStyle = this.lineColor;
@@ -192,10 +179,7 @@
this.squarePatternBrush.getPatternSrc = function () {
const squareWidth = 10;
const squareDistance = 2;
- const patternCanvas =
- fabric[this.container ? this.container : document].createElement(
- "canvas"
- );
+ const patternCanvas = document.createElement("canvas");
patternCanvas.width = patternCanvas.height =
squareWidth + squareDistance;
const ctx = patternCanvas.getContext("2d");
@@ -207,10 +191,7 @@
this.diamondPatternBrush.getPatternSrc = function () {
const squareWidth = 10;
const squareDistance = 5;
- const patternCanvas =
- fabric[this.container ? this.container : document].createElement(
- "canvas"
- );
+ const patternCanvas = document.createElement("canvas");
const rect = new fabric.Rect({
width: squareWidth,
height: squareWidth,
@@ -236,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,
@@ -378,11 +360,15 @@
<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;
}
--
Gitblit v1.9.1