dxf异形显示商标拖拽

廖井涛

2025-07-25 6499ec45765ccbcf78c765445d0102aa4d918f98

 north-glass-erp/northglass-erp/src/views/mm/basicData/canvas.vue

@@ -1,7 +1,696 @@




<script setup>
import { Leafer, Polygon,Ellipse,Line,Path } from 'leafer-ui'
import {nextTick, onMounted, onUnmounted, onUpdated, reactive, ref, watch} from "vue"
import { saveAs } from 'file-saver';
import DXFWriter from 'dxf-writer';
import DxfParser from 'dxf-parser';
import {round} from "xe-utils";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

let XMargin=ref(30)
let YMargin=ref(30)
let points=ref([])
let data1=ref(0)
let data2=ref(0)
let data3=ref(0)
let data4=ref(0)
let data5=ref(0)
let data6=ref(0)
let data7=ref(0)
let data8=ref(0)

let datas1=ref(0)
let datas2=ref(0)
let datas3=ref(0)
let datas4=ref(0)
let datas5=ref(0)
let datas6=ref(0)
let datas7=ref(0)
let datas8=ref(0)
let big=0
let leafer;

onMounted(() => {
  const main =document.getElementById('mains')
  const width =document.getElementById('width')
  const height =document.getElementById('height')
  const iocn =document.getElementById('iocn')
  width.innerHTML=1500
  height.innerHTML=600
  if(1500/400>600/300){
    big=1500/400
  }else{
    big=600/300
  }
  let widthAgv=1500/big
  let heightAgv=600/big
  main.style.width=widthAgv+"px"
  main.style.height=heightAgv+"px"
  main.style.backgroundColor="white"
  iocn.style.marginLeft=XMargin.value/big+"px"
  iocn.style.marginTop=YMargin.value/big+"px"
  datas2.value=heightAgv
  datas8.value=heightAgv
  datas5.value=widthAgv
  datas7.value=widthAgv
  leafer=new Leafer({ view: 'canvas' })

  points.value=[0, heightAgv, 0, 0, widthAgv, 0, widthAgv,heightAgv]
  const polygon = new Polygon({
    points: points.value,
    fill: '#32cd79',
    origin: [0, 0],
    scale:0.5
  })
  leafer.add(polygon)

})
const getproject = () =>  {
  leafer=new Leafer({ view: 'canvas' })
  points.value=[datas1.value+(parseInt(data1.value)/big), datas2.value-(parseInt(data2.value)/big), datas3.value+(parseInt(data3.value)/big), datas4.value+(parseInt(data4.value)/big),
    datas5.value-(parseInt(data5.value)/big), datas6.value+(parseInt(data6.value)/big), datas7.value-(parseInt(data7.value)/big), datas8.value-(parseInt(data8.value)/big)]
  const polygon = new Polygon({
    points: points.value,
    fill: '#32cd79',
    origin: [0, 0]
  })
  leafer.add(polygon)

}

const exportToDXF = () => {
  const dxf = new DXFWriter();
  const polygonPoints = points.value.map((coord, index) => ({
    x: index % 2 === 0 ? coord : undefined,
    y: index % 2 !== 0 ? -coord : undefined
  })).filter(point => point.x !== undefined && point.y !== undefined);

  let arr=[]
  for (let i=0;i<points.value.length;i++){
    let a=[]
    if(i % 2 === 0){
      a.push(points.value[i]*big)
      a.push((points.value[i+1]*big))
      a.push(0)
      arr.push(a)
    }

  }
  let minX = Infinity, minY = Infinity;
  let maxX = -Infinity, maxY = -Infinity;
  arr.forEach(p => {
    minX = Math.min(Math.abs(p[0]),minX );
    minY = Math.min(Math.abs(p[1]),minY);
    maxX = Math.max(Math.abs(p[0]),maxX );
    maxY = Math.max(Math.abs(p[1]),maxY);
  });

  arr.forEach(p => {
    p[1]=maxY-minY-p[1]
  });


  dxf.drawPolyline(arr,{ closed: true, layer: '0' })

  const blob = new Blob([dxf.toDxfString()], { type: 'text/plain;charset=utf-8' });
  saveAs(blob, 'map.dxf');
}


function toBottomOrigin(y, canvasHeight) {
  return canvasHeight - y; // 将左上角Y坐标转换为左下角坐标系
}

