Skip to content
On this page

Here is the translated version of the code examples for drawing basic curves using MxCAD3D:

Line

typescript
// Non-parametric geometric point
const pt = new Mx3dGePoint(950, 0, 0);
// Direction vector
const dir = new Mx3dGeDir(0, 1, 1);
// Parametric geometric line constructed from a point and a direction
const line = new Mx3dGeomLine(pt, dir);
// Extract a line segment in the parameter range [0, 50]
const lineEdge = line.Edge(0, 50);
// Add the shape to the document
addShapeToDoc(lineEdge);
// Update the display (will update the model shown in the canvas)
mxcad3d.update();

Circle, Arc

typescript
// Default right-handed coordinate system
const csysr = new Mx3dGeCSYSR();
// Parametric geometric circle with center coinciding with the origin of csysr,
// located in the XOY plane of csysr, and with a radius of 20
const circle = new Mx3dGeomCircle(csysr, 20);
// Get the shape of the circle (Wire represents a topological shape)
const circleWire = circle.Wire();
// Modify the radius of the circle
circle.SetRadius(30);
// Get the shape of the circular arc using the Edge method, specifying the range of the arc angle [0, 2π]
const circleEdge = circle.Wire(0, Math.PI / 2);
// Add the shapes to the document
addShapeToDoc(circleWire);
addShapeToDoc(circleEdge);
// Update the display (will update the model shown in the canvas)
mxcad3d.update();

Three-Point Arc

typescript
// Three non-collinear points
const pt1 = new Mx3dGePoint(0, 0, 0);
const pt2 = new Mx3dGePoint(1, 0.5, 0);
const pt3 = new Mx3dGePoint(2, 0, 0);
// Construct a three-point arc using the static method MakeArcOfCircle of the Mx3dGeomCircle class
const arcEdge = Mx3dGeomCircle.MakeArcOfCircle(pt1, pt2, pt3);
// Add the shape to the document
addShapeToDoc(arcEdge);
// Update the display (will update the model shown in the canvas)
mxcad3d.update();

Ellipse, Elliptical Arc

typescript
// Default right-handed coordinate system
const csysr = new Mx3dGeCSYSR();
// Parametric geometric ellipse with center coinciding with the origin of csysr,
// located in the XOY plane of csysr, major axis radius of 20, and minor axis radius of 10
const ellipse = new Mx3dGeomEllipse(csysr, 20, 10);
// Get the shape of the ellipse
const ellipseWire = ellipse.Wire();
// Modify the major and minor axis radii of the ellipse
ellipse.SetMajorRadius(30);
ellipse.SetMinorRadius(15);
// Get the elliptical arc
const ellipseEdge = ellipse.Edge(0, Math.PI);
// Add the shapes to the document
addShapeToDoc(ellipseWire);
addShapeToDoc(ellipseEdge);
// Update the display (will update the model shown in the canvas)
mxcad3d.update();

Hyperbola

typescript
// Default right-handed coordinate system
const csysr = new Mx3dGeCSYSR();
// Parametric geometric hyperbola located in the XOY plane of csysr,
// with major axis radius of 20 and minor axis radius of 5
const hyperbola = new Mx3dGeomHyperbola(csysr, 20, 5);
// Get the shape of the hyperbola, specifying the range of the eccentric angle
const hyperbolaEdge = hyperbola.Edge(-Math.PI / 2, Math.PI / 2);
// Add the shape to the document
addShapeToDoc(hyperbolaEdge);
// Update the display (will update the model shown in the canvas)
mxcad3d.update();

Parabola

typescript
// Default right-handed coordinate system
const csysr = new Mx3dGeCSYSR();
// Parameterized parabola in the XOY plane of csysr, with major axis radius 20 and minor axis radius 9
const parabola = new Mx3dGeomHyperbola(csysr, 20, 9);
// Obtain the shape of the parabola
const parabolaEdge = parabola.Edge(-Math.PI / 2, Math.PI / 2);
// Add the shape to the document
addShapeToDoc(parabolaEdge);
// Update the display (this will update the model displayed in the canvas)
mxcad3d.update();

B-spline Curve

typescript
// Control points
const Poles: Mx3dGePoint[] = [];
Poles.push(new Mx3dGePoint(0, -10, 0));
Poles.push(new Mx3dGePoint(0, -10, 5));
Poles.push(new Mx3dGePoint(0, -5, 5));
Poles.push(new Mx3dGePoint(0, 0, 5));
Poles.push(new Mx3dGePoint(0, 0, 0));
Poles.push(new Mx3dGePoint(0, 0, -5));
Poles.push(new Mx3dGePoint(0, 5, -5));
Poles.push(new Mx3dGePoint(0, 10, -5));
Poles.push(new Mx3dGePoint(0, 10, 0));
// Knots
const Knots = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
// Multiplicities
const Multiplicities = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
// B-spline curve of degree 2
const bspl = new Mx3dGeomBSplineCurve(Poles, Knots, Multiplicities, 2);
// Obtain the shape of the B-spline curve
const bsplWire = bspl.Wire();
// Add the shape to the document
addShapeToDoc(bsplWire);
// Update the display (this will update the model displayed in the canvas)
mxcad3d.update();

