Rounding a Polygon Corner in Javascript

Question

I would like to create a rounded edge for a corner where the user can specify the corner's radius and number of subdivisions. To find these new points, I will have three vectors: p, p1, & p2 and the subsequent line segments: PP1 and PP2. Desired Result

I found a post on Stack Overflow that has potential solutions, but the answers are for C# and I'm working in Javascript. I have included my interpretation of the code.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius_slider = document.getElementById("radius");
var subdivs_slider = document.getElementById("subdivs");
var generateBtn = document.getElementById("generate");
var radiusReadout = document.getElementById("radiusReadout");
var subdivReadout = document.getElementById("subdivReadout");
    

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

function DrawRoundedCorner(angularPoint, p1, p2, radius, subdivisions) {
  //Vector 1
  dx1 = angularPoint.x - p1.x;
  dy1 = angularPoint.y - p1.y;
  //Vector 2
  dx2 = angularPoint.x - p2.x;
  dy2 = angularPoint.y - p2.y;
  //Angle between vector 1 and vector 2 divided by 2
  angle = (Math.atan2(dy1, dx1) - Math.atan2(dy2, dx2)) / 2;
  // The length of segment between angular point and the
  // points of intersection with the circle of a given radius
  tan = Math.abs(Math.tan(angle));
  segment = radius / tan;
  //Check the segment
  length1 = GetLength(dx1, dy1);
  length2 = GetLength(dx2, dy2);
  length = Math.min(length1, length2);
  if (segment > length) {
    segment = length;
    radius = length * tan;
  }
  // Points of intersection are calculated by the proportion between 
  // the coordinates of the vector, length of vector and the length of the segment.
  var p1Cross = GetProportionPoint(angularPoint, segment, length1, dx1, dy1);
  var p2Cross = GetProportionPoint(angularPoint, segment, length2, dx2, dy2);
  // Calculation of the coordinates of the circle 
  // center by the addition of angular vectors.
  dx = angularPoint.x * 2 - p1Cross.x - p2Cross.x;
  dy = angularPoint.y * 2 - p1Cross.y - p2Cross.y;
  L = GetLength(dx, dy);
  d = GetLength(segment, radius);
  var circlePoint = GetProportionPoint(angularPoint, d, L, dx, dy);
  //StartAngle and EndAngle of arc
  var startAngle = Math.atan2(p1Cross.y - circlePoint.y, p1Cross.x - circlePoint.x);
  var endAngle = Math.atan2(p2Cross.y - circlePoint.y, p2Cross.x - circlePoint.x);
  //Sweep angle
  var sweepAngle = endAngle - startAngle;
  //Some additional checks
  if (sweepAngle < 0) {
    startAngle = endAngle;
    sweepAngle = -sweepAngle;
  }
  if (sweepAngle > Math.PI)
    sweepAngle = Math.PI - sweepAngle;
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#000000';
  ctx.beginPath();
  ctx.moveTo(p1.x, p1.y);
  ctx.lineTo(p1Cross.x, p1Cross.y);
  ctx.moveTo(p2.x, p2.y);
  ctx.lineTo(p2Cross.x, p2Cross.y);
  ctx.lineWidth = this.linewidth;
  ctx.strokeStyle = this.color;
  ctx.stroke();
  var left = circlePoint.x - radius;
  var top = circlePoint.y - radius;
  var diameter = 2 * radius;
  var degreeFactor = Math.PI*subdivisions;
  /*
  ctx.beginPath();
  ctx.arc(left,top,diameter,(startAngle * degreeFactor),(endAngle*degreeFactor));
  ctx.strokeStyle = "#00FF00";
  ctx.stroke();
  ctx.strokeStyle = "#000000";
  */
  //To get points of arc you can use this:
  pointsCount = Math.abs(sweepAngle * degreeFactor);
  sign = Math.sign(sweepAngle);
  points = [];
// you can remove the Math.ceil**0.5 thing and just have it as pointsCount - 1 or something.
  for (i = 0; i < pointsCount + (Math.round(subdivisions) % 2 == 0 ? 1 : 0); i++) {
    var pointX = circlePoint.x + Math.cos(startAngle + ((i/pointsCount) * sign * 2)) * radius;
    var pointY = circlePoint.y + Math.sin(startAngle + ((i/pointsCount) * sign * 2)) * radius;
    points[i] = new Point(pointX, pointY);
    ctx.beginPath();
    ctx.arc(points[i].x, points[i].y, 1, 0, 2 * Math.PI);
    ctx.fillStyle = "#00FF00";
    ctx.fill();
  }
}
function GetLength(dx, dy) {
  return Math.sqrt(dx * dx + dy * dy);
}
function GetProportionPoint(point, segment, length, dx, dy) {
  factor = segment / length;
  return new Point(point.x - dx * factor, point.y - dy * factor);
}

