From 0ac4e192d2d2c28eb95e118eb381c04330b07953 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期三, 20 十一月 2024 11:51:46 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/components/paint/index.vue | 73 +++++++++++++++++++++---------------
1 files changed, 42 insertions(+), 31 deletions(-)
diff --git a/src/components/paint/index.vue b/src/components/paint/index.vue
index 11f9075..253f7b6 100644
--- a/src/components/paint/index.vue
+++ b/src/components/paint/index.vue
@@ -1,9 +1,9 @@
<template>
<div class="paint">
- <canvas width="600" height="800" id="canvas"></canvas>
+ <canvas id="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
<!-- 鎿嶄綔鎸夐挳 -->
<ul class="paint-btn">
- <li class="btn-box">
+ <li class="paint-btn-box">
<button @click="changeDrawMode">
{{ isDraw ? "妗嗛�夋ā寮�" : "缁樺浘妯″紡" }}
</button>
@@ -13,9 +13,7 @@
</button>
<button @click="saveImgData">淇濆瓨</button>
</li>
- <li>
-
- </li>
+ <li></li>
<li>
<label>鐢荤瑪锛�</label>
<select name="" id="" @change="changeBrush" v-model="brush">
@@ -57,6 +55,7 @@
export default {
data() {
return {
+ canvasWidth: window.innerWidth > 450 ? 400 : window.innerWidth - 30,
backgroundImgUrl: "", // 鑳屾櫙
isDraw: true, // 缁樼敾銆佹閫夋ā寮�
brush: "Pencil", // 鐢荤瑪绫诲瀷
@@ -122,6 +121,10 @@
type: Number,
default: 1,
},
+ canvasHeight: {
+ type: Number,
+ default: 380,
+ },
},
mounted() {
this.init();
@@ -129,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() {
@@ -144,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;
@@ -158,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;
@@ -174,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");
@@ -186,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,
@@ -201,9 +206,7 @@
rect.render(ctx);
return patternCanvas;
};
-
const img = new Image();
- // img.src = "../assets/images/drop.jpg";
this.texturePatternBrush = new fabric.PatternBrush(this.canvas);
this.texturePatternBrush.source = img;
}
@@ -214,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,
@@ -237,7 +241,7 @@
this.canvas.renderAll.bind(this.canvas),
{
// 鍙互璁剧疆鍥惧儚鐨勬牱寮忥紝姣斿涓嶉�忔槑搴�
- opacity: 0.5,
+ // opacity: 0.5,
}
);
// 娓叉煋鐢诲竷
@@ -256,7 +260,7 @@
// 娓呯┖鐢诲竷
clearCanvas() {
this.canvas.clear();
- this.setBackgroundImage()
+ this.setBackgroundImage();
},
// 淇敼鐢荤瑪棰滆壊
changeLineColor(e) {
@@ -265,11 +269,9 @@
if (brush.getPatternSrc) {
brush.source = brush.getPatternSrc.call(brush);
}
- console.log(e.srcElement.value);
},
// 淇敼鐢荤瑪绮楃粏
changeLineWidth(e) {
- console.log(e);
this.canvas.freeDrawingBrush.width =
parseInt(e.srcElement.value, 10) || 1;
},
@@ -322,7 +324,6 @@
changeShowColor(e) {
this.canvas.contextContainer.shadowColor = e.srcElement.value;
},
-
// 闃村奖瀹藉害
changeShowWidth(e) {
console.log(this.canvas);
@@ -336,7 +337,7 @@
this.canvas.contextContainer.shadowOffsetY =
parseInt(e.srcElement.value, 10) || 0;
},
- // 淇濆瓨鍥句功
+ // 淇濆瓨鍥剧墖
saveImgData() {
const imgData = this.canvas.toDataURL({
format: "png", // 鎸囧畾杈撳嚭鏍煎紡锛岄�氬父鏄�'png'鎴�'jpeg'
@@ -358,20 +359,30 @@
</script>
<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 {
- margin-top:40px;
- padding:20px;
- border:1px solid #ededed;
- width:max-content;
+ width: 96%;
+ margin-top: 40px;
+ padding: 20px;
+ border: 1px solid #ededed;
li {
- margin-bottom:6px;
+ margin-bottom: 6px;
}
}
-.btn-box {
- display:flex;
- justify-content:space-between;
+.paint-btn-box {
+ display: flex;
+ justify-content: space-evenly;
}
</style>
--
Gitblit v1.9.1