function addPolygonAsLines(dxf, points, layer = '0') {
  for (let i = 0; i < points.length; i++) {
    const nextIdx = (i + 1) % points.length;
    dxf.drawPolygon(
        points[i].x, points[i].y,
        points[nextIdx].x, points[nextIdx].y
    );
  }
}

const uploadToServer = (data, fileName) => {
  request.post('/order/upload-dxf', {
    fileName: fileName,
    fileData: data
  }, {
    headers: {'Content-Type': 'application/json'}
  });
};

const file = ref(null);
const triggerFileSelect = () => {
  request.post("/order/selectUploadDxf").then((res) => {
    if (res.code === "200" ) {
      console.log(res.data)
      const b64Data = res.data.data.file_data;
      const byteCharacters = atob(b64Data);
      const parser = new DxfParser();
      const dxfData = parser.parseSync(byteCharacters)
      console.log(dxfData)
    }
  })
};



const fileToBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
};

const handleFileUpload =  async (event) => {
  const main = document.getElementById('mains')
  const width = document.getElementById('width')
  const height = document.getElementById('height')
  leafer.removeAll()
  leafer = new Leafer({view: 'canvas'});
  const file = event.target.files[0];
  try {
    const base64 = await fileToBase64(file);
    const pureBase64 = base64.replace(/^data:.+;base64,/, "");
    uploadToServer(pureBase64, file.name)
  } catch (error) {
    console.error('转换失败:', error);
  }
  if (file) {
    const reader = new FileReader();
    reader.onload = async (e) => {
      const text = e.target.result;
      try {
        const parser = new DxfParser();
        const dxfData = parser.parseSync(text);

        let minX = Infinity, minY = Infinity;
        let maxX = -Infinity, maxY = -Infinity;
        dxfData.entities.forEach(entity => {
          if (entity.type === 'LINE' || entity.type === 'LWPOLYLINE') {
            entity.vertices.forEach(vertices => {
              minX = Math.min(Math.abs(vertices.x), minX);
              minY = Math.min(Math.abs(vertices.y), minY);
              maxX = Math.max(Math.abs(vertices.x), maxX);
              maxY = Math.max(Math.abs(vertices.y), maxY);
            })
          }
          if (entity.type === 'ARC') {
            const center = {x: entity.center.x, y: entity.center.y};
            const radius = entity.radius;
            const startAngle = entity.startAngle * (180 / Math.PI);
            const endAngle = entity.endAngle * (180 / Math.PI);

            const points = [];
            const steps = 32;
            for (let i = 0; i <= steps; i++) {
              const angle = startAngle + (endAngle - startAngle) * (i / steps);
              const x = center.x + radius * Math.cos(angle * Math.PI / 180);
              const y = center.y + radius * Math.sin(angle * Math.PI / 180);
              points.push({x, y});
            }


            points.forEach(p => {
              minX = Math.min(minX, p.x);
              minY = Math.min(minY, p.y);
              maxX = Math.max(maxX, p.x);
              maxY = Math.max(maxY, p.y);
            });
          }
        });
        if ((maxX - minX) / 400 > (maxY - minY) / 300) {
          big = (maxX - minX) / 400
        } else {
          big = (maxY - minY) / 300
        }

        Object.values(dxfData.entities).forEach(entity => {
          /*const bounds = drawEntity(entity);

          if (bounds) {
            minX = Math.min(minX, bounds.minX);
            minY = Math.min(minY, bounds.minY);
            maxX = Math.max(maxX, bounds.maxX);
            maxY = Math.max(maxY, bounds.maxY);
          }*/
          switch (entity.type) {

            case 'LINE':
              /*main.style.width=(maxX-minX)+"px"
              main.style.height=(maxY-minY)+"px"
              width.innerHTML=round(maxX-minX,2)
              height.innerHTML=round(maxY-minY,2)
              const line = new Line({
                points: [(Math.abs(entity.vertices[0].x)-minX)/big, toBottomOrigin((Math.abs(entity.vertices[0].y)-minY)/big,(maxY-minY)/big),
                  (Math.abs(entity.vertices[1].x)-minX)/big, toBottomOrigin((Math.abs(entity.vertices[1].y)-minY)/big,(maxY-minY)/big)],
                stroke: '#f00',
                strokeWidth: 2
              })*/
              main.style.width = (maxX - minX) / big + "px"
              main.style.height = (maxY - minY) / big + "px"
              width.innerHTML = round(maxX - minX, 2)
              height.innerHTML = round(maxY - minY, 2)
              const line = new Line({
                points: [(Math.abs(entity.vertices[0].x) - minX) / big, ((maxY - minY) - (Math.abs(entity.vertices[0].y) - minY)) / big,
                  (Math.abs(entity.vertices[1].x) - minX) / big, ((maxY - minY) - (Math.abs(entity.vertices[1].y) - minY)) / big],
                stroke: '#f00',
                strokeWidth: 1
              })
              setTimeout(() => {
                leafer.add(line);
              }, 30);
              break;
            case 'LWPOLYLINE':

              main.style.width = (maxX - minX) / big + "px"
              main.style.height = (maxY - minY) / big + "px"
              main.style.backgroundColor = "white"
              width.innerHTML = round(maxX - minX, 2)
              height.innerHTML = round(maxY - minY, 2)
              let point = entity.vertices.map(v => [
                (Math.abs(v.x) - minX) / big,
                toBottomOrigin((Math.abs(v.y) - minY) / big, (maxY - minY) / big),
              ]).flat()
              const polygon = new Polygon({
                points: point,
                fill: '#32cd79',
              })
              setTimeout(() => {
                leafer.add(polygon);
              }, 30);

              break;
            case 'CIRCLE':
              big = (entity.radius * 2) / 400
              main.style.width = entity.radius * 2 / big + "px"
              main.style.height = entity.radius * 2 / big + "px"
              width.innerHTML = round(entity.radius * 2, 2)
              height.innerHTML = round(entity.radius * 2, 2)
              const ellipse = new Ellipse({
                width: entity.radius * 2 / big,
                height: entity.radius * 2 / big,
                fill: "#32cd79"
              })
              setTimeout(() => {
                leafer.add(ellipse);
              }, 30);

              break;
            case 'ELLIPSE':
              console.log(entity)

              const {majorAxisEndPoint, axisRatio} = entity;

              const dx = majorAxisEndPoint.x;
              const dy = majorAxisEndPoint.y;
              const a = Math.sqrt(dx ** 2 + dy ** 2);
              const c = a * axisRatio;
              const θ = Math.atan2(dy, dx);
              const l = axisRatio * (180 / Math.PI);

              if ((a * 2) / 400 > (c * 2) / 300) {
                big = (a * 2) / 400
              } else {
                big = (c * 2) / 300
              }

              main.style.width = a * 2 / big + "px"
              main.style.height = c * 2 / big + "px"
              width.innerHTML = round(a * 2, 2)
              height.innerHTML = round(c * 2, 2)
              const ellipse2 = new Ellipse({
                width: a * 2 / big,
                height: c * 2 / big,
                fill: "#32cd79",
              })

              setTimeout(() => {
                leafer.add(ellipse2);
              }, 30);

              break;
            case 'ARC':
              const center = {x: entity.center.x, y: entity.center.y};
              const radius = entity.radius;
              const startAngle = entity.startAngle * (180 / Math.PI);
              const endAngle = entity.endAngle * (180 / Math.PI);

              if ((maxX - minX) / 400 > (maxY - minY) / 300) {
                big = (maxX - minX) / 400
              } else {
                big = (maxY - minY) / 300
              }


              // 计算圆弧的起点和终点
              const startX = (center.x + radius * Math.cos(entity.startAngle) - minX);
              const startY = (maxY - minY) - ((center.y + radius * Math.sin(entity.startAngle)) - minY);
              const endX = (center.x + radius * Math.cos(entity.endAngle) - minX);
              const endY = (maxY - minY) - ((center.y + radius * Math.sin(entity.endAngle)) - minY);

              // 创建圆弧路径
              const path = new Path({
                path: `M ${startX / big} ${startY / big} A ${radius / big} ${radius / big} 0 ${endAngle - startAngle > 180 ? 1 : 0} 0 ${endX / big} ${endY / big}`,
                stroke: '#f00',
                strokeWidth: 1,
              });


              setTimeout(() => {
                leafer.add(path);
              }, 30);


              break;

          }
        })
        // 自动缩放视图
        /*if (minX !== Infinity) {
          const width = maxX - minX;
          const height = maxY - minY;
          const centerX = (minX + maxX) / 2;
          const centerY = (minY + maxY) / 2;

          main.style.width=width/big+"px"
          main.style.height=height/big+"px"

        }*/

      } catch (error) {
        console.error('解析DXF文件时出错:', error);
      }
    };
    reader.readAsText(file);
  }
};

function drawEntity(entity) {
  switch (entity.type) {
    case 'LWPOLYLINE':
      return drawPolyline(entity);
    case 'POLYLINE':
      return drawPolyline(entity);
    case 'LINE':
      return drawLine(entity);
    case 'CIRCLE':
      return drawCircle(entity);
    case 'ARC':
      return drawArc(entity);
    case 'SPLINE':
      return drawSpline(entity);
    default:
      console.warn('Unsupported entity type:', entity.type);
      return null;
  }
}

let minX = Infinity, minY = Infinity;
let maxX = -Infinity, maxY = -Infinity;
// 绘制多段线
function drawPolyline(polyline) {
  const points = polyline.vertices.map(v => {
    return { x: Math.abs(v.x), y: Math.abs(v.y) }; // 翻转Y坐标
  });

  // 处理闭合多边形
  if (polyline.flags && polyline.flags.includes('closed') && points.length > 0) {
    points.push({...points[0]});
  }

  // 计算边界

  points.forEach(p => {
    minX = Math.min(p.x,minX);
    minY = Math.min(p.y,minY);
    maxX = Math.max(p.x,maxX);
    maxY = Math.max(p.y,maxY);
  });

  let agvX=maxX-minX
  let agvY=maxY-minY


  // 创建Leafer多边形
  const polygon = new Polygon({
    points: points.flatMap(p => [(p.x-minX)/big,(agvY-(p.y-minY))/big]),
    fill: 'rgba(100, 150, 255, 0.3)',
    stroke: '#32cd79',
    strokeWidth: 2,
    cornerRadius: 0,
    draggable: true
  });

  // 保存原始DXF数据
  polygon.dxfData = {
    type: polyline.type,
    layer: polyline.layer || '0',
    color: polyline.color || 7
  };
  setTimeout(() => {
    leafer.add(polygon);
  }, 30);


  return { minX, minY, maxX, maxY };
}

