问题描述:
在 v5.x 版本中,当 HtmlLayer 使用时,如果外层 container 设置了内联 style="height" 或嵌套在 iframe 中,渲染的 HTML 图层(如标注)会出现垂直方向偏移。
如图所示(见截图1),该问题在旧版(v2.x)中不存在。
重现步骤:
- 在 HTML 页面中嵌入
dc-sdk 场景,并为其外层容器设置高度(例如 <div style="height: 95px;">);
- 添加一个
HtmlLayer 并绑定 DOM;
- 观察渲染位置出现明显偏移;
- 将该容器高度属性移除后,一切正常(见截图3)。
截图参考:
- 图2:DOM结构中有
style="height:95px" 的容器节点
预期行为:
HtmlLayer 应该使用 canvas 或 scene 的绝对定位进行挂载,与外部容器的高度样式无关。希望能兼容多层嵌套容器或 iframe 的情况,确保 HTML 图层位置正确。
测试版本:
- DC-SDK v5.0.0
- Chrome 浏览器
- 本地测试路径:
examples/html/point_html.html
可能的解决方向建议:
- 将
HtmlLayer 中 DOM 的定位方式由相对坐标计算改为基于 canvas 的绝对坐标映射;
- 或在初始化时添加对容器偏移的修正逻辑(如使用
getBoundingClientRect() 计算偏移);
- 或在文档中明确要求容器不得设置高度。(这几乎不可能)
dc-sdk场景,并为其外层容器设置高度(例如<div style="height: 95px;">);HtmlLayer并绑定 DOM;style="height:95px"的容器节点examples/html/point_html.htmlHtmlLayer中 DOM 的定位方式由相对坐标计算改为基于 canvas 的绝对坐标映射;getBoundingClientRect()计算偏移);