DrawImg函数将前一个img放到画布上

Question

嗨，我建立了一个绘图应用程序，当你在上面画东西时，你可以选择建议图片将其添加到画布中。但是有一个问题，例如我有三个建议的图像，当用户点击#img1没有发生，如果继续绘图，第二次点击#img2，#img1是放在画布上。因为我确信问题是与DrawPicture函数(包含绘图的函数)，我将把相关的代码放在这里，这样你就可以更容易地调试它。

my Three img and canvas Code:

<div>
<img
id={"img1"}
src={Butterfly}
onClick={
(event) => {
takePicture(event);
DrawPicture();
setPointsId(elements.length)
}
}
style={{ cursor: "pointer" }}
alt={"Img1"}
/>
<img
id={"img2"}
src={Butterfly2}
onClick={
(event) => {
takePicture(event);
DrawPicture();
setPointsId(elements.length)
}
}
style={{ cursor: "pointer" }}
alt={"Img2"}
/>
<img
id={"img3"}
src={Butterfly3}
onClick={
(event) => {
takePicture(event);
DrawPicture();
setPointsId(elements.length)
}
}
style={{ cursor: "pointer" }}
alt={"img3"}
/>
</div>
<canvas
onMouseDown={startDrawing}
onMouseUp={endDrawing}
onMouseMove={draw}
onMouseLeave={endDrawing}
ref={canvasRef}
width={width}
height={window.innerHeight}
/>
</div>

我的函数代码:

function takePicture(event) {
setImgSRC(event.target.src);
}
function DrawPicture() {

var Se_image = new Image();
Se_image.onload = start;
Se_image.src = ImgSRC;

Se_image.onerror = function(){ alert(Se_image.src+"failed to load") }
function start() {
ctxRef.current.drawImage(Se_image, POx1, POY1, widthSize, heightSize);
}
}

变量POx1, POY1, widthSize, heightSize

Answer 1

你可以使用这个作弊代码，双击把当前的img放到画布上

setCountClick(CountClick + 1); // it's a state i decleard it with useState
var Se_image = new Image();

Se_image.src = ImgSRC;

Se_image.onload = function () {
if (CountClick === 2) {
ctxRef.current.drawImage(Se_image, POx1, POY1, widthSize, heightSize);
setCountClick(1)