Round Corners
Take two line segments and round the corner where they meet with an arc. This function is built to be un-opinionated about its end use and can be applied to Canvas 2d, SVG, D3, or whatever applications.
Example
var roundCorners = var line = 250 1000 400 100 750 700var inset = 500 var sequence = // sequence === [segmentA, arc, segmentC]
The result
The resulting sequence using ES6 destructuring notation takes the form:
var segmentA arc segmentB =
Or explicitly it looks like:
250 1000 3178 5931 center: 4959 6228 radius: 1805 start: 33 end: 57 6519 5318 750 700
Example Usage
2d Canvas
This format lends itself to 2d canvas rendering. Here is an example of how to render the result.
{ var segmentA = sequence0 var arc = sequence1 var segmentB = sequence2 ctx ctx ctx ctx ctx ctx ctxlineWidth = 4 ctxstrokeStyle = '#fff' ctx}
See this RequireBin for a live example.
SVG
It can also be used with SVG with a few extra utility functions.
// Run this function to calculate the "d" attribute for a path. { var segmentA = sequence0 var arc = sequence1 var segmentB = sequence2 return } { return 'M' + segment00 + ',' + segment01 + ' ' + 'L' + segment10 + ',' + segment11} { // We need to compute the rotation of the arc to match the needed SVG format. var rotation = return 'A' arcradius arcradius rotation 0 1 segmentB00 segmentB01 } { return radians / MathPI * 180}
See this RequireBin for a live example.
Running the examples
- Clone the repo, or navigate to the
./node_modules/round-corner
folder of the currently installed location. - From the command line run
npm install
- SVG example: run
npm run example:svg
- Canvas example: run
npm run example:canvas