// 绘制直线
function drawLine(line) {
  const points = line.vertices.map(v => {
    return { x: Math.abs(v.x), y: Math.abs(v.y) };
  });

  points.forEach(p => {
    minX = Math.min(p.x,minX);
    minY = Math.min(p.y,minY);
    maxX = Math.max(p.x,maxX);
    maxY = Math.max(p.y,maxY);
  });

  let agvX=maxX-minX
  let agvY=maxY-minY

  const lineObj = new Line({
    points:[
      (points[0].x-minX)/big,(agvY-(points[0].y-minY))/big,
      (points[1].x-minX)/big,(agvY-(points[1].y-minY))/big
    ],
    stroke: '#32cd79',
    strokeWidth: 2
  });

  setTimeout(() => {
    leafer.add(lineObj);
  }, 30);

  return { minX, minY, maxX, maxY };
}

// 绘制圆
function drawCircle(circle) {
  const center = { x: circle.center.x, y: circle.center.y };
  const radius = circle.radius;

   minX = center.x - radius;
   minY = center.y - radius;
   maxX = center.x + radius;
   maxY = center.y + radius;

  const circleObj = new Leafer.Ellipse({
    x: center.x,
    y: center.y,
    radiusX: radius,
    radiusY: radius,
    fill: 'rgba(100, 150, 255, 0.3)',
    stroke: '#32cd79',
    strokeWidth: 2
  });

  circleObj.dxfData = {
    type: 'CIRCLE',
    layer: circle.layer || '0',
    color: circle.color || 7
  };

  leafer.add(circleObj);

  return { minX, minY, maxX, maxY };
}

// 绘制圆弧
function drawArc(arc) {
  const center = { x: arc.center.x, y: arc.center.y };
  const radius = arc.radius;
  const startAngle = arc.startAngle*(180/Math.PI);
  const endAngle = arc.endAngle*(180/Math.PI);

  const points = [];
  const steps = 32;
  for (let i = 0; i <= steps; i++) {
    const angle = startAngle + (endAngle - startAngle) * (i / steps);
    const x = center.x + radius * Math.cos(angle * Math.PI / 180);
    const y = center.y + radius * Math.sin(angle * Math.PI / 180);
    points.push({ x, y });
  }


  points.forEach(p => {
    minX = Math.min(minX, p.x);
    minY = Math.min(minY, p.y);
    maxX = Math.max(maxX, p.x);
    maxY = Math.max(maxY, p.y);
  });
  let agvX=maxX-minX
  let agvY=maxY-minY

  // 计算圆弧的起点和终点
  const startX = (center.x-minX)/big + radius/big * Math.cos(arc.startAngle);
  const startY = (agvY-(center.y-minY))/big + radius/big * Math.sin(arc.startAngle);
  const endX = (center.x-minX)/big + radius/big * Math.cos(arc.endAngle);
  const endY = (agvY-(center.y-minY))/big + radius/big * Math.sin(arc.endAngle);

  // 创建圆弧路径
  const path = new Path({
    path: `M ${endX} ${endY} A ${radius/big} ${radius/big} 0 ${endAngle - startAngle > 180 ? 1 : 0} 0 ${startX} ${startY}`,
    stroke: '#32cd79',
    strokeWidth: 2,
  });


  setTimeout(() => {
    leafer.add(path);
  }, 30);


  return { minX, minY, maxX, maxY };
}

