如何在HTML画布上使用拖放功能绘制选择矩形？

Question

如何在HTML画布上使用拖放功能绘制选择矩形？

javascripthtmldrag-and-drophtml5-canvasselection

6

我想在HTML画布上绘制一个选择矩形（通过鼠标拖放，就像MS Paint一样）。

下面的代码片段有效，但需要使用两个不同的画布。

问题：如何在单个画布上实现此操作，以便稍后可以更改画布的图像而不必删除选择矩形？

我们应该保留两个不同的画布吗（如果是这样，如何使#2完全覆盖第一个画布，而不使用absolute定位）？
还是说可以通过单个画布以更简单的方式实现？（使用ctx.globalCompositeOperation = "source-over";或类似方法）

var c1 = document.getElementById("c1"), c2 = document.getElementById("c2");
var ctx1 = c1.getContext("2d"), ctx2 = c2.getContext("2d");
ctx2.setLineDash([5, 5]);
var origin = null;
window.onload = () => { ctx1.drawImage(document.getElementById("img"), 0, 0); }
c1.onmousedown = e => { origin = {x: e.offsetX, y: e.offsetY}; };
window.onmouseup = e => { origin = null; };
c1.onmousemove = e => { 
    if (!!origin) { 
        ctx2.strokeStyle = "#ff0000";
        ctx2.clearRect(0, 0, c2.width, c2.height);
        ctx2.beginPath();
        ctx2.rect(origin.x, origin.y, e.offsetX - origin.x, e.offsetY - origin.y); 
        ctx2.stroke(); 
    } 
};

#img { display: none; }
#c1 { border: 1px solid green; }
#c2 { border: 1px solid blue; }

<img id="img" src="https://i.imgur.com/okSIKkW.jpg">
<canvas id="c1" height="200" width="200"></canvas>
<canvas id="c2" height="200" width="200"></canvas>

- Basj

2个回答

1

可能有一个更好的解决方案，只使用一个<canvas>和多个图层（如果有的话，请随时发布另一个答案），但最终我使用了一种类似于html5 - canvas element - Multiple layers的方法，使用两个画布进行覆盖：

var c1 = document.getElementById("c1"), c2 = document.getElementById("c2");
var ctx1 = c1.getContext("2d"), ctx2 = c2.getContext("2d");
ctx2.setLineDash([5, 5]);
var origin = null;
window.onload = () => { ctx1.drawImage(document.getElementById("img"), 0, 0); }
c2.onmousedown = e => { origin = {x: e.offsetX, y: e.offsetY}; };
window.onmouseup = e => { origin = null; };
c2.onmousemove = e => { 
    if (!!origin) { 
        ctx2.strokeStyle = "#ff0000";
        ctx2.clearRect(0, 0, c2.width, c2.height);
        ctx2.beginPath();
        ctx2.rect(origin.x, origin.y, e.offsetX - origin.x, e.offsetY - origin.y); 
        ctx2.stroke(); 
    } 
};

#img { display: none; }
#canvas-container { position: relative; }
canvas { position: absolute; left: 0; top: 0; }
#c1 { z-index: 0; }
#c2 { z-index: 1; }

<img id="img" src="https://i.imgur.com/okSIKkW.jpg">
<div id="canvas-container">
<canvas id="c1" height="200" width="200"></canvas>
<canvas id="c2" height="200" width="200"></canvas>
</div>

- Basj

我的解决方案确实使用单个画布。 - dud3

@dud3 是的，我在另一个答案上添加了一条评论。 - Basj

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dud3 · Accepted Answer

以下解决方案使用单个画布，并在鼠标移动时重新渲染。 https://jsfiddle.net/uhtdv0mj/3/

const c1 = document.getElementById("c1");
const ctx1 = c1.getContext("2d");
    
const drawImage = () => {
    ctx1.drawImage(document.getElementById("img"), 0, 0);
};
    
const drawSelection = (e) => {
    ctx1.strokeStyle = "#000";
    ctx1.beginPath();
    ctx1.rect(origin.x, origin.y, e.offsetX - origin.x, e.offsetY - origin.y); 
    ctx1.stroke();
};
    
const clear = () => {
    ctx1.clearRect(0, 0, c1.width, c1.height);
};
    
const render = (e) => {
    clear(); 
    drawImage();
        
    if (origin) drawSelection(e);
};
    
window.onload = drawImage;
    
let origin = null;
c1.onmousedown = e => { origin = {x: e.offsetX, y: e.offsetY}; };
c1.onmouseup = e => { origin = null; render(e); };
c1.onmousemove = render;