画图

src/views/drawDot/index.vue

@@ -0,0 +1,231 @@
+<template>
+    <div id="app">
+      <h1>图片点击获取多个形状坐标</h1>
+  
+      <!-- 选择形状类型 -->
+      <!-- <div>
+        <label for="shape-type">选择形状类型：</label>
+        <select v-model="currentShapeType" id="shape-type" @change="resetShape">
+          <option value="single-bed">单床fo (4点)</option>
+          <option value="double-bed">双床 (8点)</option>
+          <option value="line">分割线 (n点)</option>
+        </select>
+        </div> -->
+  
+      <!-- 图片区域 -->
+ <div class="box">
+        <div
+        ref="imageArea"
+        class="image-area"
+        @click="handleClick"
+      >
+        <img src="../../assets/dot.jpeg" alt="图片" class="image">
+        <template v-for="shape in shapes">
+          <div
+            v-for="(point, index) in shape.points"
+            :key="`shape-${shape.type}-point-${index}`"
+            :style="getPointStyle(point)"
+            class="point-marker"
+          ></div>
+          <div v-if="shape.type === 'single-bed' || shape.type === 'double-bed'"
+               :style="getRectangleStyle(shape.points)"
+               class="rectangle"
+          ></div>
+          <polyline v-if="shape.type === 'line'"
+                    :points="getLinePoints(shape.points)"
+                    class="line"
+                    fill="none" stroke="red" stroke-width="2"/>
+        </template>
+        </div>
+
+      <!--  -->
+      <div>
+        
+
+        <el-form :model="formObj" ref="formObj" label-width="120px" class="demo-dynamic">
+          <el-form-item label="区域类型:">
+              <el-radio-group v-model="currentShapeType">
+                <el-radio label="single">喷淋(4个点)</el-radio>
+                <el-radio label="single-bed">单卧床(4个点)</el-radio>
+                <el-radio label="double-bed">双卧床(8个点)</el-radio>
+                <el-radio label="line">水槽(8个点)</el-radio>
+              </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            prop="spray"
+            label="单卧床(4个点):"
+            required
+          >
+            <el-input v-model="formObj.spray"></el-input>
+            <div>
+              <span v-for="(item, index) in currentPoints" :key="index">{{  `x:${item.x} y:${item.y}` }}</span>
+            </div>
+          </el-form-item>
+          <!-- <el-form-item
+            v-for="(domain, index) in formObj.bedList"
+            :label="'卧床区域' + index"
+            :key="domain.key"
+            :prop="'bedList.' + index + '.value'"
+            :rules="{
+              required: true, message: '卧床点不能为空', trigger: 'blur'
+            }"
+          >
+            <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除
+              <el-button @click="addDomain">新增</el-button>
+            </el-button>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('formObj')">提交</el-button>
+            <el-button @click="resetForm('formObj')">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+  </div>
+     
+  
+      <!-- 显示当前形状的坐标点 -->
+      <pre>{{ shapes }}</pre>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {
+        currentShapeType: 'single-bed',
+        shapes: [],
+        currentPoints: [],
+        formObj: {
+          type:'1',
+          bedList: [{
+            value: ''
+          }],
+          spray: ''
+        }
+      };
+    },
+    methods: {
+      resetShape() {
+        this.currentPoints = [];
+      },
+      handleClick(event) {
+        const rect = this.$refs.imageArea.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        this.currentPoints.push({ x, y });
+  
+        const requiredPoints = this.getRequiredPointsForShape(this.currentShapeType);
+  
+        if (this.currentPoints.length === requiredPoints) {
+          this.shapes.push({
+            type: this.currentShapeType,
+            points: [...this.currentPoints],
+          });
+          this.currentPoints = [];
+        }
+      },
+      getRequiredPointsForShape(shapeType) {
+        switch (shapeType) {
+          case 'single-bed':
+            return 4;
+          case 'double-bed':
+            return 8;
+          case 'line':
+            return 10; // Example: 10 points for the line
+          default:
+            return 4;
+        }
+      },
+      getPointStyle(point) {
+        return {
+          top: `${point.y}px`,
+          left: `${point.x}px`,
+          position: 'absolute',
+          width: '10px',
+          height: '10px',
+          backgroundColor: 'blue',
+          borderRadius: '50%',
+        };
+      },
+      getRectangleStyle(points) {
+        if (points.length < 4) return {};
+        const [leftup, leftdown, rightup, rightdown] = points;
+        const width = Math.abs(rightup.x - leftup.x);
+        const height = Math.abs(leftdown.y - leftup.y);
+        return {
+          top: `${leftup.y}px`,
+          left: `${leftup.x}px`,
+          width: `${width}px`,
+          height: `${height}px`,
+          border: '2px solid red',
+          position: 'absolute',
+        };
+      },
+      getLinePoints(points) {
+        return points.map(point => `${point.x},${point.y}`).join(' ');
+      },
+
+      // 
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      },
+      removeDomain(item) {
+        var index = this.formObj.bedList.indexOf(item)
+        if (index !== -1) {
+          this.formObj.bedList.splice(index, 1)
+        }
+      },
+      addDomain() {
+        this.formObj.bedList.push({
+          value: '',
+          key: Date.now()
+        });
+      }
+
+
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .box{ 
+    display: flex;
+    
+  }
+    .image-area {
+    position: relative;
+    width: 100%;
+    height: auto;
+    display: inline-block;
+    width:700px;
+    height:600px;
+  }
+  .image {
+    width: 100%;
+    height: auto;
+  }
+  .rectangle {
+    border: 2px solid red;
+    position: absolute;
+  }
+  .point-marker {
+    position: absolute;
+  }
+  .line {
+    position: absolute;
+    fill: none;
+    stroke: red;
+    stroke-width: 2px;
+  }
+  </style>
+