Question

填充

实心填充

我们可以通过 mxcad 实例对象提供的 drawPathToHatch() 方法直接绘制实心填充图形。

点击 drawPathToHatch() 查看详细属性和方法说明。

import { MxCpp, McCmColor} from "mxcad"

const mxcad = MxCpp.getCurrentMxCAD()
//绘制一个实心三角形填充.
//定义一个路径的开始点
mxcad.pathMoveTo(150, 3300);
//路径的一下个点
mxcad.pathLineTo(250, 3300);
//路径的一下个点
mxcad.pathLineTo(250, 3400);
//路径的一下个点
mxcad.pathLineTo(150, 3300);
//把路径拟合成一个样线
mxcad.drawColor = new McCmColor(255, 0, 0);
mxcad.drawPathToHatch(1);

图案填充

我们可以通过 mxcad 实例对象提供的 addPatternDefinition() 方法增加一个图案定义，并将该新定义的图案设置为 drawPatternDefinition 当前绘制的线型属性值，就能绘制图案填充图形。

点击 addPatternDefinition() 查看详细属性和方法说明。

import { MxCpp, McCmColor} from "mxcad"
//angle, x-origin,y-origin, delta-x,delta-y,dash-1,dash-2, …
// "MyHatchPattern1" = 图案名称
//45 = angle 是图案线角度.
//0 = x-origin 是第一个填充线经过的点位置X坐标
//0 = y-origin 是第一个填充线经过的点位置Y坐标
//0 = delta-x   是下一个填充线相对前一个线的X方向偏移
//0.125 = delta-y   是下一个填充线相对前一个线的Y方向偏移
const mxcad = MxCpp.getCurrentMxCAD()
mxcad.addPatternDefinition("MyHatchPattern1", "((45, 0,0, 0,0.125))");
mxcad.drawPatternDefinition = "MyHatchPattern1";
//定义一个路径的开始点
mxcad.pathMoveToEx(600, 3300, 0, 0, 0.3);
//路径的一下个点
mxcad.pathLineTo(700, 3300);
//路径的一下个点
mxcad.pathLineTo(700, 3400);
//路径的一下个点
mxcad.pathLineTo(600, 3300);
//把路径变成一个填充,80,是填充图案的缩放比例.
mxcad.drawPathToHatch(100);

选点填充

我们可以通过 MxCADUtilityClass 类结合交互绘图实现选点填充功能，该类提供了一系列与绘图相关的工具方法。其中提供的 builderHatchFromPoint() 方法就实现了通过一个点坐标填充对应位置实体的填充对象 McDbHatch ，若成功绘制填充对象则返回该填充对象，若未成功绘制则返回 null 。

此外，mxcad 中提供了设置填充对象 McDbHatch 的一系列方法和属性，你可以根据自身需求定义填充图形样式。

点击 MxCADUtilityClass()、McDbHatch() 查看详细属性和方法说明。

import { McGePoint3d, MxCADUiPrPoint, MxCADUtility, MxCpp } from "mxcad";

const getPoint = new MxCADUiPrPoint();
console.log("\n指定填充区域内部一点:");
getPoint.disableAllTrace(true);
getPoint.setDisableOsnap(true);
let pt = (await getPoint.go()) as McGePoint3d;
if (!pt) return;

let hatch = MxCADUtility.builderHatchFromPoint(pt);
if (!hatch) {
  console.log("没有找到闭合区域\n")
  return;
}
hatch.clearPatternDefinition();
hatch.addPatternDefinition(45, 1, 1, 1, 0.25, [45, 0.17677695, 0, 0, 0.25, 0.125, -0.0625])
hatch.setPattern(McDb.HatchPatternType.kCustomDefined, 'test')
hatch.trueColor = new McCmColor(0, 133, 122)
let mxcad = MxCpp.getCurrentMxCAD();
mxcad.drawEntity(hatch);

:::demo

import {  McObject, McDbPoint, McGePoint3d, McCmColor, MxCADUiPrPoint, MxCADUtility, McDb } 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(150, 3300);
            //路径的一下个点
            mxcad.pathLineTo(250, 3300);
            //路径的一下个点
            mxcad.pathLineTo(250, 3400);
            //路径的一下个点
            mxcad.pathLineTo(150, 3300);
            //把路径拟合成一个样线
            mxcad.drawColor = new McCmColor(255, 0, 0);
            mxcad.drawPathToHatch(1);

            // 绘制一个图形填充
            mxcad.addPatternDefinition("MyHatchPattern1", "((45, 0,0, 0,0.125))");
            mxcad.drawPatternDefinition = "MyHatchPattern1";
             //定义一个路径的开始点
            mxcad.pathMoveTo(250, 3300);
            //路径的一下个点
            mxcad.pathLineTo(350, 3300);
            //路径的一下个点
            mxcad.pathLineTo(350, 3400);
            //路径的一下个点
            mxcad.pathLineTo(250, 3300);
            mxcad.drawColor = new McCmColor(255, 255, 0);
            //把路径变成一个填充,80,是填充图案的缩放比例.
            mxcad.drawPathToHatch(100);

            // 绘制一个闭合图形
            mxcad.drawColor = new McCmColor(0, 255, 0);
            mxcad.drawCircle(500, 3350, 50);
            mxcad.zoomAll()
            mxcad.zoomScale(0.8)
      }
    })
    // 选点填充函数
     async function btn(){
        const getPoint = new MxCADUiPrPoint();
        console.log("\n指定填充区域内部一点:");
        getPoint.disableAllTrace(true);
        getPoint.setDisableOsnap(true);
        let pt = (await getPoint.go()) as McGePoint3d;
        if (!pt) return;

        let hatch = MxCADUtility.builderHatchFromPoint(pt);
        if (!hatch) {
          console.log("没有找到闭合区域\n")
          return;
        }
        hatch.clearPatternDefinition();
        hatch.addPatternDefinition(45, 1, 1, 1, 0.25, [45, 0.17677695, 0, 0, 0.25, 0.125, -0.0625])
        hatch.setPattern(McDb.HatchPatternType.kCustomDefined, 'test')
        hatch.trueColor = new McCmColor(0, 133, 122)
        mxcad.drawEntity(hatch);
    }
    // 绘制闭合图形
    async function draw_circle(){
        const getPoint = new MxCADUiPrPoint();
        console.log("\n指定圆心:");
        const center = await getPoint.go()
        if(!center) return
        mxcad.drawColor = new McCmColor(0, 255, 0);
        mxcad.drawCircle(center.x, center.y, 50);  
    }
    return (<div style="height: 500px; overflow: hidden;">
      <button style="height:30px;border:1px solid #ccc;padding:0px 5px;margin-bottom:10px"
      id="myBtn" onClick={()=>btn()}>选点填充</button>
      <button style="height:30px;border:1px solid #ccc;padding:0px 5px;margin:0px 10px 10px"
      id="myBtn" onClick={()=>draw_circle()}>绘圆</button>
      <div style="height: 400px;"><canvas id="myCanvas" style="height: 300px"></canvas></div>
    </div>)
}

:::