Draw measure objects and results

Novorender measure module can be used to draw measure entity or results into a 2D canvas. It can be used with utility functions found in the open source Novoweb github repository. These functions are placed in the frontend code to make it easy for developers to change the style of 2d drawings to fit their own application. These functions can also be found at the bottom of the demo

Draw entities

Many objects returned from the measure API contains a DrawableEntity.drawkind, as long as the returned value contains this value then it can be drawn using DrawModule.getDrawEntity, this function will return a hierarchical set of objects that be used to draw to screen.

The objects contains both 3D and 2D data and various information about drawing types, names, display text and more. The RenderStateCamera from view is also used in the draw utility function to remove certain drawing parts and text based on camera angle and distance

tip

Check the parametric measure tutorial on how to select measure entities.

const entity = await measureView.core.pickMeasureEntity(objectId, position);
const drawProd = await measureView.draw.getDrawEntity(entity);
const { rotation, position } = view.renderState.camera;
const cameraDirection = vec3.transformQuat(vec3.create(), vec3.fromValues(0, 0, -1), rotation);
const camSettings = { pos: position, dir: cameraDirection };
if (drawProd) {
    //Function found in the utility ts file
    drawProduct(context2D, camSettings, drawProd, { lineColor: "yellow", fillColor: "blue" }, 3);
}

Draw measure result

The measure result also contains DrawableEntity.drawkind and can be drawn using DrawModule.getDrawEntity function. The result will contain information on how to draw the measure line, x, y and z dimensions of the measurement as well as certain angles. The result object can be drawn using the utility function drawProduct() as above but we have chosen to handle each part of the result separately to give more flexibility on style and colour.

Example shows distance line drawn in blue, the z-axis line and angle drawn in green

const measureResult = await measureView.core.measure(entity1, entity2);
const drawProd = await  measureView.draw.getDrawEntity(measureResult);
for (const obj of drawProd.objects) {
    for (const part of obj.parts) {
        if (part.vertices2D === undefined) {
            continue;
        }
        switch (part.name) {
            case "result":
                drawPart(context2D, camSettings, part, { lineColor: "blue" }, 3, {
                    type: "distance",
                });
                break;
            case "z-axis":
                drawPart(context2D, camSettings, part, { lineColor: "green" }, 3, {
                    type: "distance",
                });
                break;
            case "z-angle":
                drawPart(context2D, camSettings, part, { lineColor: "green" }, 2, {
                    type: "distance",
                });
                break;
        }
    }
}

Draw line strip or polygon

The measure module allows for multiple 3D points to be transformed to an on screen-linestrip or polygon. This is used in the Novoweb frontend to display area and measurement between multiple points. To get draw objects from a list of points use DrawModule.getdrawobjectfrompoints. it also has options to display angle between the lines and whether or not to close it to create a polygon. The position from View.pick function can be stored to create lines between multiple clicked points.

// Draw a point line with line names and angles
const drawProd = measureView.draw.getDrawObjectFromPoints(pointLinePoints, false, false);
if (drawProd) {
    const textList = pointLineResult.segmentLengths.map((v) => v.toFixed(2));
    drawProd.objects.forEach((obj) => {
        obj.parts.forEach((part) => {
            drawPart(context2D, camSettings, part, { lineColor: "yellow", pointColor: { start: "green" } }, 2, { type: "distance", customText: textList });
        });
    });
}

tip

Also checkout guide for measure lines.

Demo

Click to select parametric object, the selected parametric object will be draw, do note that a point will be drawn if the selected object does not contain parametric info. Click another object to measure against, the parametric object will be drawn as well as the measure result. Continued clicks will alternate between objects and log out the measurement values.