B-spline Curve (Interpolation Algorithm)

typescript
// Control points (the interpolation algorithm will try to make the curve pass through these points)
const pts: Mx3dGePoint[] = [];
pts.push(new Mx3dGePoint(0, 0, 0));
pts.push(new Mx3dGePoint(0, 0, 20));
pts.push(new Mx3dGePoint(0, 0, 40));
pts.push(new Mx3dGePoint(0, 0, 60));
pts.push(new Mx3dGePoint(0, 0, 80));
pts.push(new Mx3dGePoint(20, 0, 100));
pts.push(new Mx3dGePoint(40, 0, 100));
pts.push(new Mx3dGePoint(60, 0, 100));
pts.push(new Mx3dGePoint(80, 0, 100));
pts.push(new Mx3dGePoint(100, 0, 100));
// false for non-periodic, precision set to 1e-6
const interpolateBSPL = new Mx3dInterpolateBSplineCurve(pts, false, 1e-6);
// You can set tangent vectors at the start and end points
const sVec = new Mx3dGeVec(-10, 0, 1);
const eVec = new Mx3dGeVec(1, 0, -1);
interpolateBSPL.LoadEnds(sVec, eVec);
// Execute the algorithm
interpolateBSPL.Perform();
// If the algorithm is successful, obtain the B-spline curve
if (interpolateBSPL.IsDone()) {
  const bspl = interpolateBSPL.Curve();
  // Obtain the shape of the B-spline curve
  const bsplWire = bspl.Wire();
  // Add the shape to the document
  addShapeToDoc(bsplWire);
  // Update the display (this will update the model displayed in the canvas)
  mxcad3d.update();
}

Bezier Curve

typescript
// Control points
const Poles: Mx3dGePoint[] = [];
Poles.push(new Mx3dGePoint(0, 0, 0));
Poles.push(new Mx3dGePoint(0, 0, 10));
Poles.push(new Mx3dGePoint(0, 0, 20));
Poles.push(new Mx3dGePoint(0, 0, 30));
Poles.push(new Mx3dGePoint(0, 0, 40));
Poles.push(new Mx3dGePoint(10, 0, 50));
Poles.push(new Mx3dGePoint(20, 0, 50));
Poles.push(new Mx3dGePoint(30, 0, 50));
Poles.push(new Mx3dGePoint(40, 0, 50));
Poles.push(new Mx3dGePoint(50, 0, 50));

// Initialize the Bezier curve with control points and optional weights
const bezier = new Mx3dGeomBezierCurve(Poles);

// Get the shape of the Bezier curve
const bezierWire = bezier.Wire();

// Add the shape to the document
addShapeToDoc(bezierWire);

// Update the display (updates the model shown in the canvas)
mxcad3d.update();

Polyline

typescript
// Create a rectangle using a polyline
const polygon = new Mx3dMkPolygon();
const pt = new Mx3dGePoint(0, 0, 0);
polygon.Add(pt); pt.setX(50);
polygon.Add(pt); pt.setY(30);
polygon.Add(pt); pt.setX(0);
polygon.Add(pt);

// Close the polyline
polygon.Close();

// Get the shape of the polyline
const polygonWire = polygon.Wire();

// Add the shape to the document
addShapeToDoc(polygonWire);

// Update the display (updates the model shown in the canvas)
mxcad3d.update();

Connecting Edges/Wires to Form a Wire

typescript
// Points used to construct the edges
const pt1 = new Mx3dGePoint(0, 25, 0);
const pt2 = new Mx3dGePoint(40, 30, 0);
const pt3 = new Mx3dGePoint(80, 25, 0);
const pt4 = new Mx3dGePoint(0, 5, 0);
const pt5 = new Mx3dGePoint(40, 0, 0);
const pt6 = new Mx3dGePoint(80, 5, 0);

// Edges used to construct the wire
const arc1 = Mx3dGeomCircle.MakeArcOfCircle(pt1, pt2, pt3);
const arc2 = Mx3dGeomCircle.MakeArcOfCircle(pt4, pt5, pt6);
const edge1 = new Mx3dShapeEdge(pt1, pt4);
const edge2 = new Mx3dShapeEdge(pt3, pt6);

// The ConnectEdgesToWires algorithm is a static method of the Mx3dWireTool class.
// Given a set of edges, the algorithm connects them as much as possible with the given tolerance.
// If the edges cannot be fully connected, it may return multiple wires.
const wires = Mx3dWireTool.ConnectEdgesToWires([arc1, arc2, edge1, edge2], 1e-5, false);

// Add the first wire shape to the document
addShapeToDoc(wires[0]);

// Update the display (updates the model shown in the canvas)
mxcad3d.update();

The Mx3dWireTool class also provides the ConnectWiresToWires algorithm to connect multiple wires into a single wire and the EdgeToWire algorithm to convert an edge into a wire.