时间戳

首页 > 解决方案 > 如何在不使用画布的情况下在特定（边界框）位置的图像顶部添加按钮？

javascript - 如何在不使用画布的情况下在特定（边界框）位置的图像顶部添加按钮？

问题描述

我正在尝试在图像顶部添加按钮。从我的后端，我将获得一个边界框（x，y，image_width，image_height），我想用它来将按钮放置在边界框位置。

我的第一次尝试是使用画布-> 绘制一个矩形，然后添加一个事件侦听器来获取按钮。但这种方法在我看来不是很干净。

有没有其他方法可以在不使用画布的情况下实现这一点。

....
ctx.fillStyle = "red";
ctx.drawImage(img,0,0); 
ctx.fillRect(x, y, width, height);
canvas.addEventListener('click', function(evt) {
....

这是一个小提琴，它应该显示我当前的结果 jsfiddle

编辑：只是一个小编辑，按钮位置不是恒定的，它取决于我将给出的边界框。它也不是静态图像，而是直播，尽管图像大小 (640x480) 是恒定的。

解决方案 jsfiddle

标签： javascripthtmlbuttoncanvasbounding-box

解决方案

为什么你的后端需要设置按钮位置？这似乎不理想，但也许有一个很好的理由。后端会提供相对于整个文档还是单个元素的坐标？按钮是否需要随时间移动？

我的直觉是添加一个div，将您的图像设置为 div 的背景，然后将按钮放在 div 中的正确位置。你是在 vanilla JS 还是像 React 这样的框架中工作？这将影响您放置按钮的方式。

推荐阅读