准确定位悬停在 canvas 元素上的文本字段

Question

我有 2 个 canvas 并排（还有几个 "hidden"）（我希望并排保持这种状态）。当用户缩小浏览器 window 时，我试图找到一种方法使它们保持居中而不是环绕。但是有一个问题：我还想通过文本字段和下拉菜单选择来收集用户信息。文本字段和菜单选择需要看起来像是 canvas 环境的一部分。我希望它们精确地...精确地...悬停在 canvas(es) 上，看起来它们是 canvas 艺术的一部分。但事实证明，保持 canvases 居中并将相对和绝对位置应用于文本字段和菜单是很棘手的。我尝试了一个 "parent" DIV 并使其他 DIV 相对于父级绝对定位......但我得到了意想不到的结果。如果它有助于使定位更容易，我可以使 canvases 向左齐平。见代码。

#centerAll {
    margin-left:auto;
    margin-right:auto;
    width:1300px;
}
div.theParent {
    position: relative;
} 
div.absolute1 {
    position: absolute;
    top: 70px;
    left: 0;
    width: 90px;
    height: 20px;
}
div.absolute2 {
    position: absolute;
    top: 120px;
    left: 0;
    width: 90px;
    height: 20px;
}
div.absolute3 {
    position: absolute;
    top: 120px;
    left: 200;
    width: 90px;
    height: 20px;
}
body{ 
    background-repeat: no-repeat; 
    background-position: left;
}

<script type="text/javascript" src="javascriptFile.js"></script>

<div class="parent">
    <div class="absolute1">
        <input type="text" id="letteringText" value="one line of text">
    </div>
    
    <div class="absolute2">
        <select id="select something">
            <option value="option 1">option1</option>
            <option value="option 2">option2</option>
            <option value="option 3">option3</option>
        </select>
    </div>

    <div class="absolute3">
        <select id="select some more">
            <option value="option 1">option1</option>
            <option value="option 2">option2</option>
            <option value="option 3">option3</option>
        </select>
    </div>
</div>

<div id="centerAll">
    <canvas id="TheLeftSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas>
    <canvas id="TheRightSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas>
    <canvas id="SomeHiddenCanvas" width="300" height="300" style="display:none;"></canvas>
    <canvas id="AnotherHiddencanvas" width="300" height="300" style="display:none;"></canvas>
</div>

Answer 1

您的父级 div 与 canvas 容器 (#centerAll) 宽度不匹配。我将父 div 设置为绝对值，并使宽度等于 canvas 容器。然后浮动绝对 divs 并根据 canvas 元素使用 text-align 属性将输入元素居中在左侧或右侧。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#centerAll {
    margin-left:auto;
    margin-right:auto;
    width:1300px;
    text-align: center;
}
div.parent {
  position: absolute;
  width:1300px;
} 
div.parent:after {
content: '';
display:block;
clear:both;
}
div.absolute1, div.absolute2, div.absolute3 {
  width: 50%;
  float: left;
  box-sizing: border-box;
  text-align: right;
  padding-top: 20px;
  padding: 20px;
}
div.absolute2 {
  text-align: left;
}
div.absolute3 {
  text-align: right;
  padding-left: 50px;
}
body{ background-repeat: no-repeat; background-position: left;}
</style>
</head>
<body>
<div class="parent">

<div class="absolute1">
<input type="text" id="letteringText" value="one line of text">
</div>
<div class="absolute2">
<select id="select something">
<option value="option 1">option1</option>
<option value="option 2">option2</option>
<option value="option 3">option3</option>
</option>
</select>
</div>
<div class="absolute3">
<select id="select some more">
<option value="option 1">option1</option>
<option value="option 2">option2</option>
<option value="option 3">option3</option>
</select>
</div>
</div>

<div id="centerAll">
<canvas id="TheLeftSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas>
<canvas id="TheRightSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas>
<canvas id="SomeHiddenCanvas" width="300" height="300" style="display:none;"></canvas>
<canvas id="AnotherHiddencanvas" width="300" height="300" style="display:none;"></canvas>

<script type="text/javascript" src="javascriptFile.js"></script>
</div>

</body>
</html>

准确定位悬停在 canvas 元素上的文本字段

Accurately position text fields hovering over canvas elements

html

javascript

css

textfield

html5-canvas