Есть два "инструмента": при клике на line - выбирается инструмент линия, при клике на circle - выбирается инструмент окружность.
После этого пользователь, в зависимости от своего выбора, может нарисовать либо линию, либо окружность (нажать и удерживать ЛКМ, подвинуть мышь и отпустить)
Подскажите, пожалуйста, как это реализовать?
HTML (файл называется draw.html)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="draw.css">
<title>Document</title>
</head>
<body>
<div id="tools">
<a id="lineTool" href="#">line</a>
<a id="circleTool" href="#">circle</a>
</div>
<div id="drawing"></div>
<script src="jquery-3.3.1.min.js"></script>
<script src="svg.min.js"></script>
<script src="draw.js"></script>
</body>
</html>
CSS (файл называется draw.css)
* {
margin 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
background-color: #fafafa;
}
#drawing {
width: 100%;
height: 100%;
}
JavaScript + SVG.js (файл называется draw.js)
SVG.on(document, 'DOMContentLoaded', function() {
if (SVG.supported) {
var draw = SVG('drawing');
//код должен быть написан здесь
} else {
alert('SVG not supported');
}
});
ссылка на SVG.js: официальный сайт