在画布上的精确位置创建输入文本字段?

2024-04-04

Canvas 可以绘制文本,但无法创建输入文本字段。这意味着必须在 html 中执行此操作,但是如何才能确保将该文本字段准确定位在您想要的位置呢?

我希望能够在运行时以编程方式执行此操作。


创建以下 HTML 结构以将输入框放置在画布上。

<div id="container" style="width:500px; height:500px; position:relative;">
    <canvas id="drawing-surface" width="500px" height="500px"></canvas>
    <input type="text" style="position:absolute; left=?; top=?;" />
</div>

希望这能解决您的问题。代替left=? and top=?具有适当的职位。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在画布上的精确位置创建输入文本字段? 的相关文章

  • 在气球内显示带有照片的多个地标的最佳做法是什么?

    我有一个项目如下 从手机上拍摄几张照片 将照片保存在网络系统中 然后将照片显示在其中的谷歌地球上 我读过很多文章 但它们都使用 fetchKml 我读过的一篇好文章是使用 php 但使用 fetchKml 我不知道是否可以使用 parseK
  • Bootstrap 4:卡片作为具有相同高度和宽度的网格

    我正在尝试在具有相同高度和宽度的网格中订购卡片 这些卡片将有不同的内容和不同的尺寸 每行也应该有 3 个 每行的高度可以不同 但 行内的高度应该相同 整个网格中每张卡片的宽度应该相同 div class container div clas
  • 未捕获的安全错误:阻止了具有原点的框架...访问具有原点的框架

    我已经为 SAP 解决方案 无论什么 制作了一个组件 该组件通过 iframe 嵌入到报告中 在 SAP 平台 BO 上部署报告后 我收到此错误 在 Chrome 上 但在 IE 或 FF 上也不起作用 Uncaught SecurityE
  • 如何在javascript中删除一组表情符号中的最后一个表情符号?

    假设我的字符串中有 3 个表情符号 字符串中没有任何空格或除表情符号之外的任何其他字符 如何删除javascript中最后一个表情符号 下面的答案不使用任何特殊的包并安全地删除最后一个表情符号 function safeEmojiBacks
  • 如何在 AWS Amplify 上运行 React/Redux 应用程序的代理

    我最近实施了Proxy 在 Express js 中 对于我的反应应用程序发出请求时隐藏 API URL 当我在本地主机上运行代理和应用程序时 它工作得非常好 现在我已准备好将我的应用程序部署到AWS 放大 我对如何让我的代理在那里运行有点
  • 无法安装js-bson

    我正在使用Windows 7 64位 尝试安装bson作为mongodb的依赖项 我收到此错误 npm WARN package json email protected cdn cgi l email protection No READ
  • 什么是闭包编译器?

    如果您不知道我在说什么 请查看以下内容 http closure compiler appspot com home http closure compiler appspot com home 这是一个 JavaScript 压缩器 在他
  • 使用 Google 地图 API 进行反向地理编码

    我正在研究 JavaScript Google Map API 版本 3 更准确地说 正在研究反向地理定位 在 的帮助下官方文档 http code google com intl fr apis maps documentation ge
  • Angular - 将焦点放在动态创建的输入字段上

    我如何将焦点添加到新创建的字段 参见到目前为止的示例 http jsfiddle net aERwc 165 http jsfiddle net aERwc 165 scope addField function console log h
  • 将罗马数字转换为阿拉伯数字--recursiv

    我是 JavaScript 新手 正在网站的帮助下学习https www jshero net koans roman1 html https www jshero net koans roman1 html 本练习是编写一个转换器 将罗马
  • JQuery 屏蔽输入插件不起作用

    我已将 JQuery Masked 输入插件添加到我的 Web 项目中 但它根本不起作用 该插件可以在这里找到 http digitalbush com projects masked input plugin http digitalbu
  • FB.getLoginStatus() 不起作用

    我正在尝试编写一段代码来检查用户是否登录 发现FBJS API中有一个内置方法 叫做getLoginStatus 我已经在html中实现了它 但出于某种原因 getLoginStatus 内部的alert 不会被触发 我也尝试在 init
  • Google 折线图添加对象数组

    我有一个通过解析 JSON 字符串创建的对象数组 var measurementData Html Raw JsonConvert SerializeObject this Model Item1 var stringifiedData J
  • HTML 文本框,自动突出显示文本

    我将如何制作一个包含预先存在的文本的文本框 当用户在其中单击时 其中的所有文本都会突出显示 例如 YouTube 在其视频上使用嵌入代码的文本框的方式相同 谢谢 如果我正确理解你的问题 你可以使用一些javascript 未经测试的代码
  • 如何使用 Javascript 从 Chrome iOS 下载 blob 文件?

    如何使用 Javascript 从 Chrome iOS 下载 blob 文件 我正在从 iOS 下载文件 pdf excel txt png iOS 没有文件系统 这对下载来说是一个问题 我创建了一个代码 根据操作系统和导航器 如果需要
  • 为什么-标签没有关闭

    这是一个普遍问题 我的教授都无法回答 为什么我不必关闭 HTML 中的标签 所有其他标签都必须关闭 例如 or 那么为什么不呢 首先 它根本不是一个标签 在名义上基于 SGML 或 XML 的 HTML 版本中 它是文件类型声明 它具有在
  • 为什么 [].push([]) 返回 1? [复制]

    这个问题在这里已经有答案了 为什么这会返回 1 push outputs 1 push 返回数组的新长度 one push two returns 2 array length is 2 one two push something ret
  • 将响应式网格布局转换为 Plotly Dash

    我是一个非常活跃的 Dash 用户 我开始发现 Dash 使用中存在很多限制 并且我意识到有关如何将组件转换为 Dash 的信息 内容绝对有限 并且示例过时且非常简单 并且我对 Javascript 或 React 几乎没有任何了解 我完全
  • IE 中带有“删除”方法的 jQuery.ajax 问题

    我有一个页面 用户可以使用按钮编辑各种内容并选择触发 ajax 调用 特别是 一个操作会导致远程调用一个 url 其中包含一些数据和 放置 请求 这 因为我使用的是宁静的 Rails 后端 会触发我的更新操作 我还有一个删除按钮 它调用相同
  • 类型错误:无法读取未定义的属性“长度” - 使用安全帽部署时

    我在尝试在安全帽开发链上部署模拟合约时收到以下错误 我正在关注 使用 JavaScript 学习区块链 Solidity 和全栈 Web3 开发 Patrick Collins 在 FreeCodeCamp YT 频道上的 32 小时课程

