问题已发布 here ，但我认为从未得到解决。每次单击“创建 SVG 矩形”按钮时，我都需要创建一个新矩形。因此绘制多个矩形。
<!DOCTYPE html>
<html lang="en">
<head><style>#test_slide { width: 500px; height: 500px; cursor: crosshair;border: solid;}</style></head><body>
<div id="test_slide"></div>
<button id="create_svg_rect" >Create SVG Rect</button>
<!--SCRIPT FILES-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" defer="defer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js" type="text/javascript" defer="defer"></script>
<script src="https://svgjs.dev/svg.draw.js/demo/svg.draw.min.js" type="text/javascript" defer="defer"></script>
<script>
document.getElementById("create_svg_rect").onclick = function() {
//SVG.on(document, 'DOMContentLoaded', function() {
var drawing = new SVG('test_slide').size('100%', '100%');
var rect = drawing.rect().attr('stroke-width',1).attr('fill','none');
drawing.on('mousedown', function(e){
rect.draw(e);
}, false);
drawing.on('mouseup', function(e){
rect.draw('stop', e);
console.log(rect.svg());
return;
}, false);
//});
};
</script>
</body></html>
最佳答案
在您的代码中，您每次单击按钮时都会创建一个全新的绘图和监听器。那不是你想要的。
相反，只需创建一个绘图 ( <svg> ) 并将监听器附加到它。
点击按钮只需要创建一个新的矩形。
为了能够在监听器中访问 rect-var，我们必须在外部作用域中定义它。单击时，我们创建一个新的矩形并保存它。在 mousedown 时我们开始绘制，在 mouseup 时我们完成。
这是工作片段:
document.addEventListener('DOMContentLoaded',() => {
let rect, drawing = new SVG('test_slide').size('100%', '100%');
drawing.on('mousedown', function(e){
rect && rect.draw(e);
});
drawing.on('mouseup', function(e){
if (rect) {
rect.draw('stop', e);
console.log(rect.svg());
rect = null;
}
});
document.getElementById("create_svg_rect").addEventListener('click', function() {
rect = drawing.rect().attr('stroke-width',1).attr('fill','none');
});
})#test_slide { width: 500px; height: 160px; cursor: crosshair;border: solid;}<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js" type="text/javascript"></script>
<script src="https://svgjs.dev/svg.draw.js/demo/svg.draw.min.js" type="text/javascript"></script>
<div id="test_slide"></div>
<button id="create_svg_rect" >Create SVG Rect</button>由于您的代码没有使用任何 jquery，我将其从代码片段中删除。
关于javascript - 使用 svg.draw.js 绘制多个矩形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55530152/