From d7bb63ff28f0f08f377239139893fa5b263c844f Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期三, 16 十月 2024 18:05:09 +0800
Subject: [PATCH] 数学
---
src/components/paint/index.vue | 22 ++++++++++++++++------
1 files changed, 16 insertions(+), 6 deletions(-)
diff --git a/src/components/paint/index.vue b/src/components/paint/index.vue
index 11f9075..75e7a89 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="400" :height="canvasHeight"></canvas>
<!-- 鎿嶄綔鎸夐挳 -->
<ul class="paint-btn">
- <li class="btn-box">
+ <li class="paint-btn-box">
<button @click="changeDrawMode">
{{ isDraw ? "妗嗛�夋ā寮�" : "缁樺浘妯″紡" }}
</button>
@@ -122,6 +122,10 @@
type: Number,
default: 1,
},
+ canvasHeight:{
+ type:Number,
+ default:380
+ }
},
mounted() {
this.init();
@@ -237,7 +241,7 @@
this.canvas.renderAll.bind(this.canvas),
{
// 鍙互璁剧疆鍥惧儚鐨勬牱寮忥紝姣斿涓嶉�忔槑搴�
- opacity: 0.5,
+ // opacity: 0.5,
}
);
// 娓叉煋鐢诲竷
@@ -358,20 +362,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