当画布未定位为页面上的顶部元素时，菜单位置出现偏离

问题描述

使用 Draw2d 和菜单选择代码 from the demo 但我没有得到预期的结果...

在演示中，菜单出现在被点击元素的右侧。在我的版本中，菜单出现在顶部。

这似乎是因为我在画布（标题等）正上方有一些 HTML。相反，如果画布位于页面的最顶部，则效果很好。

解决方法

找到了解决此问题的方法。

这都是关于附加菜单的 HTML 和相对定位的位置

在演示中，画布上方没有任何 HTML（在网站上它是一个 iframe，所以从画布的角度来看，您在上面看到的并不是真正存在的）所以它可以工作。

该演示具有误导性，因为在代码中，他们在 body 标记中添加了 HTML 菜单。他们可以这样做的原因很简单，因为他们的页面仅由两个元素组成：主体和画布。

在我的情况下，也可能是你的情况，这样做会导致添加离画布本身很远很远的 HTML 菜单，从而导致位置偏离！

他们所做的是：

$("body").append(this.overlay);

您应该做的是将 HTML 菜单 (this.overlay) 附加为画布的兄弟。不要将它添加到画布本身中。如果这样做，您将不再捕获点击事件。

您的 HTML 应如下所示：

<div id="some-parent">
  <div id="gfx_holder">THE CANVAS</div>
</div>

并将代码更新为

$("#some-parent").append(this.overlay);

但是还没完呢。由于使用 position: absolute 添加菜单，您需要将父容器设置为 position: relative，以便子容器的绝对位置将变为相对于父页面而非网页。这是 CSS... 你知道...
此外，父画布的大小应该与子画布的大小完全相同！

所以 HTML 应该演变成这样：

<div id="some-parent" style="position: relative; height: 800px">
  <div id="gfx_holder" style="height: 800px">THE CANVAS</div>
</div>

当添加菜单的 HTML 时，它在运行时应该是这样的：

<div id="some-parent" style="position: relative; height: 800px">
  <div id="gfx_holder" style="height: 800px">THE CANVAS</div>
  <div class="overlayMenu" style="top: 230px; left: 197.391px;">⊕</div>
</div>

看到了吗？ overlayMenu 具有 position: absolute 允许它在正确的位置呈现...

高频

canvas draw2d javascript