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.

github freesewing / freesewing / packages / core / src / path.js View on Github external
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)
            )
          }
github freesewing / freesewing / packages / core / src / utils.js View on Github external
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))
  }
github freesewing / freesewing / packages / core / src / path.js View on Github external
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()}.`
  )
}
github freesewing / freesewing / packages / core / src / utils.js View on Github external
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]
github speedlazer / speedlazer / src / lib / BezierPath.js View on Github external
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;
    });
  }
github jslauthor / react-bezier-component / src / components / CurveComponent.js View on Github external
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>
github freesewing / freesewing / packages / core / src / path.js View on Github external
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)
}
github OpusCapita / fsm-workflow / fsm-gui / src / client / components / BezierCurve / BezierCurve.react.js View on Github external
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 &amp;&amp; this.state.labelElement.getBBox();
    const labelWidth = labelElementBBox &amp;&amp; labelElementBBox.width;
    const labelHeight = labelElementBBox &amp;&amp; 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 ? (
github aalavandhaann / blueprint-js / src / scripts / model / wall.js View on Github external
}
		
		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

MIT
Latest version published 1 year ago

Package Health Score

57 / 100
Full package analysis

Popular bezier-js functions