Created
August 14, 2018 11:47
-
-
Save navono/f0e5bb599b499d33b47f31bb3389a073 to your computer and use it in GitHub Desktop.
draw a custom control points curve in canvas
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function drawCurve(points, tension) { | |
| var ctx = layer.getContext()._context; | |
| ctx.beginPath(); | |
| ctx.moveTo(points[0].x, points[0].y); | |
| var t = (tension != null) ? tension : 1; | |
| for (var i = 0; i < points.length - 1; i++) { | |
| var p0 = (i > 0) ? points[i - 1] : points[0]; | |
| var p1 = points[i]; | |
| var p2 = points[i + 1]; | |
| var p3 = (i != points.length - 2) ? points[i + 2] : p2; | |
| var cp1x = p1.x + (p2.x - p0.x) / 6 * t; | |
| var cp1y = p1.y + (p2.y - p0.y) / 6 * t; | |
| var cp2x = p2.x - (p3.x - p1.x) / 6 * t; | |
| var cp2y = p2.y - (p3.y - p1.y) / 6 * t; | |
| ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y); | |
| } | |
| ctx.stroke(); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://cdn.rawgit.com/konvajs/konva/2.0.3/konva.js"></script> | |
| <meta charset="utf-8"> | |
| <title>Konva Simple Line Demo</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| background-color: #F0F0F0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| <script> | |
| var width = window.innerWidth; | |
| var height = window.innerHeight; | |
| var stage = new Konva.Stage({ | |
| container: 'container', | |
| width: width, | |
| height: height | |
| }); | |
| stage.on('contentContextmenu', function(evt) { | |
| console.log('stage'); | |
| evt.evt.preventDefault(); | |
| }); | |
| var layer = new Konva.Layer(); | |
| var redLine = new Konva.Line({ | |
| // points: [5, 70, 140, 23, 250, 60, 300, 20, 200, 200, 300, 100, 500, 500], | |
| points: [50, 50, 100, 100, 150, 50, 200, 100, 250, 50, 300, 100, 350, 50], | |
| stroke: 'red', | |
| strokeWidth: 15, | |
| lineCap: 'round', | |
| lineJoin: 'round', | |
| // bezier: true, | |
| }); | |
| layer.add(redLine); | |
| // add the layer to the stage | |
| stage.add(layer); | |
| function drawCurve(points, tension) { | |
| var ctx = layer.getContext()._context; | |
| ctx.beginPath(); | |
| ctx.moveTo(points[0].x, points[0].y); | |
| var t = (tension != null) ? tension : 1; | |
| for (var i = 0; i < points.length - 1; i++) { | |
| var p0 = (i > 0) ? points[i - 1] : points[0]; | |
| var p1 = points[i]; | |
| var p2 = points[i + 1]; | |
| var p3 = (i != points.length - 2) ? points[i + 2] : p2; | |
| var cp1x = p1.x + (p2.x - p0.x) / 6 * t; | |
| var cp1y = p1.y + (p2.y - p0.y) / 6 * t; | |
| var cp2x = p2.x - (p3.x - p1.x) / 6 * t; | |
| var cp2y = p2.y - (p3.y - p1.y) / 6 * t; | |
| ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y); | |
| } | |
| ctx.stroke(); | |
| } | |
| drawCurve([{x:50, y:50}, {x:100, y:100}, {x:150, y:50}, {x:200, y:100}, {x:250, y:50}, {x:300, y:100}, {x:350, y:50}]); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment