找回密码
 立即注册

QQ登录

只需一步,快速开始

微信扫码登录

搜索
查看: 761|回复: 3

[图文教程] 网页CAD SDK 集成后怎么实现参数化绘图(在线编辑CAD)

[复制链接]

299

主题

20

回帖

3984

积分

中尉

积分
3984

活跃会员

发表于 2023-11-10 16:33:14 | 显示全部楼层 |阅读模式
前言MxCAD 的WEB CAD SDK提供了参数化绘图的功能, 我们可以通过查看继承自McDbEntity的类的所有实例它们都可以进行参数化的绘图
首先我们应该在页面上显示一张图纸, 请根据mxcad入门文档的说明或者通过查看github| gitee存储的初始化各种示例项目查看代码来实现显示图纸的页面。
在线CAD功能测试:https://demo.mxdraw3d.com:3000/mxcad/
点的绘制参数化绘制一个CAD中的点:
  1. import { MxCpp, McDbPoint, McCmColor } from "mxcad"
  2. const mxcad = MxCpp.App.getCurrentMxCAD()
  3. const point = new McDbPoint()
  4. const color = new McCmColor()
  5. color.setRGB(0, 255, 255)
  6. point.trueColor = color
  7. point.setPosition(200, 200)
  8. mxcad.drawEntity(point)
复制代码
效果图:
图片1.png
多行文字
绘制多行文字代码如下:
  1. import { MxCpp, McGePoint3d, McCmColor, McDb, McDbMText } from "mxcad"
  2. const mxcad = MxCpp.App.getCurrentMxCAD()
  3. const mText = new McDbMText()
  4. const textId = mxcad.drawEntity(mText)
  5. const text = textId.getMcDbEntity() as McDbMText
  6. text.attachment = McDb.AttachmentPoint.kTopLeft
  7. text.contents = "内容 \\P 内容"
  8. text.location = new McGePoint3d(10, 20)
  9. text.trueColor = new McCmColor(255, 0, 255)
  10. text.textHeight = 10
  11. mxcad.updateDisplay()
复制代码
效果图:
图片2.png
单行文字
绘制单行文本代码如下:
  1. import { MxCpp, McGePoint3d, McCmColor, McDb, McDbText } from "mxcad"
  2. const mxcad = MxCpp.App.getCurrentMxCAD()
  3. const text = new McDbText()
  4. text.widthFactor = 1
  5. text.horizontalMode = McDb.TextHorzMode.kTextCenter
  6. text.verticalMode = McDb.TextVertMode.kTextBottom
  7. text.textString = "内容"
  8. text.position = new McGePoint3d(-10, -20)
  9. text.trueColor = new McCmColor(255, 0, 255)
  10. text.height = 10
  11. mxcad.drawEntity(text)
  12. mxcad.updateDisplay()
复制代码
效果图:
图片3.png
对齐标注
绘制对齐标注尺寸代码如下:
  1. import { MxCpp, McGePoint3d, McCmColor, McDb, McDbAlignedDimension } from "mxcad"
  2. const mxcad = MxCpp.App.getCurrentMxCAD()
  3. const mDimension = new McDbAlignedDimension()
  4. const dimensionId = mxcad.drawEntity(mDimension)
  5. const dimension = dimensionId.getMcDbEntity() as McDbAlignedDimension
  6. dimension.xLine1Point = new McGePoint3d(0, 255)
  7. dimension.xLine2Point = new McGePoint3d(30, 60)
  8. dimension.dimLinePoint = new McGePoint3d(88, 88)
  9. dimension.textAttachment = McDb.AttachmentPoint.kTopLeft
  10. dimension.trueColor = new McCmColor(200, 255, 0)
  11. dimension.oblique = 0
  12. mxcad.updateDisplay()
复制代码
效果图:
图片4.png
旋转标注
绘制旋转标注尺寸代码如下:
  1. import { MxCpp, McGePoint3d, McCmColor, McDb, McDbRotatedDimension } from "mxcad"
  2. const mxcad = MxCpp.App.getCurrentMxCAD()
  3. const mDimension = new McDbRotatedDimension()
  4. const dimensionId = mxcad.drawEntity(mDimension)
  5. const dimension = dimensionId.getMcDbEntity() as McDbRotatedDimension
  6. dimension.xLine1Point = new McGePoint3d(100, -137)
  7. dimension.xLine2Point = new McGePoint3d(161,30)
  8. dimension.dimLinePoint = new McGePoint3d(80, -60)
  9. dimension.textAttachment = McDb.AttachmentPoint.kTopLeft
  10. dimension.textRotation = 0.23
  11. dimension.trueColor = new McCmColor(200, 255, 0)
  12. dimension.oblique = 0
  13. dimension.rotation = 0
  14. mxcad.updateDisplay()
复制代码
效果图:
图片5.png
绘制直线
绘制直线代码如下:
  1. import { MxCpp, McCmColor, McDbLine } from "mxcad"
  2. const mxcad = MxCpp.App.getCurrentMxCAD()
  3. const line = new McDbLine(0, 0, 0, -80, -80, 0)
  4. line.trueColor = new McCmColor(255, 0, 0)
  5. mxcad.drawEntity(line)