function randomNumber(min, max) {  
    return Math.random() * (max - min) + min; 
}  

var p = new Point(randomNumber(0,canvas.width),randomNumber(0,canvas.height));
var p1 = new Point(randomNumber(0,canvas.width),randomNumber(0,canvas.height));
var p2 = new Point(randomNumber(0,canvas.width),randomNumber(0,canvas.height));

var dotRadius = 5;
function drawAll(radius, subdivisions) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  DrawRoundedCorner(p, p1, p2, radius, subdivisions);
  ctx.font = '18px sans-serif';
  ctx.fillText('P', p.x - 20, p.y + 5);
  ctx.beginPath();
  ctx.arc(p.x, p.y, dotRadius, 0, 2 * Math.PI);
  ctx.fillStyle = "#00FF00";
  ctx.fill();
  ctx.fillStyle = "#000000";
  ctx.fillText('P1', p1.x + 10, p1.y + 6);
  ctx.beginPath();
  ctx.arc(p1.x, p1.y, dotRadius, 0, 2 * Math.PI);
  ctx.fill();
  ctx.beginPath();
  ctx.fillText('P2', p2.x + 10, p2.y + 6);
  ctx.arc(p2.x, p2.y, dotRadius, 0, 2 * Math.PI);
  ctx.fill();
}
let radiusValue = radius_slider.value;
let subdivsValue = subdivs_slider.value;
function handleSlider(){
  radiusValue = radius_slider.value;
  subdivsValue = subdivs_slider.value;
  radiusReadout.innerText = radius_slider.value;
  subdivReadout.innerText = subdivs_slider.value;
  drawAll(radiusValue, subdivsValue);
}
radius_slider.oninput = handleSlider;
subdivs_slider.oninput = handleSlider;
generateBtn.onclick = function()
{
  p = new Point(randomNumber(0,canvas.width),randomNumber(0,canvas.height));
  p1 = new Point(randomNumber(0,canvas.width),randomNumber(0,canvas.height));
  p2 = new Point(randomNumber(0,canvas.width),randomNumber(0,canvas.height));
  drawAll(radiusValue, subdivsValue);
}
drawAll(radiusValue, subdivsValue);
radiusReadout.innerText = radius_slider.value;
subdivReadout.innerText = subdivs_slider.value;

body {
  font-family: sans-serif;
  text-align: center;
}

#canvas {
  width: 150px;
  height: 150px;
  border: 1px solid rgb(200, 200, 200);
}


Radius



Subdivs

I have two questions:

Why don't the arc points consistently connect the lines in my version? They are sometimes correct, but often under/overshoot.
How would I draw the arc? I can draw the points, but I couldn't understand how to translate this to HTML Canvas:

graphics.DrawArc(pen, left, top, diameter, diameter, 
                     (float)(startAngle * degreeFactor), 
                     (float)(sweepAngle * degreeFactor));

Here is a larger version on Codepen. Thank you!

Rounding a Polygon Corner in Javascript

Answers (1)

Related Questions