// 绘制样条曲线（简化实现）
function drawSpline(spline) {
  if (!spline.controlPoints || spline.controlPoints.length < 2) {
    console.warn('Invalid SPLINE entity');
    return null;
  }

  const points = spline.controlPoints.map(p => {
    return { x: p.x, y: -p.y };
  });

  // 创建样条曲线路径（使用三次贝塞尔曲线近似）
  let pathData = `M ${points[0].x} ${points[0].y}`;

  if (points.length === 2) {
    pathData += ` L ${points[1].x} ${points[1].y}`;
  } else {
    for (let i = 1; i < points.length; i++) {
      const p0 = points[i-1];
      const p1 = points[i];
      const cp1x = p0.x + (p1.x - p0.x) / 3;
      const cp1y = p0.y + (p1.y - p0.y) / 3;
      const cp2x = p1.x - (p1.x - p0.x) / 3;
      const cp2y = p1.y - (p1.y - p0.y) / 3;

      pathData += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p1.x} ${p1.y}`;
    }
  }

  const path = new Leafer.Path({
    path: pathData,
    stroke: '#32cd79',
    strokeWidth: 2,
    fill: 'none'
  });

  path.dxfData = {
    type: 'SPLINE',
    layer: spline.layer || '0',
    color: spline.color || 7
  };

  leafer.add(path);

  // 计算边界
  points.forEach(p => {
    minX = Math.min(minX, p.x);
    minY = Math.min(minY, p.y);
    maxX = Math.max(maxX, p.x);
    maxY = Math.max(maxY, p.y);
  });

  return { minX, minY, maxX, maxY };
}

const handleInputX = (newValue) => {
  const iocn =document.getElementById('iocn')
  if(newValue+20*big<=1500){
    iocn.style.marginLeft=newValue/big+"px"
  }

};
const handleInputY = (newValue) => {
  const iocn =document.getElementById('iocn')
  iocn.style.marginTop=newValue/big+"px"
};



</script>

<template>
  <div>
    <input type="file" @change="onFileSelected" accept=".dxf" />
    <div ref="canvasContainer"></div>
  <div style="width: 460px;height: 320px;justify-content: center;display: flex;">
    <div>
      <div id="width" style="height: 20px;"></div>
      <div id="height" style="width: 60px;margin-left: -40px;"></div>
      <div id="mains" style="margin-top: -20px" >
        <div id="iocn" style="width: 20px;height: 20px;position: absolute;"></div>
        <canvas  id="canvas" ></canvas>
      </div>
    </div>


  </div>

  <el-input class="contactNumber" @blur="getproject" type="text" v-model="data1" />
  <el-input class="contactNumber" @blur="getproject" type="text" v-model="data2"  />
  <el-input class="contactNumber" @blur="getproject" type="text" v-model="data3"  />
  <el-input class="contactNumber" @blur="getproject" type="text" v-model="data4"  /><br>
  <el-input class="contactNumber" @blur="getproject" type="text" v-model="data5"  />
  <el-input class="contactNumber" @blur="getproject" type="text" v-model="data6"  />
  <el-input class="contactNumber" @blur="getproject" type="text" v-model="data7"  />
  <el-input class="contactNumber" @blur="getproject" type="text" v-model="data8"  /><br>
  <el-button type="primary" @click="exportToDXF">导出DXF</el-button>
  <div>
    <input type="file" @change="handleFileUpload" accept=".dxf" />
  </div>
  <el-input-number @input="handleInputX"   v-model="XMargin"/>
  <el-input-number @input="handleInputY"   v-model="YMargin"/>

  <button @click="triggerFileSelect">选择文件</button>
</template>

<style>
.contactNumber{
  width: 60px;
  height:20px;
  border: none;
  box-shadow: none;
  font-size: 15px;
}

#mains {
  position: relative;
}
input[type="file"] {
  margin-top: 10px;
}
</style>