数学

闫增涛

2024-10-16 d7bb63ff28f0f08f377239139893fa5b263c844f

 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>
@@ -22,7 +22,7 @@
          <option
            v-for="(item, index) in modelList"
            :value="item.value"
            ::key="index"
            :key="index"
          >
            {{ item.name }}
          </option>
@@ -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>