Как вы визуализируете разметку строки с помощью расширения Markups?

Ранее я задавал вопрос о том, существует ли программный способ визуализации разметки с расширением разметки. Это сработало, по крайней мере, для разметки текста! Теперь я пытаюсь проделать то же самое с разметкой строк; однако я застрял с одной проблемой. Как вы добавляете локации в разметку? У меня есть массив местоположений, которые я пытаюсь назначить ему, но, похоже, нет функции, и когда я пытаюсь напрямую назначить местоположения с помощью 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);

person Sam Curry    schedule 26.10.2018    source источник
comment
Я изучаю это, верну вам A.S.A.P.   -  person Eason Kang    schedule 31.10.2018


Ответы (1)


MarkupFreehand нельзя использовать напрямую, его следует заменить на EditModeFreehand. Также непросто заархивировать ваш запрос, создать разметку строки с помощью нескольких кодов. Вот фрагмент кода, который я использовал для создания разметки строки с расширением MarkupCore:

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 представляют собой координаты в клиентской системе координат в окне просмотра браузера, подробности см. по ссылке ниже. После получения clientX или clientY mosue вы должны минус markup.svg.getBoundingClientRect(), чтобы скорректировать их значения.

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

Надеюсь, это поможет!

person Eason Kang    schedule 01.11.2018