Как добавить кнопку в верхней части изображения в определенной позиции (ограничивающей рамке), не используя холст?

Question

Я пытаюсь добавить кнопку (кнопки) поверх изображения.От моего бэкэнда мне дадут ограничивающий прямоугольник (x, y, image_width, image_height), который я хочу использовать для размещения кнопки в ограничивающем прямоугольнике.

Моей первой попыткой было использование canvas-> Нарисуйте прямоугольник, а затем добавьте прослушиватель событий, чтобы получить кнопку.Но этот метод, на мой взгляд, не очень чистый.

Есть ли другой способ добиться этого без использования canvas.

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

Вот скрипка, которая должна показывать мой текущий результат jsfiddle

Редактировать: Небольшое редактирование, положение кнопки не является постоянным, оно зависит от ограничивающего прямоугольника, который мне будет дан.Это также не статичное изображение, а прямая трансляция, хотя размер изображения (640x480) постоянен.

Решение jsfiddle

Answer 1

Зачем вашему бэкэнду нужно установить положение кнопки?Это кажется неидеальным, но, возможно, есть веская причина для этого.Будет ли серверная часть предоставлять координаты относительно всего документа или отдельного элемента?Нужно ли перемещать кнопку во времени?

Мой инстинкт состоит в том, чтобы добавить div, установить изображение в качестве фона для div, а затем поместить кнопку в div в правильном месте.Вы работаете в vanilla JS или в таких фреймворках, как React?Это повлияет на то, как вы разместите кнопку.