Skip to content

Instantly share code, notes, and snippets.

@navono navono/drawCurve.js
Created Aug 14, 2018

Embed
What would you like to do?
draw a custom control points curve in canvas
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();
}
<!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
You can’t perform that action at this time.