HarmonyOS 鸿蒙Next中网页CAD SDK集成后怎么实现参数化绘图（在线编辑CAD）

HarmonyOS 鸿蒙Next中网页CAD SDK集成后怎么实现参数化绘图（在线编辑CAD） 前言

MxCAD 的WEB CAD SDK提供了参数化绘图的功能, 我们可以通过查看继承自McDbEntity的类的所有实例，它们都可以进行参数化的绘图。

首先我们应该在页面上显示一张图纸, 请根据mxcad入门文档的说明或者通过查看 github | gitee存储的初始化各种示例项目查看代码来实现显示图纸的页面。

在线CAD功能测试：https://demo.mxdraw3d.com:3000/mxcad/

点的绘制

参数化绘制一个CAD中的点:

import { MxCpp, McDbPoint, McCmColor } from "mxcad"

const mxcad = MxCpp.App.getCurrentMxCAD()

const point = new McDbPoint()

const color = new McCmColor()

color.setRGB(0, 255, 255)

point.trueColor = color

point.setPosition(200, 200)

mxcad.drawEntity(point)

cke_218.png

多行文字

绘制多行文字代码如下：

import { MxCpp, McGePoint3d, McCmColor, McDb, McDbMText } from "mxcad"

const mxcad = MxCpp.App.getCurrentMxCAD()

const mText = new McDbMText()

const textId = mxcad.drawEntity(mText)

const text = textId.getMcDbEntity() as McDbMText

text.attachment = McDb.AttachmentPoint.kTopLeft

text.contents = "内容 \\P 内容"

text.location = new McGePoint3d(10, 20)

text.trueColor = new McCmColor(255, 0, 255)

text.textHeight = 10

mxcad.updateDisplay()

cke_219.png

单行文字

绘制单行文本代码如下：

import { MxCpp, McGePoint3d, McCmColor, McDb, McDbText } from "mxcad"

const mxcad = MxCpp.App.getCurrentMxCAD()

const text = new McDbText()

text.widthFactor = 1

text.horizontalMode = McDb.TextHorzMode.kTextCenter

text.verticalMode = McDb.TextVertMode.kTextBottom

text.textString = "内容"

text.position = new McGePoint3d(-10, -20)

text.trueColor = new McCmColor(255, 0, 255)

text.height = 10

mxcad.drawEntity(text)

mxcad.updateDisplay()

cke_220.png

对齐标注

绘制对齐标注尺寸代码如下：

import { MxCpp, McGePoint3d, McCmColor, McDb, McDbAlignedDimension } from "mxcad"

const mxcad = MxCpp.App.getCurrentMxCAD()

const mDimension = new McDbAlignedDimension()

const dimensionId = mxcad.drawEntity(mDimension)

const dimension = dimensionId.getMcDbEntity() as McDbAlignedDimension

dimension.xLine1Point = new McGePoint3d(0, 255)

dimension.xLine2Point = new McGePoint3d(30, 60)

dimension.dimLinePoint = new McGePoint3d(88, 88)

dimension.textAttachment = McDb.AttachmentPoint.kTopLeft

dimension.trueColor = new McCmColor(200, 255, 0)

dimension.oblique = 0

mxcad.updateDisplay()

cke_221.png

旋转标注

绘制旋转标注尺寸代码如下：

import { MxCpp, McGePoint3d, McCmColor, McDb, McDbRotatedDimension } from "mxcad"

const mxcad = MxCpp.App.getCurrentMxCAD()

const mDimension = new McDbRotatedDimension()

const dimensionId = mxcad.drawEntity(mDimension)

const dimension = dimensionId.getMcDbEntity() as McDbRotatedDimension

dimension.xLine1Point = new McGePoint3d(100, -137)

dimension.xLine2Point = new McGePoint3d(161,30)

dimension.dimLinePoint = new McGePoint3d(80, -60)

dimension.textAttachment = McDb.AttachmentPoint.kTopLeft

dimension.textRotation = 0.23

dimension.trueColor = new McCmColor(200, 255, 0)

dimension.oblique = 0

dimension.rotation = 0

mxcad.updateDisplay()

cke_222.png

绘制直线

绘制直线代码如下：

import { MxCpp, McCmColor, McDbLine } from "mxcad"

const mxcad = MxCpp.App.getCurrentMxCAD()

const line = new McDbLine(0, 0, 0, -80, -80, 0)

line.trueColor = new McCmColor(255, 0, 0)

mxcad.drawEntity(line)

cke_223.png

绘制圆

绘制圆代码如下：

import { MxCpp, McCmColor, McDbCircle } from "mxcad"

const mxcad = MxCpp.App.getCurrentMxCAD()

const circle = new McDbCircle(-100, 300, 0, 20)

circle.trueColor = new McCmColor(255, 0, 0)

mxcad.drawEntity(circle)

cke_224.png

绘制多义线

绘制多义线代码如下：

import { MxCpp, McGePoint3d, McDbPolyline } from "mxcad"

const mxcad = MxCpp.App.getCurrentMxCAD()

const polyline = new McDbPolyline()

polyline.isClosed = false

polyline.constantWidth = 10

polyline.addVertexAt(new McGePoint3d(100, 100))

polyline.addVertexAt(new McGePoint3d(200, 100), 0.2, 1, 5, 1)

polyline.addVertexAt(new McGePoint3d(100, 200), 0.2, 5, 1, 2)

mxcad.drawEntity(polyline)

cke_225.png

绘制圆弧

绘制圆弧代码如下:

import { MxCpp, McGePoint3d, McDbArc, McCmColor } from "mxcad"

const mxcad = MxCpp.App.getCurrentMxCAD()

const arc = new McDbArc()

arc.center = new McGePoint3d(-100, -100),

arc.radius = 20

arc.startAngle = Math.PI / 2

arc.endAngle = Math.PI * 3 / 2

arc.trueColor = new McCmColor(255, 233, 0)

mxcad.drawEntity(arc)

cke_226.png

绘制椭圆

绘制椭圆代码如下:

import { MxCpp, McGePoint3d, McDbEllipse, McCmColor, McGeVector3d } from "mxcad"

const mxcad = MxCpp.App.getCurrentMxCAD()

const ellipse = new McDbEllipse()

ellipse.center = new McGePoint3d(-200, -200),

ellipse.majorAxis = new McGeVector3d(0, 300, 0)

ellipse.minorAxis = new McGeVector3d(33, 0, 0)

ellipse.radiusRatio = 0.5

ellipse.startAngle = Math.PI / 2

ellipse.endAngle = Math.PI * 3 / 2

ellipse.trueColor = new McCmColor(255, 233, 0)

mxcad.drawEntity(ellipse)

cke_227.png

交互绘制

如果上述位置属性是用户通过点击或者输入框输入，mxcad就提供了这样一套用于获取用户输入并在绘制中得到输入的机制，最频繁的应该是鼠标点击输入。

1、通过鼠标点击获取CAD图纸中的坐标位置，代码如下：

import { MxCADUiPrPoint } from "mxcad"

const getPoint = new MxCADUiPrPoint()

const point = await getPoint.go()

console.log(point)

上述代码打印的就是一个坐标点了, 其坐标点是用户通过鼠标点击获取到的对应的图纸坐标位置。

2、通过输入框输入值, 来确定除了坐标以外的其他参数，代码如下：

const input = document.createElement("input")

input.addEventListener("keydown", (e: KeyboardEvent) => {

// 设置传输命令行消息数据

MxFun.setCommandLineInputData((e.target as HTMLInputElement).value, e.keyCode);

})

document.body.appendChild(input)

如上代码所示, 我们传入用户输入的内容和对应按键的keyCode值

const getInt = new MxCADUiPrInt()

const getKey = new MxCADUiPrKeyWord

const getStr = new MxCADUiPrString()

getInt.setMessage("提示用户输入数字:")

const intVal = await getInt.go()

console.log(intVal)

getKey.setMessage("提示用户关键词 A、 B、 C:")

getKey.setKeyWords("A B C")

const keyVal = await getKey.go()

console.log(keyVal)

getStr.setMessage("提示用户输入字符串:")

const strVal = await getStr.go()

console.log(strVal)

上述代码会在用户输入对应类型的数据后按下回车键(Enter或者Esc)才会往下执行, 通过setMessage设置提示，最终得到用户输入的数据, 通过这些数据进行参数化绘图。

最后这些设置的用户提示通过下面代码获得:

import { MxFun } from "mxdraw"

MxFun.listenForCommandLineInput(({ msCmdTip, msCmdDisplay, msCmdText }) => {

console.log(msCmdTip, msCmdDisplay, msCmdText)

});

如果你无法理解上述某个函数的意思，可以在mxdraw API文档或者mxcad API文档中查看对应的APi说明。

参数化绘制文字的完整流程

下面简单实现一个的参数化绘制文字的流程:

import { MxFun } from "mxdraw"

