How to use the bezier-js 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.
freesewing / freesewing / packages / core / src / path.js View on Github 
let lastCandidate = parseInt(chunks.length) - 1
for (let j = firstCandidate; j < lastCandidate; j++) {
let intersections = chunks[i].intersects(chunks[j])
if (intersections.length > 0) {
let intersection = intersections.pop()
let trimmedStart = chunks.slice(0, i)
let trimmedEnd = chunks.slice(parseInt(j) + 1)
let glue = new Path()
let first = true
for (let k of [i, j]) {
let ops = chunks[k].ops
if (ops[1].type === 'line') {
glue.line(intersection)
} else if (ops[1].type === 'curve') {
// handle curve
let curve = new Bezier(
{ x: ops[0].to.x, y: ops[0].to.y },
{ x: ops[1].cp1.x, y: ops[1].cp1.y },
{ x: ops[1].cp2.x, y: ops[1].cp2.y },
{ x: ops[1].to.x, y: ops[1].to.y }
)
let t = pointOnCurve(ops[0].to, ops[1].cp1, ops[1].cp2, ops[1].to, intersection)
let split = curve.split(t)
let side
if (first) side = split.left
else side = split.right
glue.curve(
new Point(side.points[1].x, side.points[1].y),
new Point(side.points[2].x, side.points[2].y),
new Point(side.points[3].x, side.points[3].y)
)
}export function curvesIntersect(fromA, cp1A, cp2A, toA, fromB, cp1B, cp2B, toB) {
let precision = 0.005 // See https://github.com/Pomax/bezierjs/issues/99
let intersections = []
let curveA = new Bezier(
{ x: fromA.x, y: fromA.y },
{ x: cp1A.x, y: cp1A.y },
{ x: cp2A.x, y: cp2A.y },
{ x: toA.x, y: toA.y }
)
let curveB = new Bezier(
{ x: fromB.x, y: fromB.y },
{ x: cp1B.x, y: cp1B.y },
{ x: cp2B.x, y: cp2B.y },
{ x: toB.x, y: toB.y }
)
for (let tvalues of curveA.intersects(curveB, precision)) {
let intersection = curveA.get(tvalues.substr(0, tvalues.indexOf('/')))
intersections.push(new Point(intersection.x, intersection.y))
}Path.prototype.shiftAlong = function(distance) {
let len = 0
let current
for (let i in this.ops) {
let op = this.ops[i]
if (op.type === 'line') {
let thisLen = op.to.dist(current)
if (len + thisLen > distance) return current.shiftTowards(op.to, distance - len)
else len += thisLen
} else if (op.type === 'curve') {
let bezier = new Bezier(
{ x: current.x, y: current.y },
{ x: op.cp1.x, y: op.cp1.y },
{ x: op.cp2.x, y: op.cp2.y },
{ x: op.to.x, y: op.to.y }
)
let thisLen = bezier.length()
if (len + thisLen > distance) return shiftAlongBezier(distance - len, bezier)
else len += thisLen
}
current = op.to
}
throw new Error(
`Error in Path.shiftAlong(): Ran out of path to shift along. Distance requested was ${distance}, path length is${this.length()}.`
)
}export function lineIntersectsCurve(start, end, from, cp1, cp2, to) {
let intersections = []
let bz = new Bezier(
{ x: from.x, y: from.y },
{ x: cp1.x, y: cp1.y },
{ x: cp2.x, y: cp2.y },
{ x: to.x, y: to.y }
)
let line = {
p1: { x: start.x, y: start.y },
p2: { x: end.x, y: end.y }
}
for (let t of bz.intersects(line)) {
let isect = bz.get(t)
intersections.push(new Point(isect.x, isect.y))
}
if (intersections.length === 0) return false
else if (intersections.length === 1) return intersections[0]constructor(points) {
this.points = points;
this.curves = [];
const controlPoints = createControlPoints(points);
for (let i = 0; i < points.length - 1; i++) {
const p1 = points[i];
const p2 = points[i + 1];
const c1 = controlPoints[0][i];
const c2 = controlPoints[1][i];
const curve = new Bezier(p1.x, p1.y, c1.x, c1.y, c2.x, c2.y, p2.x, p2.y);
this.curves.push({
curve,
length: curve.length()
});
}
let length = 0;
this.curves.forEach(c => {
c.min = length / this.length;
length += c.length;
c.max = length / this.length;
});
}render() {
const {width, height, p1x, p1y, p2x, p2y} = this.props;
const bezier = new Bezier(0, height, p1x, p1y, p2x, p2y, width, 0);
const pt = bezier.get(this.state.t);
const percent = Math.round(this.state.t*100);
const pLabel = percent < 10 ? "0" + percent : percent;
const icon = this.state.isAnimating ?
<svg viewBox="0 0 9 11" y="{height/2-4}" x="{width+12.5}" height="11px" width="9px">
<g>
<polygon points="0.124486417 10.2057749 3.00490662 10.2057749 3.00490662 0.185061375 0.124486417 0.185061375" fill="#393A39"></polygon>
<polygon points="5.48254639 10.2057749 8.3629666 10.2057749 8.3629666 0.185061375 5.48254639 0.185061375" fill="#393A39"></polygon>
</g>
</svg>
:
<svg viewBox="0 0 15 15" y="{height/2-7.5}" x="{width+7.5}" height="20px" width="20px">
<g>
<path fill="#565656" id="Fill-1" d="M6.81542969,0.443380605 C3.17408172,0.443380605 0.22267748,3.39478484 0.22267748,7.03613281 C0.22267748,10.6774808 3.17408172,13.628885 6.81542969,13.628885 C10.4567777,13.628885 13.4081819,10.6774808 13.4081819,7.03613281 C13.4081819,3.39478484 10.4567777,0.443380605 6.81542969,0.443380605 L6.81542969,0.443380605 Z M6.81542969,12.896357 C3.57863253,12.896357 0.955205503,10.2721486 0.955205503,7.03613281 C0.955205503,3.79933565 3.57863253,1.17590863 6.81542969,1.17590863 C10.0514455,1.17590863 12.6756539,3.79933565 12.6756539,7.03613281 C12.6756539,10.2721486 10.0514455,12.896357 6.81542969,12.896357 L6.81542969,12.896357 Z"></path>
<path fill="#565656" id="Fill-2" d="M9.37478493,6.54387398 L7.70520706,5.38784709 L6.26378725,4.38985091 C5.86705007,4.11520174 5.32439331,4.39903193 5.32439331,4.88210974 L5.32439331,9.19015588 C5.32439331,9.6732337 5.86626871,9.95706389 6.26378725,9.68241471 L7.70520706,8.68441853 L9.37537095,7.52839164 C9.71878009,7.2902712 9.71878009,6.78199442 9.37478493,6.54387398 L9.37478493,6.54387398 Z"></path></g></svg>Path.prototype.bbox = function() {
let bbs = []
let current
for (let i in this.ops) {
let op = this.ops[i]
if (op.type === 'line') {
bbs.push(lineBoundingBox({ from: current, to: op.to }))
} else if (op.type === 'curve') {
bbs.push(
curveBoundingBox(
new Bezier(
{ x: current.x, y: current.y },
{ x: op.cp1.x, y: op.cp1.y },
{ x: op.cp2.x, y: op.cp2.y },
{ x: op.to.x, y: op.to.y }
)
)
)
}
if (op.to) current = op.to
}
return bbbbox(bbs)
}onPoint1Drag,
onPoint2Drag,
onPoint3Drag,
onPoint4Drag,
onPoint1DragStart,
onPoint2DragStart,
onPoint3DragStart,
onPoint4DragStart,
onPoint1DragStop,
onPoint2DragStop,
onPoint3DragStop,
onPoint4DragStop,
...restProps
} = this.props;
let curve = new Bezier(...bezier);
let d = curve.toSVG();
let labelPosition = curve.get(0.5);
const labelElementBBox = this.state.labelElement && this.state.labelElement.getBBox();
const labelWidth = labelElementBBox && labelElementBBox.width;
const labelHeight = labelElementBBox && labelElementBBox.height;
const labelX = labelPosition.x - labelWidth / 2 - paddingH / 2;
const labelY = labelPosition.y - labelHeight / 2 - paddingV / 2;
const rectWidth = labelWidth + paddingH;
const rectHeight = labelHeight + paddingV;
const rectX = labelPosition.x - labelWidth / 2 - paddingH / 2;
const rectY = labelPosition.y - labelHeight / 2 - paddingV / 2;
let controls1 = showControls ? (}
if(bb)
{
this._b = new Vector2(0, 0);
this._b.x = bb.x;
this._b.y = bb.y;
}
else
{
this._b = end.location.clone().add(ab135plus);
}
this._a_vector = this._a.clone().sub(start.location);
this._b_vector = this._b.clone().sub(start.location);
this._bezier = new Bezier(start.location.x,start.location.y , this._a.x,this._a.y , this._b.x,this._b.y , end.location.x,end.location.y);
this.id = this.getUuid();
this.start.attachStart(this);
this.end.attachEnd(this);
/** Front is the plane from start to end. */
this.frontEdge = null;
/** Back is the plane from end to start. */
this.backEdge = null;
/** */
this.orphan = false;
/** Items attached to this wall */bezier-js
A javascript library for working with Bezier curves