随机推荐

  • 与 SVN 上游同步工作[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我正在开发一个使用开源项目代码的项目 要求之一是将尽可能多的代码推回到上游 远程项目正在使用 Subversion 不是很好 我当前的
  • 为什么我不能转换 ref 参数?

    我有一个带有 ref 控件类型参数的方法 我想通过传递 ref 按钮类型参数来调用该方法 那么编译器不接受这一点 我必须将引用控件类型更改为引用按钮类型 Why 因为这会带来很多问题 public void DoDarkMagic ref
  • 克隆 MongoDB 中的集合

    我想克隆 MongoDB 集合并将其以不同的名称保存在同一服务器上 例如 现在我有以下集合 demo1 categories demo1 users 和 demo2 users 我想要一个与 demo1 categories 相同的 dem
  • 如何转义双引号作为 NUnit TestCase 的参数?

    我尝试为用 VB net 编写的 NUnit 测试编写以下 TestCase
  • 如何将同义词词典添加到mysql全文搜索?

    这样 如果我搜索术语 男士 术语 绅士 就会匹配 我试过这个 SELECT FROM cart product WHERE MATCH product name product description product brand metal
  • AppSync BatchResolver AssumeRole 错误

    我正在尝试使用新的 DynamoDB BatchResolvers 写入 AppSync 解析器中的两个 DynamoDB 表 当前使用 Lambda 函数来执行此操作 但是 在查看 CloudWatch 日志时 我收到以下权限错误 Use
  • Patindex() 函数的用法

    我在用patindex用于 MD 或 DO 的模式搜索 下面的语句返回3 我是否以错误的方式使用它 或者是否有其他检查条件的方法 select PATINDEX MD DO FHoisegh MD select T Value from v
  • angular2 – 通过自定义管道使用全局服务

    我正在玩一点 Angular 2 到目前为止 我构建了一个拥有接口的全局服务 其他组件正在使用这个全局服务的接口 如果通过组件更改界面 则子组件的界面也会更改 现在我正在尝试通过管道来处理这个问题 但是 当我通过子组件更改接口值时 其他组件
  • QSerialPort可以读取超过512字节的数据吗?

    我想使用 QSerialPort 读取从设备传输的数据 设备每次发送一帧4000个数据字节 我尝试使用以下简单的代码 QSerialPort serialPort char receivedData 4000 int numRead 0 M
  • 将响应结果作为数组而不是 Web 服务中的对象获取

    有一个 php 应用程序将从我创建的 Web 服务中读取结果 他们想要的 xml 响应就像
  • 如何在非阻塞套接字上处理 OpenSSL SSL_ERROR_WANT_READ / WANT_WRITE

    OpenSSL 库允许使用 SSL read 从底层套接字读取数据并使用 SSL write 写入数据 这些函数可能会返回 SSL ERROR WANT READ 或 SSL ERROR WANT WRITE 具体取决于它们的 ssl 协议
  • 我在设置 Windows 服务时遇到问题

    我正在尝试设置 Windows 服务 但是当我构建设置时 输出是这样的 Build started Project TwitterService Configuration Debug Any CPU TwitterService gt C
  • 使用 myBatis 从数据库中以 byte[] 的形式获取 blob

    我在一个项目中使用 spring MyBatis 1 2 0 其中有一个查询从 Oracle 11g 数据库中的 BLOB 字段获取数据 我想以字节数组 byte 的形式检索该字段 我的代码是
  • 平均执行时间

    有没有什么好的 GNU 方法来测量某些命令行程序的平均 最坏情况 最好情况 执行时间 我有图像过滤器 未指定数量的图片 使用 bash 中的 for 循环过滤它们 到目前为止我正在使用time 但我找不到如何获取一些统计数据的方法 您可以将
  • 将 XYZ 点云转换为灰度图像

    每个人 我正在尝试使用 python 将点云 X Y Z 转换为灰度图像 我了解到灰度图像可以由 Numpy 数组生成 但我现在拥有的是一组包含 X Y 和高度的点 我想根据 X Y 和灰度值 即高度 生成灰度图像 有人能给我一个关于这个的
  • 我的驱动程序模块的内核输出奇怪的 dmesg

    从我之前的问题为什么模块加载失败 dev scull0 没有这样的设备或地址 https stackoverflow com questions 62019834 why does module failed to load dev scu
  • Flask:为什么 app.route() 装饰器应该总是在最外面?

    说吧 我有一个手工制作的 login required装饰器 from functools import wraps def login required decorated function Decorator to check if u
  • 在 Windows 中将 Boost 与 CMake 和 Visual Studio 链接的正确方法是什么?

    我正在尝试为 Visual Studio 2012 生成一些我需要的 Boost 1 58 库 chrono 正则表达式和线程 并将这些库与 CMake 链接 我在 CMake 和 Visual Studio 查找或链接库时遇到了真正的问题
  • SQLite 参数替换和引号

    我有这条线工作正常 c execute select cleanseq from cleanseqs WHERE newID s name 但我想使用 SQLite 参数替换而不是字符串替换 因为我看到here http docs pyth
  • 在画布上的精确位置创建输入文本字段?

    Canvas 可以绘制文本 但无法创建输入文本字段 这意味着必须在 html 中执行此操作 但是如何才能确保将该文本字段准确定位在您想要的位置呢 我希望能够在运行时以编程方式执行此操作 创建以下 HTML 结构以将输入框放置在画布上 div