Autodesk Forge 查看器的初始大小是 window 而不是 div

Question

我正在使用 forge headless viewer 在加载页面时使用此代码来初始化它

Autodesk.Viewing.Initializer(options, function onInitialized(){
    viewerApp = new Autodesk.Viewing.ViewingApplication('MyViewerDiv');
    //viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D);
    viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Viewer3D);
    viewerApp.loadDocument(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
});

它被移入以下html代码中的div

<div style="width:80%; float:right; ">
    <div id="MyViewerDiv" style="background-color: #0f0; width:600px; display:inline-block; ">A</div>
</div>
<div style="background-color: #eee; min-height: 60px; width:600px; ">
    <button id="MyPrevButton" class="MyNavButton">Previous</button>
    <button id="MyNextButton" class="MyNavButton">Next</button> 
</div>
<div id="lijst" style="background-color: #ddd; width:20%; float:left;"></div>

理想情况下，我希望 id="lijst" 的 div 位于查看器的右侧，但我运行遇到了一个我一直找不到的问题

的解决方案

在初始化期间计算查看器 canvas 的大小并将其设置为整个 window 的大小，而不是 div id=[=31 的大小=]

这是可以理解的，因为在创建查看器 canvas 之前，html 解析器无法计算 div 的大小（在此之后它仍然是空的canvas 已创建）。

结果是查看器超出了 window 的大小。浏览器会创建一个滚动条，如果您一直向右滚动，额外的菜单就会恰好从屏幕向左滚动。实际上，div 的大小已设置为 100% 而不是 80%。

在垂直方向上也是如此。带有两个按钮的 div 被放置在 window 的顶部，即使它被放置在带有查看器 canvas 的 div 下方（这再次有意义，因为当布局引擎计算查看器的位置 div 仍然是空的并且高度为 0)

如何在创建查看器 canvas 后调整它的大小，使整个显示适合屏幕而不需要滚动条（并允许更灵敏的 UI)?

Answer 1

可能有更多方法可以解决这个问题，但您可能要考虑使用 position: absolute，例如：

CSS:

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}

#viewer {
    position: absolute;
    width: 80%;
    height: 100%;
}

#sidebar {
    position: absolute;
    right: 0;
    width: 20%;
    height: 100%;
}

HTML:

<body>
    <div id="viewer"></div>
    <div id="sidebar"></div>
</body>

Autodesk Forge 查看器的初始大小是 window 而不是 div

Autodesk forge viewer initial size is window not the div

html

javascript

autodesk-viewer

autodesk-forge