如何使用标记扩展呈现线条标记？

Question

我之前问过一个问题，即是否有一种编程方式来使用标记扩展来呈现标记。这对文本标记有效，或者至少对文本标记有效！现在我正在尝试对行标记做同样的事情；但是，我遇到了一个问题。如何将位置添加到标记中？我有一组位置要分配给它，但似乎没有函数，当我尝试使用markup.location = [etc] 直接分配位置时，由于某种原因，它会将所有数字更改为无穷大。

那么，如何将位置数组分配给标记？

这就是我加载它们的方式：

  let MarkupsCore = Autodesk.Viewing.Extensions.Markups.Core;
  let line = new MarkupsCore.MarkupFreehand(25, markupTool); //eslint-disable-line
  line.locations = [{x: 2, y: 3}]; //something like this
  markupTool.addMarkup(line);
  line.setSize({ x: markup.x, y: markup.y}, markup.width, markup.height);
  line.updateStyle(true);

Answer 1

MarkupFreehand不能直接使用，应该用EditModeFreehand代替。用几个代码归档您的请求、创建行标记也并不容易。这是我用来创建带有MarkupCore 扩展名的行标记的代码sn-p：

function createLineStartPt( mousePosX, mousePosY, editor ) {
    const editMode = markup.editMode;

    editor.snapper && editor.snapper.clearSnapped();

    editMode.lastX = editMode.initialX = mousePosX;
    editMode.lastY = editMode.initialY = mousePosY;

    //set the starting point
    const position = editMode.position = editor.clientToMarkups( mousePosX, mousePosY );
    editMode.movements = [position];

    const size = editMode.size = editor.sizeFromClientToMarkups( 1, 1 );

    // Create pen.
    editor.beginActionGroup();

    const markupId = editor.getId();
    const createPen = editMode.createPen( markupId, position, size, 0, [{x: 0, y: 0 }] );
    createPen.execute();

    editMode.createAbsolutePath( position );

    editMode.selectedMarkup = editor.getMarkup( markupId );
    editMode.creationBegin();
}

function createLineEndPt( mousePosX, mousePosY, editor ) {
    const editMode = markup.editMode;

    const selectedMarkup = editMode.selectedMarkup;
    if( !selectedMarkup || !editMode.creating )
        return;

    const movements = editMode.movements;
    const location = editor.clientToMarkups( mousePosX, mousePosY );

    const dx = editMode.lastX - mousePosX;
    const dy = editMode.lastY - mousePosY;
    const moveTol = 25; // 5^2, compare to square to avoid using square root of distance

    if( movements.length > 1 && (dx*dx + dy*dy) < moveTol ) {
        movements[movements.length - 1] = location;
        editMode.removeFromAbsolutePath( 1 );
    } else {
        movements.push( location );
        editMode.lastX = mousePosX;
        editMode.lastY = mousePosY;
    }

    editMode.addToAbsolutePath([location]);

    const appendPen = editMode.setPen( editMode.position, editMode.size, editMode.absolutePath, true );
    appendPen.execute();
} 

function endLineDrawing( editor ) {
    const editMode = markup.editMode;

    if( !editMode.creating )
        return editMode.creationEnd();

    let movements = editMode.movements;
    const cameraWidth = editMode.viewer.impl.camera.right - editMode.viewer.impl.camera.left;
    const cameraHeight = editMode.viewer.impl.camera.top - editMode.viewer.impl.camera.bottom;
    const cameraDiagSq = cameraWidth * cameraWidth + cameraHeight * cameraHeight;

    movements = Autodesk.Viewing.Extensions.Markups.Core.Utils.simplify( movements, cameraDiagSq * 0.00000001, true );

    const xs = movements.map(function(item) { return item.x });
    const ys = movements.map(function(item) { return item.y });

    const l = Math.min.apply(null, xs);
    const t = Math.min.apply(null, ys);
    const r = Math.max.apply(null, xs);
    const b = Math.max.apply(null, ys);

    const width = r - l;  // Already in markup coords space
    const height = b - t; // Already in markup coords space

    const position = {
        x: l + width * 0.5,
        y: t + height * 0.5
    };
    const size = editMode.size = {x: width, y: height};

    // Adjust points to relate from the shape's center
    const locations = movements.map(function(point){
        return {
            x: point.x - position.x,
            y: point.y - position.y
        };
    });

    const endPen = editMode.setPen( position, size, locations, false );
    endPen.execute();

    editMode.creationEnd();
} 

然后这样调用它们：

// Load the extionsion
let markup;
viewer.loadExtension( 'Autodesk.Viewing.MarkupsCore' )
    .then(function( markupsExt ) {
      markup = markupsExt;
    });

// Enter markup editer mode and change it to freehand mode
markup.enterEditMode();
const freehand = new Autodesk.Viewing.Extensions.Markups.Core.EditModeFreehand( markup );
markup.changeEditMode( freehand );


// Create start point of the line
createLineStartPt( 360.03125, 191.3125, markup );

// Create end point of the line
createLineEndPt( 460.03125, 191.3125, markup );

// Tell the markup tool to finish drawing
endLineDrawing( markup );

以下是上述代码的结果：

注意。所有mousePos前缀变量都是浏览器视口中客户端坐标系中的坐标，详见下面的链接。得到mouse的clientX或clientY后，必须减去markup.svg.getBoundingClientRect()才能调整它们的值。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems#Client

希望对你有帮助！