复制代码
效果图:
图片6.png
绘制圆
绘制圆代码如下:
  1. import { MxCpp, McCmColor, McDbCircle } from "mxcad"
  2. const mxcad = MxCpp.App.getCurrentMxCAD()
  3. const circle = new McDbCircle(-100, 300, 0, 20)
  4. circle.trueColor = new McCmColor(255, 0, 0)
  5. mxcad.drawEntity(circle)
复制代码
效果图:
图片7.png
绘制多义线
绘制多义线代码如下:
  1. import { MxCpp, McGePoint3d, McDbPolyline } from "mxcad"
  2. const mxcad = MxCpp.App.getCurrentMxCAD()
  3. const polyline = new McDbPolyline()
  4. polyline.isClosed = false
  5. polyline.constantWidth = 10
  6. polyline.addVertexAt(new McGePoint3d(100, 100))
  7. polyline.addVertexAt(new McGePoint3d(200, 100), 0.2, 1, 5, 1)
  8. polyline.addVertexAt(new McGePoint3d(100, 200), 0.2, 5, 1, 2)
  9. mxcad.drawEntity(polyline)
复制代码
效果图:
图片8.png
绘制圆弧
绘制圆弧代码如下:
  1. import { MxCpp, McGePoint3d, McDbArc, McCmColor } from "mxcad"
  2. const mxcad = MxCpp.App.getCurrentMxCAD()
  3. const arc = new McDbArc()
  4. arc.center = new McGePoint3d(-100, -100),
  5. arc.radius = 20
  6. arc.startAngle = Math.PI / 2
  7. arc.endAngle = Math.PI * 3 / 2
  8. arc.trueColor = new McCmColor(255, 233, 0)
  9. mxcad.drawEntity(arc)
复制代码
效果图:
图片9.png
绘制椭圆
绘制椭圆代码如下:
  1. import { MxCpp, McGePoint3d, McDbEllipse, McCmColor, McGeVector3d } from "mxcad"
  2. const mxcad = MxCpp.App.getCurrentMxCAD()
  3. const ellipse = new McDbEllipse()
  4. ellipse.center = new McGePoint3d(-200, -200),
  5. ellipse.majorAxis = new McGeVector3d(0, 300, 0)
  6. ellipse.minorAxis = new McGeVector3d(33, 0, 0)
  7. ellipse.radiusRatio = 0.5
  8. ellipse.startAngle = Math.PI / 2
  9. ellipse.endAngle = Math.PI * 3 / 2
  10. ellipse.trueColor = new McCmColor(255, 233, 0)
  11. mxcad.drawEntity(ellipse)
复制代码
效果图:
图片10.png
交互绘制
如果上述位置属性是用户通过点击或者输入框输入,mxcad就提供了这样一套用于获取用户输入并在绘制中得到输入的机制,最频繁的应该是鼠标点击输入。
1、通过鼠标点击获取CAD图纸中的坐标位置,代码如下:
  1. import { MxCADUiPrPoint } from "mxcad"
  2. const getPoint = new MxCADUiPrPoint()
  3. const point = await getPoint.go()
  4. console.log(point)
复制代码
上述代码打印的就是一个坐标点了, 其坐标点是用户通过鼠标点击获取到的对应的图纸坐标位置。
2、通过输入框输入值, 来确定除了坐标以外的其他参数,代码如下:
  1. const input = document.createElement("input")
  2. input.addEventListener("keydown", (e: KeyboardEvent) => {
  3.     // 设置传输命令行消息数据
  4.     MxFun.setCommandLineInputData((e.target as HTMLInputElement).value, e.keyCode);
  5. })
  6. document.body.appendChild(input)
复制代码
mxcad中引用了mxdraw 下载依赖时会自动下载, 所有我们只要安装了mxcad就可以使用mxdraw
如上代码所示, 我们传入用户输入的内容和对应按键的keyCode值
篇幅限制,更多的内容请查询梦想CAD控件
上述代码会在用户输入对应类型的数据后按下回车键(Enter或者Esc)才会往下执行, 通过setMessage设置提示,最终得到用户输入的数据, 通过这些数据进行参数化绘图。
最后这些设置的用户提示通过下面代码获得:
篇幅限制,更多的内容请查询梦想CAD控件
如果你无法理解上述某个函数的意思,可以在mxdraw API文档或者mxcad API文档中查看对应的APi说明。
参数化绘制文字的完整流程下面简单实现一个的参数化绘制文字的流程:
篇幅限制,更多的内容请查询梦想CAD控件
演示Demo源码:
https://gitee.com/mxcadx/mxdraw-article/tree/master/mxcad参数化绘图/demo.zip

1

主题

14

回帖

5323

积分

上尉

积分
5323
发表于 2023-11-11 09:34:33 | 显示全部楼层
这二次开发的的程序语言是什么语言的?

299

主题

20

回帖

3984

积分

中尉

积分
3984

活跃会员

 楼主| 发表于 2024-1-26 09:59:25 | 显示全部楼层
chixun99 发表于 2023-11-11 09:34
这二次开发的的程序语言是什么语言的?

提供的JS开发接口

1

主题

14

回帖

5323

积分

上尉

积分
5323
发表于 2024-1-27 09:37:29 | 显示全部楼层
CAD画图 发表于 2024-1-26 09:59
提供的JS开发接口

JS不熟悉
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

咨询QQ:1359218528|发帖须知!|Archiver|手机版|小黑屋|UG爱好者论坛 ( 京ICP备10217105号-2 )

GMT+8, 2024-12-26 03:55

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表