javascript - 如何在画布中的边界矩形底部放置一个按钮

Question

我正在将一个按钮放置在我的画布顶部，但比我在画布上绘制的边界矩形略低，我有变量bboxX, bboxY, bboxWidth，bboxHeight它是画布中边界矩形的属性。我正在使用getBoundingClientRect()获取画布的偏移量并将其添加到画布中边界框的坐标，但按钮位置不正确。如何按我想要的方式定位按钮？

这就是我想要实现的目标：

const video = <HTMLVideoElement> document.getElementById("vid");

const canvas = <HTMLCanvasElement> document.getElementById("canvas");

const ctx = canvas.getContext("2d");

ctx.drawImage(this.video, 0, 0, canvas.width,canvas.height);

ctx.strokeStyle = "#00FFFF";
ctx.lineWidth = 2;
ctx.strokeRect(bboxX, bboxY, bboxWidth, bboxHeight);

let rect = canvas.getBoundingClientRect();

let positionX = (bboxX + rect.left).toString() + "px";
let positionY = (bboxY + rect.top).toString() + "px";

document.getElementById("button").style.visibility = "visible";
document.getElementById("button").style.top = positionY;
document.getElementById("button").style.left = positionX;

canvas{
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
}

#button{
    position: absolute;
    z-index: 15;
    visibility: hidden;
}

<div>
    <button id="button">Show</button>
    <video hidden id="vid" width="300" height="300"></video>
    <canvas id="canvas"></canvas>
 </div>

标签： javascripthtmlcsscanvas

Answer 1

我会使用相对位置...
不清楚为什么canvas.getBoundingClientRect在按钮的位置上使用需要与绘制的矩形而不是整个画布对齐的按钮。

请参见下面的代码：

const canvas =  document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let bboxX = 20
let bboxY = 10
let bboxWidth = 100
let bboxHeight = 60

ctx.lineWidth = 2;
ctx.strokeRect(bboxX, bboxY, bboxWidth, bboxHeight);

let rect = canvas.getBoundingClientRect();
let positionX = (bboxX + bboxWidth/2 -25).toString() + "px";

const button = document.getElementById("button")
button.style.visibility = "visible";
button.style.left = positionX;

#button{
    visibility: hidden;
    position: relative;
    width:50px;
}

<div>
    <canvas id="canvas" width="300" height="80"></canvas>
    <br>
    <button id="button" >Show</button>    
 </div>

该代码中的关键是：
let positionX = (bboxX + bboxWidth/2 -25)
该中心将按钮与矩形对齐。

bboxX + bboxWidth/2是矩形的中心，
然后我们减去-25按钮宽度的一半。