How to use the bezier-js.default function in bezier-js
To help you get started, we’ve selected a few bezier-js examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
vasturiano / force-graph / src / canvas-force-graph.js View on Github 
if (!arrowLength || arrowLength < 0) return;
const start = link.source;
const end = link.target;
if (!start.hasOwnProperty('x') || !end.hasOwnProperty('x')) return; // skip invalid link
const startR = Math.sqrt(Math.max(0, getNodeVal(start) || 1)) * state.nodeRelSize;
const endR = Math.sqrt(Math.max(0, getNodeVal(end) || 1)) * state.nodeRelSize;
const arrowRelPos = Math.min(1, Math.max(0, getRelPos(link)));
const arrowColor = getColor(link) || 'rgba(0,0,0,0.28)';
const arrowHalfWidth = arrowLength / ARROW_WH_RATIO / 2;
// Construct bezier for curved lines
const bzLine = link.__controlPoints && new Bezier(start.x, start.y, ...link.__controlPoints, end.x, end.y);
const getCoordsAlongLine = bzLine
? t => bzLine.get(t) // get position along bezier line
: t => ({ // straight line: interpolate linearly
x: start.x + (end.x - start.x) * t || 0,
y: start.y + (end.y - start.y) * t || 0
});
const lineLen = bzLine
? bzLine.length()
: Math.sqrt(Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2));
const posAlongLine = startR + arrowLength + (lineLen - startR - endR - arrowLength) * arrowRelPos;
const arrowHead = getCoordsAlongLine(posAlongLine / lineLen);
const arrowTail = getCoordsAlongLine((posAlongLine - arrowLength) / lineLen);break;
}
case 'bezierCurveTo': {
let bez = new Bezier(currentPoint.x, currentPoint.y, args[0], args[1],
args[2], args[3], args[4], args[5]);
length += bez.length();
currentPoint.x = args[4];
currentPoint.y = args[5];
pushBezier_(bez);
expandBoundsToBezier_(bez);
break;
}
case 'quadraticCurveTo': {
let bez = new Bezier(currentPoint.x, currentPoint.y, args[0], args[1], args[2], args[3]);
length += bez.length();
currentPoint.x = args[2];
currentPoint.y = args[3];
pushBezier_(bez);
expandBoundsToBezier_(bez);
break;
}
case '__arc__': {
let [currentPointX, currentPointY,
rx, ry, xAxisRotation,
largeArcFlag, sweepFlag,
tempPoint1X, tempPoint1Y] = args;
if (currentPointX == tempPoint1X && currentPointY == tempPoint1Y) {
// degenerate to point (0 length)const start = link.source;
const end = link.target;
if (!start.hasOwnProperty('x') || !end.hasOwnProperty('x')) return; // skip invalid link
const particleSpeed = getSpeed(link);
const photons = link.__photons || [];
const photonR = Math.max(0, getDiameter(link) / 2) / Math.sqrt(state.globalScale);
const photonColor = getColor(link) || 'rgba(0,0,0,0.28)';
ctx.fillStyle = photonColor;
// Construct bezier for curved lines
const bzLine = link.__controlPoints
? new Bezier(start.x, start.y, ...link.__controlPoints, end.x, end.y)
: null;
let cyclePhotonIdx = 0;
let needsCleanup = false; // whether some photons need to be removed from list
photons.forEach(photon => {
const singleHop = !!photon.__singleHop;
if (!photon.hasOwnProperty('__progressRatio')) {
photon.__progressRatio = singleHop ? 0 : cyclePhotonIdx / numCyclePhotons;
}
!singleHop && cyclePhotonIdx++; // increase regular photon index
photon.__progressRatio += particleSpeed;
if (photon.__progressRatio >=1) {}
if (rx == 0 || ry == 0) {
// degenerate to line
length += dist_(currentPointX, currentPointY, tempPoint1X, tempPoint1Y);
expandBounds_(tempPoint1X, tempPoint1Y);
return;
}
let bezierCoords = arcToBeziers_(currentPointX, currentPointY,
rx, ry, xAxisRotation,
largeArcFlag, sweepFlag,
tempPoint1X, tempPoint1Y);
for (let i = 0; i < bezierCoords.length; i += 8) {
let bez = new Bezier(currentPoint.x, currentPoint.y,
bezierCoords[i + 2], bezierCoords[i + 3],
bezierCoords[i + 4], bezierCoords[i + 5],
bezierCoords[i + 6], bezierCoords[i + 7]);
length += bez.length();
currentPoint.x = bezierCoords[i + 6];
currentPoint.y = bezierCoords[i + 7];
expandBoundsToBezier_(bez);
}
currentPoint.x = tempPoint1X;
currentPoint.y = tempPoint1Y;
break;
}
}
});commands.forEach(({command, args}) => {
switch (command) {
case 'moveTo': {
// start new sub-path
currentSubPath = [];
subPaths.push(currentSubPath);
lastMovePoint = {x:args[0], y:args[1]};
currentPoint.x = args[0];
currentPoint.y = args[1];
expandBounds_(args[0], args[1]);
break;
}
case 'lineTo': {
length += MathUtil.dist(args[0], args[1], currentPoint.x, currentPoint.y);
pushBezier_(new Bezier(
currentPoint.x, currentPoint.y,
args[0], args[1],
args[0], args[1]));
currentPoint.x = args[0];
currentPoint.y = args[1];
expandBounds_(args[0], args[1]);
break;
}
case 'closePath': {
if (lastMovePoint) {
length += MathUtil.dist(lastMovePoint.x, lastMovePoint.y, currentPoint.x, currentPoint.y);
pushBezier_(new Bezier(
currentPoint.x, currentPoint.y,
lastMovePoint.x, lastMovePoint.y,
lastMovePoint.x, lastMovePoint.y));if (rx == 0 || ry == 0) {
// degenerate to line
length += MathUtil.dist(currentPointX, currentPointY, tempPoint1X, tempPoint1Y);
expandBounds_(tempPoint1X, tempPoint1Y);
currentPoint.x = tempPoint1X;
currentPoint.y = tempPoint1Y;
return;
}
let bezierCoords = arcToBeziers_(currentPointX, currentPointY,
rx, ry, xAxisRotation,
largeArcFlag, sweepFlag,
tempPoint1X, tempPoint1Y);
for (let i = 0; i < bezierCoords.length; i += 8) {
let bez = new Bezier(currentPoint.x, currentPoint.y,
bezierCoords[i + 2], bezierCoords[i + 3],
bezierCoords[i + 4], bezierCoords[i + 5],
bezierCoords[i + 6], bezierCoords[i + 7]);
length += bez.length();
currentPoint.x = bezierCoords[i + 6];
currentPoint.y = bezierCoords[i + 7];
expandBoundsToBezier_(bez);
pushBezier_(bez);
}
currentPoint.x = tempPoint1X;
currentPoint.y = tempPoint1Y;
break;
}
}
});case 'lineTo': {
length += MathUtil.dist(args[0], args[1], currentPoint.x, currentPoint.y);
pushBezier_(new Bezier(
currentPoint.x, currentPoint.y,
args[0], args[1],
args[0], args[1]));
currentPoint.x = args[0];
currentPoint.y = args[1];
expandBounds_(args[0], args[1]);
break;
}
case 'closePath': {
if (lastMovePoint) {
length += MathUtil.dist(lastMovePoint.x, lastMovePoint.y, currentPoint.x, currentPoint.y);
pushBezier_(new Bezier(
currentPoint.x, currentPoint.y,
lastMovePoint.x, lastMovePoint.y,
lastMovePoint.x, lastMovePoint.y));
currentPoint.x = lastMovePoint.x;
currentPoint.y = lastMovePoint.y;
}
break;
}
case 'bezierCurveTo': {
let bez = new Bezier(currentPoint.x, currentPoint.y, args[0], args[1],
args[2], args[3], args[4], args[5]);
length += bez.length();
currentPoint.x = args[4];
currentPoint.y = args[5];
pushBezier_(bez); .map(bez => new Bezier(bez.points.map(p => pointTransformerFn(p))))
.map(bez => bez.project(point))firstPoint = null;
break;
}
case 'bezierCurveTo': {
let bez = new Bezier(currentPoint.x, currentPoint.y, args[0], args[1],
args[2], args[3], args[4], args[5]);
length += bez.length();
currentPoint.x = args[4];
currentPoint.y = args[5];
expandBoundsToBezier_(bez);
break;
}
case 'quadraticCurveTo': {
let bez = new Bezier(currentPoint.x, currentPoint.y, args[0], args[1], args[2], args[3]);
length += bez.length();
currentPoint.x = args[2];
currentPoint.y = args[3];
expandBoundsToBezier_(bez);
break;
}
case '__arc__': {
let [currentPointX, currentPointY,
rx, ry, xAxisRotation,
largeArcFlag, sweepFlag,
tempPoint1X, tempPoint1Y] = args;
xAxisRotation *= Math.PI / 180;
if (currentPointX == tempPoint1X && currentPointY == tempPoint1Y) {bezier-js
A javascript library for working with Bezier curves
