CODEWITHSUNDEEP
javascripthtmlcss
IvanIvanow
IvanIvanow

Reputation: 13

Need to dynamically cut corners on rectangle using Javascript

I have a problem. I am creating the form where the user can enter coordinates x1,x2,y1,y2 for each corner to cut it top left, top right, bottom left, bottom right. Those coordinates are in millimeters and after the user enters data He should see the following image:

enter image description here

The racktangle itself I presented using div

 <div id='detailPlot' style=' position: relative;  width:300px;height:300px;background-color:white;border:1px solid black;   ' ></div>

Can I cut those corners on that using Javascript and show result there?

Upvotes: 0

Views: 115

Answers (1)

Eddie Reeder
Eddie Reeder

Reputation: 835

I'd use SVG Path instead of the <div> element. You can draw lines between defined coordinates using it's d property:

<svg id="detailPlot" height="150px" width="150px">  
   <path d="M0 0 L100 0 L150 100 L150 150 L0 150 L0 0" stroke="black" stroke-width="1" fill="none" />
</svg>

Using javascript you'll be able to change it's d property at will:

var pathElement= document.querySelectorAll("path")[0];
pathElement.d = "M0 0 L300 0 L300 300 L0 300 L0 0";    // draw a rectangle

Upvotes: 2

Related Questions