为啥 createjs DOMElements 不像所有其他对象一样正确定位在画布的左上角？

Posted 2023-03-05

【中文标题】为啥 createjs DOMElements 不像所有其他对象一样正确定位在画布的左上角？

【英文标题】：Why aren't createjs DOMElements positioned correctly at top left of the canvas like all other objects?为什么 createjs DOMElements 不像所有其他对象一样正确定位在画布的左上角？

【发布时间】：2016-11-08 00:40:56

【问题描述】：

（根据标题）

如果您创建一个 html 按钮并使用 createjs 将其放置在画布上：

var html = document.createElement('input');
html.type = 'button';
html.id = 'testing button';
html.value = 'test';
var DOMElement = new createjs.DOMElement(html);

var target = document.getElementById(<name of a div in your HTML>);

target.appendChild(html);

//returns the first canvas element seen in the page
var canvas = document.getElementsByTagName('canvas')[0];
var stage = new createjs.Stage(canvas);

createjs.Ticker.addEventListener("tick", function(event) 
    stage.update(event);
);

stage.addChild(DOMElement);
stage.update();

按钮将出现在画布的外部。这很可能是 HTML 和 CSS 的产物（我没有背景说明为什么会这样）；而不是在舞台上的默认位置 (0, 0)，左上角，就像所有其他 createjs DisplayObjects 一样。

【问题讨论】：

EaselJS 模块的 DOMElement 不是 CreateJS。我怀疑它应该在你的画布上放置一个 HTML 按钮。

给你："A DOMElement allows you to associate a HTMLElement with the display list."

【参考方案1】：

答案似乎与 CSS 样式有关。作为两个样式选项的简单添加，我们期望将按钮的默认位置设置在左上角 (0, 0)：

var html = document.createElement('input');
html.type = 'button';
html.id = 'testing button';
html.value = 'test';
html.style.top = 0; // <--
html.style.left = 0; // <--

这些属性根据 MDN，确定相对于上边距和左边距的位置：

对于绝对定位的元素（那些带有 position: absolute 或 位置：固定），它指定顶部/左侧之间的距离 元素的边距边缘及其包含的上/左边缘 块。

来源：Top & Left。

如果有人能就这种行为的原因和更多细节提出意见，那就太好了，正如我所说，我只是没有 CSS 或 HTML 的背景来说明原因。