I'm designing a web interface for a robotic arm, and I need a way to draw lines between points in a HTML div element, given a start (x, y) and a end (x, y). I'd rather not use a canvas, because I need the lines to be elements themselves (They should have onclick events and CSS styles). Maybe something with SVG? Note that this is different from questions like this, as that question was trying to connect elements, whereas I'm trying to connect points inside an element.
<div id="somediv">
<!--This div is 100px * 100px, I need to draw a line 4px thick from (23, 24) to (87, 96)-->
</div>
It would actually be preferable if I could create the line based on a single point and angle, but the math to convert that to two points is easy.
The basic idea here is to place the SVG on top of the DIV element, make the DIV position relative, and the SVG absolute to do this. And then you can draw the SVG to any x/y point you like.
And as expected, events like click work with SVG, try clicking the line, and double clicking the yellow box.
example ->
document.querySelector('#theline').
addEventListener('click',
() => alert("line clicked"));
document.querySelector('#somediv').
addEventListener('dblclick',
() => alert('box double clicked'));#somediv {
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
}
#svg {
position: absolute;
top: 0px;
left: 0px;
}<div id="somediv">
<!--This div is 100px * 100px, I need to draw a line 4px thick from (23, 24) to (87, 96)-->
<svg id="svg" width="100" height="100">
<line
style="cursor:pointer"
id="theline"
x1="23" y1="24" x2="87" y2="96" stroke="black" stroke-width="4"/>
</svg>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments