feat: revert 4nodes labeled file to xywh format

src/views/demo/components/img-maker.vue

@@ -5,10 +5,11 @@
       <el-button plain type="primary" class="shape-border" @click="enableDragMode" :disabled="state.dragMode">移动图片</el-button>
 
       <el-button plain type="primary" style="margin-left: 30px" class="shape-border" @click="selectLastObject" :disabled="!!state.activeTarget"
-        >选择最后一个标注(w)</el-button
+        >选择标注(w)</el-button
       >
       <el-button plain type="primary" class="shape-border" @click="rotate(8)" :disabled="!state.activeTarget"> 顺时针旋转(r) </el-button>
       <el-button plain type="primary" class="shape-border" @click="rotate(-8)" :disabled="!state.activeTarget">逆时针旋转(e)</el-button>
+      <el-button plain type="primary" class="shape-border" @click="deleteOne">删除(Back)</el-button>
       <el-button plain type="primary" style="margin-left: 30px" class="shape-border" @click="changeZoom(1.1)">放大图片</el-button>
       <el-button plain type="primary" class="shape-border" @click="changeZoom(0.9)">缩小图片</el-button>
       <!-- <el-button plain type="primary" class="shape-border" @click="drawPolygon('polygon')">多边形</el-button> -->
@@ -18,7 +19,7 @@
 </template>
 <script lang="ts" setup>
 import { fabric } from 'fabric'
-import { reactive, watch, onMounted } from 'vue'
+import { reactive, watch, onMounted, computed } from 'vue'
 import { ElMessage } from 'element-plus'
 // import { sortPoints } from '@/utils/fabric'
 
@@ -93,6 +94,7 @@ const state = reactive({
   activeLine: '' as any,
   line: {} as canvasPoint
 })
+
 watch(
   () => props.classDef,
   value => {
@@ -133,14 +135,23 @@ const changeZoom = multi => {
   state.canvas.renderAll()
 }
 
+const deleteOne = () => {
+  const obj = state.canvas.getActiveObject()
+  state.canvas.remove(obj)
+}
+
 const loadInit = () => {
   drawTypeChange('rectangle')
   state.color = props.classDef && props.classDef.color ? props.classDef.color : '#E34F51'
   if (!props.isPicOnly) {
     document.addEventListener('keydown', function (e) {
+      console.log(e.key, state.activeTarget, state.canvas.getActiveObject())
       if (e.key === 'w' || e.key === 'W') {
         selectLastObject()
         return
+      } else if (e.key === 'Backspace') {
+        const obj = state.canvas.getActiveObject()
+        state.canvas.remove(obj)
       }
       if (state.activeTarget) {
         if (e.key === 'r' || e.key === 'R') {
@@ -199,8 +210,9 @@ const loadInit = () => {
       for (let i = 0; i < props.jsonData.length; i++) {
         let config = props.jsonData[i]
         let subArr = config.subArr
-        const lW = imgInstance.width * state.radio
-        const lH = imgInstance.height * state.radio
+        console.log('ratio', state.radio)
+        const lW = imgInstance.width //* state.radio
+        const lH = imgInstance.height //* state.radio
         let obj = new fabric.Path(
           'M ' +
             subArr[1] * lW +
@@ -786,6 +798,7 @@ const getData = () => {
           // }
         })
       } else {
+        // console.log('else')
         marks.forEach(mark => {
           let poi = {
             x: getPoint(aCoords[mark].x),
@@ -794,8 +807,8 @@ const getData = () => {
           // console.log(poi)
           poi = getRealPoint(poi)
           // console.log(poi)
-          poi.x = poi.x / state.realRadioX / 1920
-          poi.y = poi.y / state.realRadioY / 1080
+          poi.x = poi.x / 1920
+          poi.y = poi.y / 1080
           // console.log(poi)
           point['nodes'].push(poi)
           // point['nodes'].push(getRealPoint(poi))

src/views/demo/data/index.vue

@@ -212,6 +212,7 @@ const deleteData = async (params: any) => {
   await useHandleData(delDataApi, params.id, `删除【${params.name}】数据`)
   proTable.value?.getTableList()
 }
+import { fourNodes2xywh, xywh2fourNodes } from './reformat'
 
 // 标注图片
 const markImg = data => {
@@ -245,9 +246,11 @@ const markImg = data => {
           .get<any>(state.cacheData.labelurl)
           .then(res => {
             state.jsonData = []
-            console.log(res)
+            res = xywh2fourNodes(res)
+            // console.log('check3', res)
+
             let arr = res.replace('\r', '').split('\n')
-            console.log(arr)
+            // console.log(arr)
             for (let i = 0; i < arr.length; i++) {
               let subArr = arr[i].split(' ')
               // console.log(subArr)
@@ -352,7 +355,12 @@ const handleImgSuccess = data => {
     filename = filename.substring(1)
   }
   // console.log(filename)
-
+  let pData = fourNodes2xywh(data['data'])
+  // console.log('check1', data['data'])
+  data['data'] = pData
+  // let a = xywh2fourNodes(pData)
+  // console.log('check2', a)
+  // let rData = xywh2fourNodes(pData)
   labelFile(data['data'], filename).then(res => {
     // console.log(res)
     if (res.code === 200) {

src/views/demo/data/reformat.js

@@ -0,0 +1,41 @@
+export const fourNodes2xywh = function (data) {
+  let lines = data.replace('\r', '').split('\n')
+  let res = []
+  lines.forEach(line => {
+    const arr = line.split(' ')
+    let tmp = []
+    tmp.push(arr[0])
+    tmp.push((parseFloat(arr[3]) + parseFloat(arr[5])) / 2)
+    tmp.push((parseFloat(arr[2]) + parseFloat(arr[4])) / 2)
+    tmp.push(Math.abs(arr[5] - arr[3]))
+    tmp.push(Math.abs(arr[4] - arr[2]))
+    res.push(tmp.join(' '))
+  })
+  // console.log(res)
+  return res.join('\r\n')
+}
+
+export const xywh2fourNodes = function (data) {
+  let lines = data.replace('\r', '').split('\n')
+  let res = []
+  lines.forEach(line => {
+    const arr = line.split(' ')
+    let tmp = []
+    tmp.push(arr[0])
+    tmp.push(parseFloat(arr[1]) + parseFloat(arr[3]) / 2)
+    tmp.push(parseFloat(arr[2]) - parseFloat(arr[4]) / 2)
+
+    tmp.push(parseFloat(arr[1]) + parseFloat(arr[3]) / 2)
+    tmp.push(parseFloat(arr[2]) + parseFloat(arr[4]) / 2)
+
+    tmp.push(parseFloat(arr[1]) - parseFloat(arr[3]) / 2)
+    tmp.push(parseFloat(arr[2]) + parseFloat(arr[4]) / 2)
+
+    tmp.push(parseFloat(arr[1]) - parseFloat(arr[3]) / 2)
+    tmp.push(parseFloat(arr[2]) - parseFloat(arr[4]) / 2)
+
+    res.push(tmp.join(' '))
+  })
+  // console.log(res)
+  return res.join('\r\n')
+}