如何在 Forge Viewer 裏獲取含 Markups 的截圖

時間 2019-12-20

標籤如何 forge viewer 獲取 markups 截圖简体版

原文原文鏈接

截圖據我所知是目前在 Forge Viewer 最常被使用的功能，你能夠在 Forge 官方博客裏頭找到很多關於這個的文章，但要如何製做含 Markups 的截圖呢？javascript

要作到這個其實挺容易的，關鍵在於 markupCore.renderToCanvas() 這個方法，但在調用時必需注意的截圖的大小。css

下面的樣例是調用markupCore.renderToCanvas()這個方法經過 Context 將 markups 畫在 HTML5 的畫布上 (Canvas)。先前沒有接觸過 Forge Viewer Markup API 的朋友們能夠參考這篇文章[「翻譯」使用 Autodesk.Viewing.MarkupsCore 括展]：[1]html

注意：下面的 markup 是經過 SVG 字串定義的java

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Snapshot with Markup</title>
    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css?v=v3.3" type="text/css">
</head>

<body>

    <body onload="initializeViewer();" style="margin:0px; overflow:hidden">
        <div style="width:49vw; height:100vh; position:relative; display:inline-block;">
            <div id="viewer3d" style="margin:0;">
            </div>
        </div>
        <div style="width:49vw; height:100vh;display:inline-block;">
            <canvas id="snapshot" style="position:absolute;"></canvas>
            <button onclick="snaphot();" style="position:absolute;">Snapshot!</button>
        </div>
    </body>

    <!-- The Viewer JS -->
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/three.min.js"></script>
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.js?v=v3.3"></script>

    <!-- Developer JS -->
    <script>
        var viewer;

        function initializeViewer() {
            // initialize the viewer in "offline" mode (no security from Forge)
            var myViewerDiv = document.getElementById('viewer3d');
            viewer = new Autodesk.Viewing.Private.GuiViewer3D(myViewerDiv);
            var options = {
                'env': 'Local',
                'document': 'http://autodesk-forge.github.io/viewer-javascript-offline.sample/shaver/0.svf'
            };
            Autodesk.Viewing.Initializer(options, function () {
                viewer.start(options.document, options);
                viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
                    viewer.utilities.fitToView();
                });
            });
        }

        function snaphot() {
            var screenshot = new Image();
            screenshot.onload = function () {
                viewer.loadExtension('Autodesk.Viewing.MarkupsCore').then(function (markupCore) {

                    // load the markups
                    markupCore.show();
                    markupCore.loadMarkups(markupSVG, "layerName");

                    // ideally should also restore state of Viewer for this markup

                    // prepare to render the markups
                    var canvas = document.getElementById('snapshot');
                    canvas.width = viewer.container.clientWidth;
                    canvas.height = viewer.container.clientHeight;
                    var ctx = canvas.getContext('2d');
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(screenshot, 0, 0, canvas.width, canvas.height);

                    markupCore.renderToCanvas(ctx);

                    // hide the markups
                    markupCore.hide();
                });
            };

            // Get the full image
            viewer.getScreenShot(viewer.container.clientWidth, viewer.container.clientHeight, function (blobURL) {
                screenshot.src = blobURL;
            });
        }

        var markupSVG = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" style="position:absolute; left:0; top:0; transform:scale(1,-1); -ms-transform:scale(1,-1); -webkit-transform:scale(1,-1); -moz-transform:scale(1,-1); -o-transform:scale(1,-1); transformOrigin:0, 0; -ms-transformOrigin:0, 0; -webkit-transformOrigin:0, 0; -moz-transformOrigin:0, 0; -o-transformOrigin:0, 0; " width="510" height="960" viewBox="-531.25 -1000 1062.5 2000" cursor="crosshair" pointer-events="painted"><metadata><markup_document xmlns="http://www.w3.org/1999/xhtml" data-model-version="4"></markup_document></metadata><g cursor="inherit" pointer-events="stroke"><metadata><markup_element xmlns="http://www.w3.org/1999/xhtml" stroke-width="10.416666666666629" stroke-linejoin="miter" stroke-color="#ff0000" stroke-opacity="1" fill-color="#ff0000" fill-opacity="0" type="cloud" position="-48.958333333333336 307.2916666666667" size="418.75 377.08333333333337" rotation="0"></markup_element></metadata><path id="markup" d="M -183.75000000000003 -142.59259259259264 a 20.416666666666668 20.37037037037037 0 1 1 20.416666666666668 -20.37037037037037 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 c 2.0416666666666674 -23.819444444444446 38.79166666666668 -23.819444444444446 40.83333333333334 0 a 20.416666666666668 20.37037037037037 0 1 1 20.416666666666668 20.37037037037037 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 c 23.76543209876543 2.037037037037037 23.76543209876543 38.7037037037037 0 40.74074074074074 a 20.416666666666668 20.37037037037037 0 1 1 -20.416666666666668 20.37037037037037 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 c -2.0416666666666674 23.819444444444446 -38.79166666666668 23.819444444444446 -40.83333333333334 0 a 20.416666666666668 20.37037037037037 0 1 1 -20.416666666666668 -20.37037037037037 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 c -23.76543209876543 -2.037037037037037 -23.76543209876543 -38.7037037037037 0 -40.74074074074074 z" stroke-width="10.416666666666629" stroke="rgba(255,0,0,1)" fill="none" transform="translate( -48.958333333333336 , 307.2916666666667 ) rotate( 0 )"/></g></svg>';
    </script>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。