Add more details to roundRect proposal #12
Conversation
|
|
||
| If `radii.length == 4` then each corner is specified, in order: top-left, top-right, bottom-right, bottom-left. | ||
|
|
||
| If `w` and `h` are both greater than or equal to 0, or if both are smaller than 0, then the primitive is drawn clockwise. Otherwise, it is drawn conterclockwise. |
There was a problem hiding this comment.
Typo: double space in "greater.than..or".
Also this [counter]clockwise thing sounds a bit open to interpretation and confusing. Wouldn't reusing a similar prose to the one for rect() be clearer? (defining which points are to be drawn in which order no matter the input's values).
I'm even wondering if I'm not missing the point and instead of just saying it should behave like current rect() it also says the radii order should be determined by this?
|
|
||
| When a value `r` in `radii` is a `double`, the corresponding corner(s) are drawn as circular arcs of radius `r`. | ||
|
|
||
| When the sum of the radii of two corners of the same edge is greater than the length of the edge, the all the radii of the rounded rectangle are scaled by a factor of len/(r1+r2). If multiple edges have this property, the scale factor of the edge with the smallest scale factor is used. This is consistent with CSS behaviour. |
There was a problem hiding this comment.
Typo: "the all the radii" -> "then all the radii"
|
|
||
| If `radius.length == 4` then each corner is specified, in order: top left, top right, bottom right, bottom left. | ||
| If any of `x`, `y`, `width` or `height` ar non-finite numbers, or if a value in radii is a non-finite number, or if a value of `radii` is a DOMPoint who `x` or `y` attributes are non-finite numbers, the roundRect aborts without throwing an exception and without adding anything to the current path. |
There was a problem hiding this comment.
Typos:
"ar" -> "are"
"who" -> "whose"
And while we're at typos, l13 also has one "Even thought" -> "Even though"
|
|
||
| When the sum of the radii of two corners of the same edge is greater than the length of the edge, the all the radii of the rounded rectangle are scaled by a factor of len/(r1+r2). If multiple edges have this property, the scale factor of the edge with the smallest scale factor is used. This is consistent with CSS behaviour. | ||
|
|
||
| If a value in `radii` is a negative number, then roudRect() throws an `IndexSizeError` DOM Exception. |
There was a problem hiding this comment.
I know it's not in CSS nor even in Skia yet, but what about allowing concave angles? Would that be too much overhead?
As a web-author that sounds to me like something that could be useful, and I must admit I was a bit surprised / disappointed not later than yesterday when I tried to set a negative radius or DOMPoint going inward and saw it didn't work...
| interface mixin CanvasPath { | ||
| // all doubles are unrestricted. | ||
| void roundRect(double x, double y, double w, double h, sequence<double> radius); | ||
| void roundRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h, sequence<(unrestricted double or DOMPoint)> radii); | ||
| }; | ||
| ``` | ||
|
|
||
| `radius` specifies the radius of corners. Each corner is represented by a single radius. |
No description provided.