• 💪 Vue 3 Composition API
• 🔥 TypeScript 驱动开发
• 📊 强大的图表生成能力

快速开始

要使用本库进行开发，请通过以下命令安装：

npm install tunnelface@latest --registry=http://devwh.sinoccdc.com:8096/npm/

用法

全局引入

使用组件

<template>
  <div class="TestTunnelFace">
    <div class="svg-container" id="svg-container"></div>
  </div>
</template>

<script setup lang="ts">
import { ContourType, GetDefaultOptions, Grade, TunnelFace, type TunnelFaceOptions } from "tunnelface";
import { onMounted } from "vue";
const canvas = "svg-container";

onMounted(() => {
  const explosiveOptions = GetDefaultOptions(Grade.IIIb); //通过围岩级别获取默认参数
  options.explosiveOptions = explosiveOptions;
  const tunnelFace = new TunnelFace(canvas, options); //创建隧道面对象
  tunnelFace.draw();
});

const options: TunnelFaceOptions = {
  contourOptions: {
    topRadius: 780, // 拱顶半径
    topAngle: 180, // 拱顶圆心角
    contourType: ContourType.SingleCentredArchContour
  },
  HoleSlotAreaOptions: {
    height: 300, //掏槽区高度
    type: "wedge", //掏槽类型
    row: 3, //掏槽区排数
    levelArr: [
      {
        level: 1,
        angle: 70,
        levelDistance: 50
      },
      {
        level: 2,
        angle: 70,
        levelDistance: 50
      },
      {
        level: 3,
        angle: 70,
        levelDistance: 50
      }
    ],
    upDownSpace: 60, //上下排距
    angle: 67, //掏槽角？？？
    insideDistance: 15 //孔底两级距离
  },
  explosiveOptions: {} as any,
  drawConfigOptions: {
    drawContour: true, //是否绘制轮廓线
    drawHoleSlotArea: true, //是否绘制掏槽区边框
    drawMarkerLine: true, //是否绘制辅助标注线
    drawHoleLines: true, //是否绘制孔线
    drawHoles: true //是否绘制孔
  },
  globalConfigOptions: {
    debug: false //是否调试模式
  }
};
</script>

<style scoped>
.TestTunnelFace {
  width: 100%;
  height: 100vh;
  user-select: none;
}
.svg-container {
  width: 100%;
  height: 100%;
}
</style>