Draw measure objects and results

Novorender measure API 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 drawkind, as long as the returned value contains this value then it can be drawn using getDrawMeasureEntity(). getDrawMeasureEntity() found in the measure API 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 function will require view from the Novorender webgl-API to transform the 3d data to 2d. The camera from webgl-API view is also used in the draw utility function to remove certain drawing parts and text based on camera angle and distance

note

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

const entity = await measureScene.pickMeasureEntity(objectId, position);
const drawProd = await measureApi.getDrawMeasureEntity(view, measureScene, entity);
const { camera } = view;
const cameraDirection = vec3.transformQuat(vec3.create(), vec3.fromValues(0, 0, -1), camera.rotation);
const camSettings = { pos: camera.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 drawkind and can be drawn using getDrawMeasureEntity(). 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 measurescene.measure(entity1, entity2);
const drawProd = await measureApi.getDrawMeasureEntity(view, measureScene, 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 API 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 getDrawObjectFromPoints() on the measure API. Like other draw function it takes the webgl API view as an input, there are also options to display angle between the lines and whether or not to close it to create a polygon. The position from webgl API pick() function can be stored to create lines between multiple clicked points.

//Draw a point line with line names and angles
const drawProd = measureApi.getDrawObjectFromPoints(view, pointLinePoints, false, true);
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 });
        });
    });
}

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.

Loading...