From 8c312ce260f1e76cd843a4c4c18620f167d7f436 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期五, 25 十月 2024 15:08:58 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/components/paint/index.vue | 32 ++++++++++++++++++--------------
1 files changed, 18 insertions(+), 14 deletions(-)
diff --git a/src/components/paint/index.vue b/src/components/paint/index.vue
index a073674..114d6c7 100644
--- a/src/components/paint/index.vue
+++ b/src/components/paint/index.vue
@@ -1,9 +1,9 @@
<template>
<div class="paint">
- <canvas width="400" height="600" id="canvas"></canvas>
+ <canvas id="canvas" width="400" :height="canvasHeight"></canvas>
<!-- 鎿嶄綔鎸夐挳 -->
<ul class="paint-btn">
- <li class="btn-box">
+ <li class="paint-btn-box">
<button @click="changeDrawMode">
{{ isDraw ? "妗嗛�夋ā寮�" : "缁樺浘妯″紡" }}
</button>
@@ -14,7 +14,6 @@
<button @click="saveImgData">淇濆瓨</button>
</li>
<li>
-
</li>
<li>
<label>鐢荤瑪锛�</label>
@@ -22,7 +21,7 @@
<option
v-for="(item, index) in modelList"
:value="item.value"
- ::key="index"
+ :key="index"
>
{{ item.name }}
</option>
@@ -122,6 +121,10 @@
type: Number,
default: 1,
},
+ canvasHeight:{
+ type:Number,
+ default:380
+ }
},
mounted() {
this.init();
@@ -201,9 +204,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;
}
@@ -237,7 +238,7 @@
this.canvas.renderAll.bind(this.canvas),
{
// 鍙互璁剧疆鍥惧儚鐨勬牱寮忥紝姣斿涓嶉�忔槑搴�
- opacity: 0.5,
+ // opacity: 0.5,
}
);
// 娓叉煋鐢诲竷
@@ -265,11 +266,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 +321,6 @@
changeShowColor(e) {
this.canvas.contextContainer.shadowColor = e.srcElement.value;
},
-
// 闃村奖瀹藉害
changeShowWidth(e) {
console.log(this.canvas);
@@ -336,7 +334,7 @@
this.canvas.contextContainer.shadowOffsetY =
parseInt(e.srcElement.value, 10) || 0;
},
- // 淇濆瓨鍥句功
+ // 淇濆瓨鍥剧墖
saveImgData() {
const imgData = this.canvas.toDataURL({
format: "png", // 鎸囧畾杈撳嚭鏍煎紡锛岄�氬父鏄�'png'鎴�'jpeg'
@@ -358,20 +356,26 @@
</script>
<style lang="less" scoped>
+.paint {
+ margin-top: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
#canvas {
border: 1px solid #ccc;
}
.paint-btn {
+ width: 96%;
margin-top:40px;
padding:20px;
border:1px solid #ededed;
- width:max-content;
li {
margin-bottom:6px;
}
}
-.btn-box {
+.paint-btn-box {
display:flex;
- justify-content:space-between;
+ justify-content:space-evenly;
}
</style>
--
Gitblit v1.9.1