import { MxCADUiPrInt, MxCADUiPrKeyWord, MxCADUiPrString, MxCADUiPrPoint, McDbText, MxCpp } from "mxcad"

MxFun.addCommand("Mx_draw_Text", async () => {

const getInt = new MxCADUiPrInt()

const getKey = new MxCADUiPrKeyWord()

const getStr = new MxCADUiPrString()

const getPoint = new MxCADUiPrPoint()

const text = new McDbText()

getPoint.setMessage("请点击确定文字位置")

const position = await getPoint.go()

if(!position) return

text.position = position

getInt.setMessage("请输入文字高度")

const height = await getInt.go()

if(!height) return

text.height = height

getKey.setMessage("选择水平对齐方式 快捷键 L: 左对齐 C: 居中对齐 R: 右对齐 A: 水平对齐 M: 垂直中间对齐 F: 自适应")

getKey.setKeyWords("L C R A M F")

await getKey.go()

if(getKey.isKeyWordPicked("L")) text.horizontalMode = McDb.TextHorzMode.kTextLeft

if(getKey.isKeyWordPicked("C")) text.horizontalMode = McDb.TextHorzMode.kTextCenter

if(getKey.isKeyWordPicked("R")) text.horizontalMode = McDb.TextHorzMode.kTextRight

if(getKey.isKeyWordPicked("A")) text.horizontalMode = McDb.TextHorzMode.kTextAlign

if(getKey.isKeyWordPicked("M")) text.horizontalMode = McDb.TextHorzMode.kTextMid

if(getKey.isKeyWordPicked("F")) text.horizontalMode = McDb.TextHorzMode.kTextFit

getStr.setMessage("请输入文字内容")

const str = await getStr.go()

if(!str) return

text.textString = str

const mxcad = MxCpp.App.getCurrentMxCAD()

mxcad.drawEntity(text)

})
``

更多关于HarmonyOS 鸿蒙Next中网页CAD SDK集成后怎么实现参数化绘图（在线编辑CAD）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中集成网页CAD SDK实现参数化绘图（在线编辑CAD）的步骤如下：

  1. 集成CAD SDK：首先，将网页CAD SDK集成到鸿蒙Next项目中。确保SDK支持鸿蒙系统，并按照SDK文档进行配置和初始化。

  2. 创建绘图界面：使用ArkUI框架创建绘图界面，确保界面能够加载和显示CAD图纸。

  3. 参数化绘图：通过SDK提供的API实现参数化绘图。可以使用SDK的绘图工具和参数化功能，动态生成和修改CAD图纸。

  4. 在线编辑功能：实现用户交互功能，允许用户在线编辑CAD图纸。通过SDK的编辑工具，用户可以进行绘制、修改和删除操作。

  5. 保存与同步：实现图纸的保存和同步功能。使用SDK提供的保存接口将修改后的图纸保存到服务器或本地，并确保多用户之间的同步。

  6. 性能优化：优化绘图和编辑性能，确保在鸿蒙系统上的流畅运行。可以使用SDK的性能优化工具，减少内存占用和提高响应速度。

  7. 测试与调试：进行全面的测试和调试，确保参数化绘图和在线编辑功能在鸿蒙Next系统上的稳定性和兼容性。

通过以上步骤，可以在HarmonyOS鸿蒙Next中实现网页CAD SDK的参数化绘图和在线编辑功能。

更多关于HarmonyOS 鸿蒙Next中网页CAD SDK集成后怎么实现参数化绘图（在线编辑CAD）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中集成网页CAD SDK后，实现参数化绘图（在线编辑CAD）的步骤如下：

  1. 初始化SDK：在鸿蒙应用中引入并初始化网页CAD SDK，确保SDK与鸿蒙框架兼容。

  2. 加载CAD文件：使用SDK提供的API加载CAD文件到网页视图中，支持常见格式如DWG、DXF等。

  3. 参数化绘图：通过SDK的绘图API，实现参数化绘图功能。用户可以通过界面输入参数（如尺寸、角度等），动态生成或修改CAD图形。

  4. 实时编辑：利用SDK的编辑功能，允许用户在线实时编辑CAD图形，支持缩放、平移、旋转等操作。

  5. 保存与导出：编辑完成后，使用SDK的保存功能将修改后的CAD文件保存到本地或云端，支持导出为多种格式。

  6. 集成鸿蒙特性：结合鸿蒙的分布式能力，实现多设备协同编辑，提升用户体验。

通过以上步骤，可以在鸿蒙Next中实现高效的参数化绘图和在线编辑CAD功能。

回到顶部