Foreword
MxCAD’s WEB CAD SDK provides the function of parametric drawing. We can view all instances of classes inherited from McDbEntity, and they can all perform parametric drawing.
First we should display a drawing on the page. Please follow the instructions in the mxcad introductory document or view the code to initialize various sample projects stored in github|gitee to display the page of the drawing.
Online CAD Function Test: Online CAD Dream Drawing
Point drawing
Parametrically draw a point in 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)
Rendering:
Multiline text
The code for drawing multi-line text is as follows:
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 = "Content\P content"
text.location = new McGePoint3d(10, 20)
text.trueColor = new McCmColor(255, 0, 255)
text.textHeight = 10
mxcad.updateDisplay()
Rendering:
Single line text
The code for drawing a single line of text is as follows:
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 = "content"
text.position = new McGePoint3d(-10, -20)
text.trueColor = new McCmColor(255, 0, 255)
text.height = 10
mxcad.drawEntity(text)
mxcad.updateDisplay()
Rendering:
Alignment annotation
The code for drawing aligned dimensions is as follows:
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()
Rendering:
Rotate annotation
The code for drawing rotated dimensions is as follows:
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()
Rendering:
Draw a straight line
The code for drawing a straight line is as follows:
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)
Rendering:
Draw a circle
The code for drawing a circle is as follows:
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)
Rendering:
Draw polylines
The code for drawing polylines is as follows:
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)
Rendering:
Draw an arc
The code for drawing an arc is as follows:
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)
Rendering:
Draw an ellipse
The code for drawing an ellipse is as follows:
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)
Rendering:
Interactive drawing
If the above position attributes are input by the user through clicks or input boxes, mxcad provides a set of mechanisms for obtaining user input and obtaining input during drawing. The most frequent input should be mouse click input.
1. Get the coordinate position in the CAD drawing by clicking the mouse. The code is as follows:
import { MxCADUiPrPoint } from "mxcad"
const getPoint = new MxCADUiPrPoint()
const point = await getPoint.go()
console.log(point)
The above code prints a coordinate point, and its coordinate point is the corresponding drawing coordinate position obtained by the user by clicking the mouse.
2. Enter values in the input box to determine other parameters except coordinates. The code is as follows:
const input = document.createElement("input")
input.addEventListener("keydown", (e: KeyboardEvent) => {
//Set the transmission command line message data
MxFun.setCommandLineInputData((e.target as HTMLInputElement).value, e.keyCode);
})
document.body.appendChild(input)
Note: mxdraw is referenced in mxcad and will be downloaded automatically when downloading dependencies. So we can use mxdraw as long as mxcad is installed.
As shown in the above code, we pass in the content entered by the user and the keyCode value of the corresponding key.
const getInt = new MxCADUiPrInt()
const getKey = new MxCADUiPrKeyWord
const getStr = new MxCADUiPrString()
getInt.setMessage("Prompt the user to enter a number:")
const intVal = await getInt.go()
console.log(intVal)
getKey.setMessage("Prompt user for keywords A, B, C:")
getKey.setKeyWords("A B C")
const keyVal = await getKey.go()
console.log(keyVal)
getStr.setMessage("Prompt the user to enter a string:")
const strVal = await getStr.go()
console.log(strVal)
The above code will be executed after the user presses the Enter key (Enter or Esc) after inputting the corresponding type of data. The prompt is set through setMessage, and finally the data input by the user is obtained, and parameterized drawing is performed using these data.
The user prompts for these last settings are obtained through the following code:
import { MxFun } from "mxdraw"
MxFun.listenForCommandLineInput(({ msCmdTip, msCmdDisplay, msCmdText }) => {
console.log(msCmdTip, msCmdDisplay, msCmdText)
}
);
If you cannot understand the meaning of one of the above functions, you can view the corresponding API description in the mxdraw API documentation or mxcad API documentation.
The complete process of parametric text drawing
The following is a simple process of parametric drawing text:
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("Please click to confirm the text position")
const position = await getPoint.go()
if(!position) return
text.position = position
getInt.setMessage("Please enter the text height")
const height = await getInt.go()
if(!height) return
text.height = height
getKey.setMessage("Select the horizontal alignment shortcut key L: left alignment C: center alignment R: right alignment A: horizontal alignment M: vertical center alignment F: adaptive")
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("Please enter text content")
const str = await getStr.go()
if(!str) return
text.textString = str
const mxcad = MxCpp.App.getCurrentMxCAD()
mxcad.drawEntity(text)
})