准确定位悬停在画布元素上的文本字段
[英]Accurately position text fields hovering over canvas elements
问题描述
我有两个并排的画布（以及一些“隐藏的”画布）（我希望并排保持这种方式）。 当用户缩小浏览器窗口时，我正试图找到一种方法让它们保持居中，而不是换行。 但是有一个问题：我还想通过文本字段和下拉菜单选择来收集用户信息。 文本字段和菜单选择需要看起来像是画布环境的一部分。 我希望它们完全悬停......精确地......在画布上看起来像是画布艺术的一部分。 但是，保持画布居中并将相对和绝对位置应用于文本字段和菜单已被证明是棘手的。 我尝试了一个“父母”DIV并让其他DIV成为绝对的父母...但我得到了意想不到的结果。 如果它有助于使定位更容易，我可以让画布向左冲洗。 见代码。
#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>
1 个解决方案
解决方案1
0 已采纳 2019-03-24 15:50:04
您的父div与画布容器（ #centerAll ）的宽度不匹配。 我将父div设为绝对值，并使宽度等于画布容器。 然后浮动绝对div并使用text-align属性根据canvas元素将输入元素向左或向右居中。
<!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>
将鼠标悬停在chartjs饼图上时，画布填充文本消失
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.