Re: [csswg-drafts] [css-shapes] Allow optional rounding parameter for `polygon()` (#9843)

> Great stuff! Not sure if this is something you have the cycles for, but it would be very useful to extract the code that does the rounding into code that we can use to experiment with the algorithm for `polygon()`.

This demo should contain the final code of the API with a lot of examples: https://codepen.io/t_afif/pen/GREaoMJ

There are a lot of code to extract the points and their radii from the variables (and also compute `calc()`).  Then this is the part that will draw the shape:

```js
   ctx.beginPath();
    ctx.moveTo(Cpoints[0][0],Cpoints[0][1]); /* draw for the first point */

    var i;
    var rr;
    for (i = 0; i < (Cpoints.length - 1); i++) { /* loop all the points */
      /* I start with a complex calculation to avoid the cases illustrated by @Loirooriol and find a maximum radius  */
      var angle = Math.atan2(Cpoints[i+1][1] - Ppoints[i][1], 
                             Cpoints[i+1][0] - Ppoints[i][0]) -
                  Math.atan2(Cpoints[i][1] - Ppoints[i][1], 
                             Cpoints[i][0] - Ppoints[i][0]);
      if (angle < 0) {
        angle += (2*Math.PI)
      }
      if (angle > Math.PI) {
        angle = 2*Math.PI - angle
      }
      var distance = Math.min(Math.sqrt((Cpoints[i+1][1] - Ppoints[i][1]) ** 2 + 
                                        (Cpoints[i+1][0] - Ppoints[i][0]) ** 2),
                              Math.sqrt((Cpoints[i][1] - Ppoints[i][1]) ** 2 + 
                                        (Cpoints[i][0] - Ppoints[i][0]) ** 2));
      rr = Math.min(distance * Math.tan(angle/2),Radius[i]); /* I use a min function to get either the specified radius or the maximum allowed */

     
      ctx.arcTo(Ppoints[i][0], Ppoints[i][1], Cpoints[i+1][0],Cpoints[i+1][1], rr); /* I draw the curve here */
    }
  /* an extra curve to get back to the initial point*/
  var angle = Math.atan2(Cpoints[0][1] - Ppoints[i][1], 
                             Cpoints[0][0] - Ppoints[i][0]) -
                  Math.atan2(Cpoints[i][1] - Ppoints[i][1], 
                             Cpoints[i][0] - Ppoints[i][0]);
   if (angle < 0) {
      angle += (2*Math.PI)
   }
   if (angle > Math.PI) {
      angle = 2*Math.PI - angle
   }
   var distance = Math.min(Math.sqrt((Cpoints[0][1] - Ppoints[i][1]) ** 2 + 
                                        (Cpoints[0][0] - Ppoints[i][0]) ** 2),
                              Math.sqrt((Cpoints[i][1] - Ppoints[i][1]) ** 2 + 
                                        (Cpoints[i][0] - Ppoints[i][0]) ** 2));
    rr = Math.min(distance * Math.tan(angle/2),Radius[i]);
    ctx.arcTo(Ppoints[i][0], Ppoints[i][1], Cpoints[0][0],Cpoints[0][1], rr);
    ctx.closePath();
```

cc @Loirooriol 

-- 
GitHub Notification of comment by Afif13
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9843#issuecomment-1948760971 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 16 February 2024 16:10:23 UTC