Добавляем SVG в 2D виды в Forge Viewer
Предположим, у Вас есть логотип
SVG для этой картинки выглядит примерно так:
- <?xml version="1.0" standalone="no"?>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
- <rect x="0" y="0" width="210" height="210" stroke="black" fill="transparent" stroke-width="5"/>
- <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
- <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
- <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
- <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
- <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
- stroke="orange" fill="transparent" stroke-width="5"/>
- <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
- stroke="green" fill="transparent" stroke-width="5"/>
- <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
- </svg>
Мы хотим разместить этот логотип на 2D-листе в нижнем правом углу:
Чтобы достичь этого, нам нужно немножко поменять разметку в SVG. Нам нужно убрать параметры стилей (они будут проигнорированы) и обернуть код SVG в тег <g> (группа в SVG-разметке):
- <g transform="translate(3024 2160) scale(-2 -2)">
Это позволяет позиционировать и масштабировать logo. Чтобы разместить его в нижнем углу, мне нужны границы листа, я получаю их из самого Forge Viewer-а:
- var bounds = viewer.impl.model.getData().bbox.max;
Если вывести их в консоль или отладчик, мы увидим:
- > Z.Vector3 {x: 3024, y: 2160, z: 0}
Расширение markup extension нативно обрабатывает векторную графику SVG, поэтому, давайте добавим наш SVG в слой 'LogoLayer' с помощью следующего кода:
- var markup = viewer.getExtension("Autodesk.Viewing.MarkupsCore");
- markup.enterEditMode();
- markup.leaveEditMode();
- markup.loadMarkups(_markupdata, 'LogoLayer');
Откройте браузер и Вы увидите логотип SVG на странице. Я разместил мой логотип, используя информацию о границах, как показано выше и повернул его:
- <g transform="rotate(3) translate(${bounds.x-700} ${490}) scale(${scale} -${scale})">
DEMO: https://wallabyway.github.io/offline-pdf-markup/ (нажмите кнопку Stamp It)
Исходный код: https://github.com/wallabyway/offline-pdf-markup
Источник: https://forge.autodesk.com/blog/add-svg-your-2d-sheets-forge-viewer
Обсуждение: http://adn-cis.org/forum/index.php?topic=
Опубликовано 28.03.2019