Vue 3中使用DXF文件查看器组件

在Web应用程序中展示和浏览DXF（Drawing Exchange Format）文件是许多工程和设计应用的常见需求。为了实现这一目标，我们可以使用Vue 3的Composition API和"dxf-viewer"库创建一个简单而强大的DXF文件查看器组件。

效果展示

1. 引入依赖

首先，我们需要引入Vue 3的Composition API和"dxf-viewer"库。在组件的脚本部分，我们使用了<script setup>语法，这是Vue 3中新的组件语法。

<script setup lang="ts">
import { onMounted, onUnmounted, reactive } from 'vue';
import { DxfViewer, type DxfViewerOptions } from "dxf-viewer";
</script>

2. 创建组件

我们使用Vue 3的reactive来创建响应式对象，其中包括一个用于存储"DxfViewer"实例的属性，以及用于配置"DxfViewer"的选项。

javascriptCopy code
<script setup lang="ts">
let dxfViewer = reactive(<DxfViewer>{});
const dxfViewerOptions: DxfViewerOptions = <DxfViewerOptions>{};
</script>

3. 挂载和加载

在组件的生命周期中，我们使用onMounted来执行初始化逻辑。在这里，我们获取了DOM中的canvas容器元素，设置了初始的画布大小，并加载了一个DXF文件。

javascriptCopy code
<script setup lang="ts">
onMounted(async () => {
  const canvasContainer = document.querySelector('.canvasContainer');
  if (canvasContainer instanceof HTMLElement) {
    // 获取初始窗口大小并设置为画布大小
    const initialWidth = window.innerWidth;
    const initialHeight = window.innerHeight;

    dxfViewerOptions.canvasWidth = initialWidth;
    dxfViewerOptions.canvasHeight = initialHeight;
    
    dxfViewer = new DxfViewer(canvasContainer, dxfViewerOptions);
    const filePathInProject = 'test.dxf';
    const fileBlob = new Blob([await fetch(filePathInProject).then(res => res.blob())]);
    const fileUrl = URL.createObjectURL(fileBlob);
    await dxfViewer.Load({url: fileUrl, fonts: null, progressCbk: null, workerFactory: null});

    window.addEventListener('resize', updateCanvasSize);
  } else {
    console.error('Failed to find .canvasContainer element.');
  }
});
</script>

4. 大小更新和销毁

在窗口大小变化时，我们使用window.addEventListener监听器来更新画布大小。同时，使用onUnmounted生命周期钩子来确保在组件销毁时移除监听器，以防止内存泄漏。

<template>
  <div class="canvasContainer"/>
</template>

<script setup lang="ts">
const updateCanvasSize = () => {
  dxfViewer.SetSize(window.innerWidth, window.innerHeight);
};

onUnmounted(() => {
  window.removeEventListener('resize', updateCanvasSize);
});
</script>

5.全部代码

<!--DxfViewer.vue-->
<template>
  <div class="canvasContainer"/>
</template>

<script setup lang="ts">
// 引入Vue Composition API的相关功能
import { onMounted, onUnmounted, reactive } from 'vue';
// 引入"dxf-viewer"库和相关类型
import { DxfViewer, type DxfViewerOptions } from "dxf-viewer";

// 使用reactive创建响应式对象
let dxfViewer = reactive(<DxfViewer>{});

// 创建DXF查看器选项对象,其中可以配置查看器选项
const dxfViewerOptions: DxfViewerOptions = <DxfViewerOptions>{};

// 在组件挂载时执行的逻辑
onMounted(async () => {
  // 获取canvas容器元素
  const canvasContainer = document.querySelector('.canvasContainer');
  if (canvasContainer instanceof HTMLElement) {
    // 获取初始窗口大小并设置为画布大小
    const initialWidth = window.innerWidth;
    const initialHeight = window.innerHeight;

    dxfViewerOptions.canvasWidth = initialWidth;
    dxfViewerOptions.canvasHeight = initialHeight;

    // 创建DXF查看器实例
    dxfViewer = new DxfViewer(canvasContainer, dxfViewerOptions);
    
    // 加载DXF文件
    const filePathInProject = 'test.dxf';
    const fileBlob = new Blob([await fetch(filePathInProject).then(res => res.blob())]);
    const fileUrl = URL.createObjectURL(fileBlob);
    await dxfViewer.Load({url: fileUrl, fonts: null, progressCbk: null, workerFactory: null});

    // 添加窗口大小变化监听器
    window.addEventListener('resize', updateCanvasSize);
  } else {
    console.error('Failed to find .canvasContainer element.');
  }
});

// 在组件销毁时移除监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateCanvasSize);
});

// 窗口大小变化时更新画布大小的方法
const updateCanvasSize = () => {
  dxfViewer.SetSize(window.innerWidth, window.innerHeight);
};
</script>