Question

路径

我们可以通过 mxcad 的实例对象中提供的路径绘制方法直接绘制路径，这些方法通常以path开头：

1. 调用 pathLineToEx() 方法设置从当前位置画一条直线到指定位置，同时指定起始宽度、终止宽度和凸度

2. 调用 pathLineTo() 方法从当前位置画一条直线到指定位置

3. 调用 pathMoveToEx() 方法移动路径到指定位置，同时指定起始宽度、终止宽度和凸度

4. 调用 pathMakeExclude() 方法把当前路径做上排除标记，主要用于填充的绘制，把这个路径组成的闭合区域在填充中挖去

5. 调用 pathMakeClosed() 方法闭合路径

此外，还可调用 drawPathToPolyline() 方法将路径转换为折线，调用 drawPathToSpline() 方法将路径转换为样线条，调用 drawPathToHatch() 方法将路径转换为填充图形。

点击 path路径 、drawPath绘制路径 查看详细属性和方法说明。

import { MxCpp } from "mxcad"

const mxcad = MxCpp.getCurrentMxCAD();
//用路径 绘制矩形框
//定义一个路径的开始点
mxcad.pathMoveTo(0, 300);
//路径的一下个点
mxcad.pathLineTo(100, 300);
//路径的一下个点
mxcad.pathLineTo(100, 400);
//路径的一下个点
mxcad.pathLineTo(0, 400);
//把路径设置成闭合
mxcad.pathMakeClosed();
//生成一个矩形框的多义线
mxcad.drawPathToPolyline();

// 或者也可以选择将路径生成一个填充 这里的参数是图案缩放比例
mxcad.drawPathToHatch(1);

// 还可以将路径转换成样条曲线
mxcad.drawPathToSpline()

:::demo

import {  McObject, McDbText, McDbMText, McDb, McGePoint3d, McCmColor } from "mxcad"

export default () => {
    const mxcad = new McObject()
    mxcad.create({
      canvas: "#myCanvas",
      locateFile: (fileName: string)=> {
            // CDN 加载必须使用wasm/2d-st中的资源、因为github的限制无法使用wasm/2d 资源
            // 需要使用wasm/2d需要遵循浏览器同源策略或使用其他手段规避浏览器同源策略
            return "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName
      },
      // 加载字体的目录位置
      fontspath: self.location.origin + "/mxcad_docs/fonts",
      // 加载转换后的图纸文件
      fileUrl: self.location.origin + "/mxcad_docs/test.mxweb",
      onOpenFileComplete: ()=>{
            //用路径 绘制矩形框
            //定义一个路径的开始点
            mxcad.pathMoveTo(0, 300);
            //路径的一下个点
            mxcad.pathLineTo(100, 300);
            //路径的一下个点
            mxcad.pathLineTo(100, 400);
            //路径的一下个点
            mxcad.pathLineTo(0, 400);
            //把路径设置成闭合
            mxcad.pathMakeClosed();
            //生成一个矩形框的多义线
            mxcad.drawPathToPolyline();

            //定义一个路径的开始点
            mxcad.pathMoveTo(170, 320)
            mxcad.pathLineTo(200, 320)
            mxcad.pathLineTo(200, 340)
            mxcad.pathLineTo(170, 340)
            // 把上面定义的路径定义填充排除区域.
            mxcad.pathMakeExclude(true)
            mxcad.pathMoveTo(150, 300)
            mxcad.pathLineTo(250, 300)
            mxcad.pathLineTo(250, 400)
            mxcad.pathLineTo(150, 400)
            mxcad.pathMakeClosed();
            // 将路径生成一个填充 这里的参数是图案缩放比例
            mxcad.drawPathToHatch(1);

            mxcad.zoomAll();
            mxcad.zoomScale(0.8)
      }
    })
    return (<div style="height: 500px; overflow: hidden;"><canvas id="myCanvas" ></canvas>
    </div>)
}

:::