Rect Rectangle

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

Click Mx.MxDbRect API (opens new window) to see the detailed attribute and method description.

import Mx from "mxdraw"

// Instantiation of a point fetching object
const getPoint = new Mx.MrxDbgUiPrPoint();

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

    // Current mouse position
    const pt1 = getPoint.value()
    // Instantiation of rectangle object rect
    let rect = new Mx.MxDbRect();
   
    // Set the location of the first point
    rect.pt1 = pt1
    // Set color
    rect.setColor(0xFF22);

    // Set dynamic drawing callback function
    getPoint.setUserDraw((currentPoint, worldDrawComment) => {
        // Set the location of the second point of the line segment
        rect.pt2 = currentPoint;
        // Draw the rectangle object rect
        worldDrawComment.drawCustomEntity(rect);
    })

    // Mouse second click
    rect.pt2 = await getPoint.go();
    Mx.MxFun.getCurrentDraw().addMxEntity(rect);
})

Note:

• Only after creating the control object can we add the graphic object to the canvas! How to Create a Control Object? QuickStart

• View the complete source code of this example: github (opens new window) | gitee (opens new window)

Effect:

• Click and move the mouse on the canvas to draw a rectangle
• Click again to finish drawing
• Click on the drawn rectangle to control it