From d6cc07d3e9c19a4f97f770581bc85ee3550a22ba Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期五, 25 十月 2024 16:48:24 +0800
Subject: [PATCH] 数学
---
src/components/paint/index.vue | 58 ++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 36 insertions(+), 22 deletions(-)
diff --git a/src/components/paint/index.vue b/src/components/paint/index.vue
index 114d6c7..eadb1e3 100644
--- a/src/components/paint/index.vue
+++ b/src/components/paint/index.vue
@@ -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">
@@ -121,10 +120,10 @@
type: Number,
default: 1,
},
- canvasHeight:{
- type:Number,
- default:380
- }
+ canvasHeight: {
+ type: Number,
+ default: 380,
+ },
},
mounted() {
this.init();
@@ -132,14 +131,17 @@
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,10 @@
// 鐢荤瑪鏍峰紡
this.vLinePatternBrush = new fabric.PatternBrush(this.canvas);
this.vLinePatternBrush.getPatternSrc = () => {
- let patternCanvas = fabric.document.createElement("canvas");
+ let patternCanvas =
+ fabric[this.container ? this.container : document].createElement(
+ "canvas"
+ );
patternCanvas.width = patternCanvas.height = 10;
let ctx = patternCanvas.getContext("2d");
ctx.strokeStyle = this.lineColor;
@@ -161,7 +166,10 @@
};
this.hLinePatternBrush = new fabric.PatternBrush(this.canvas);
this.hLinePatternBrush.getPatternSrc = function () {
- let patternCanvas = fabric.document.createElement("canvas");
+ let patternCanvas =
+ fabric[this.container ? this.container : document].createElement(
+ "canvas"
+ );
patternCanvas.width = patternCanvas.height = 10;
let ctx = patternCanvas.getContext("2d");
ctx.strokeStyle = this.lineColor;
@@ -177,7 +185,10 @@
this.squarePatternBrush.getPatternSrc = function () {
const squareWidth = 10;
const squareDistance = 2;
- const patternCanvas = fabric.document.createElement("canvas");
+ const patternCanvas =
+ fabric[this.container ? this.container : document].createElement(
+ "canvas"
+ );
patternCanvas.width = patternCanvas.height =
squareWidth + squareDistance;
const ctx = patternCanvas.getContext("2d");
@@ -189,7 +200,10 @@
this.diamondPatternBrush.getPatternSrc = function () {
const squareWidth = 10;
const squareDistance = 5;
- const patternCanvas = fabric.document.createElement("canvas");
+ const patternCanvas =
+ fabric[this.container ? this.container : document].createElement(
+ "canvas"
+ );
const rect = new fabric.Rect({
width: squareWidth,
height: squareWidth,
@@ -257,7 +271,7 @@
// 娓呯┖鐢诲竷
clearCanvas() {
this.canvas.clear();
- this.setBackgroundImage()
+ this.setBackgroundImage();
},
// 淇敼鐢荤瑪棰滆壊
changeLineColor(e) {
@@ -367,15 +381,15 @@
}
.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