mxdraw

Line Segment

4/22/2022

# Basic Line Segment MxDbLine

We can create a line segment by instantiating an Mx.MxDbLine() object.

Click Mx.MxDbLine API (opens new window) to view detailed property and method descriptions.

import Mx from "mxdraw"

// Instantiate a point taking object
const getPoint = new Mx.MrxDbgUiPrPoint();

// Mouse click 1
getPoint.go(async (status) => {
    if (status !== Mx.MrxDbgUiPrBaseReturn.kOk) {
        return
    }

    // Current mouse position
    const pt1 = getPoint.value()
    // Instantiate line
    let line = new Mx.MxDbLine();
    // Set first point position
    line.setPoint1(pt1);
    // Set color
    line.setColor(0xFF22);

    // Dynamic drawing function
    getPoint.setUserDraw((currentPoint, worldDrawComment) => {
        // Set second point position of line
        line.setPoint2(currentPoint);
        // Draw the line object
        worldDrawComment.drawCustomEntity(line);
    })
    // Set the second mouse click position as the end point of the line segment
    line.setPoint2(await getPoint.go());
     // Get the control object and add the line object to the canvas
    Mx.MxFun.getCurrentDraw().addMxEntity(line);
})

Note:

Effect:

  • Click and move the mouse on the canvas to draw a straight line
  • Click again to end the drawing
  • Click on the drawn line segment to control the line segment

# Multi-Line Segment MxDbPolyline

Different from MxDbLine, you can draw a lot of connected lines at once.

Click Mx.MxDbPolyline API (opens new window) to view detailed property and method descriptions.

// Instantiate
let line = new Mx.MxDbPolyline();
const getPoint = new Mx.MrxDbgUiPrPoint();

// Current mouse position
const pt1 = getPoint.value()
// Add four points and offset each
line.addVertexAt(pt1);
line.addVertexAt(pt1.clone().addScalar(30000));
line.addVertexAt(pt1.clone().addScalar(20000));
line.addVertexAt(pt1.clone().addScalar(10000));
// Modify the third point added
line.setPointAt(2, pt1.clone().addScalar(40000))
// Add to canvas
Mx.MxFun.getCurrentDraw().addMxEntity(line);
// Check the number of vertices
console.log(line.numVerts()) // 4

Note:

Effect:

  • Click continuously to draw continuous line segments
  • Click on the drawn line segment to control the line segment

# Arbitrary Line Segment MxDbAnyLine

You can draw any line on the canvas based on the mouse position.

Click Mx.MxDbAnyLine API (opens new window) to view detailed property and method descriptions.

// Instantiate point taking object
const getPoint = new Mx.MrxDbgUiPrPoint();

// Mouse click
getPoint.go(async (status) => {
    if (status !== Mx.MrxDbgUiPrBaseReturn.kOk) {
        return
    }
    let line = new Mx.MxDbAnyLine();
    line.points.push(getPoint.value());

    // Set dynamic drawing callback function
    getPoint.setUserDraw((currentPoint, worldDrawComment) => {
        // Push the current vertex position to the vertex array
        line.points.push(currentPoint.clone());
        // Draw line object
        worldDrawComment.drawCustomEntity(line);
    });
    
    line.points.push(await getPoint.go()); 
    Mx.MxFun.getCurrentDraw().addMxEntity(line);
  
})

Effect:

Note:

# Cloud Line MxDbCloudLine

You can draw any line on the canvas based on the mouse position.

Click Mx.MxDbCloudLine API (opens new window) to view detailed property and method descriptions.

// Instantiate point taking object
const getPoint = new Mx.MrxDbgUiPrPoint();

// Mouse click
getPoint.go(async(status) => {
    if (status != Mx.MrxDbgUiPrBaseReturn.kOk) {
        return
    }
    let line = new Mx.MxDbCloudLine();
    line.addPoint(getPoint.value());
    // Set the radius of the cloud line arc
    line.setRadius(Mx.MxFun.screenCoordLong2Doc(10))

    // Set dynamic drawing callback function
    getPoint.setUserDraw((currentPoint, worldDrawComment) => {
        // Push the current vertex position to the vertex array
        line.addPoint(currentPoint);
        // Draw line object
        worldDrawComment.drawCustomEntity(line);
    });

    // Mouse click 2
    line.addPoint(await getPoint.go()); 
    Mx.MxFun.getCurrentDraw().addMxEntity(line);
})

Effect:

Note: