Skip to content

HtmlLayer 在容器高度设定下出现偏移问题,旧版(v2.x)无此问题 #212

@zishang520

Description

@zishang520

问题描述:
在 v5.x 版本中,当 HtmlLayer 使用时,如果外层 container 设置了内联 style="height" 或嵌套在 iframe 中,渲染的 HTML 图层(如标注)会出现垂直方向偏移。
如图所示(见截图1),该问题在旧版(v2.x)中不存在。

重现步骤:

  1. 在 HTML 页面中嵌入 dc-sdk 场景,并为其外层容器设置高度(例如 <div style="height: 95px;">);
  2. 添加一个 HtmlLayer 并绑定 DOM;
  3. 观察渲染位置出现明显偏移;
  4. 将该容器高度属性移除后,一切正常(见截图3)。

截图参考:

  • 图1:偏移示例(v5.x)
Image
  • 图2:DOM结构中有 style="height:95px" 的容器节点
Image
  • 图3:,正常效果
Image

预期行为:
HtmlLayer 应该使用 canvas 或 scene 的绝对定位进行挂载,与外部容器的高度样式无关。希望能兼容多层嵌套容器或 iframe 的情况,确保 HTML 图层位置正确。

测试版本:

  • DC-SDK v5.0.0
  • Chrome 浏览器
  • 本地测试路径:examples/html/point_html.html

可能的解决方向建议:

  • HtmlLayer 中 DOM 的定位方式由相对坐标计算改为基于 canvas 的绝对坐标映射;
  • 或在初始化时添加对容器偏移的修正逻辑(如使用 getBoundingClientRect() 计算偏移);
  • 或在文档中明确要求容器不得设置高度。(这几乎不可能)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions