How to use the paper.Path function in paper

To help you get started, we’ve selected a few paper examples, based on popular ways it is used in public projects.

github CIDARLAB / 3DuF / src / app / view / render2D / dxfSolidObjectRenderer2D.js View on Github external
function drawLine(entity) {
    //Create a path
    let basepath = new paper.Path();
    basepath.origin = "LINE";

    let bulge, bugleGeometry;
    let startPoint, endPoint;

    // // create geometry
    for(let i = 0; i < entity.vertices.length; i++) {
        // console.log("Point:", i , entity.vertices[i]);
        if(entity.vertices[i].bulge) {
            console.log("Drawing arc segment to incorporate bulge values");
            //TODO: Figure out what to do with the bugle value
            bulge = entity.vertices[i].bulge;
            startPoint = entity.vertices[i];
            if(i < entity.vertices.length-1){
                endPoint = entity.vertices[i+1];
            }else{
github techninja / cncserver / src / components / core / drawing / fillers / cncserver.drawing.fillers.hatch.js View on Github external
function addFillLines() {
  // Set start & destination based on input angle
  // Divide the length of the bound ellipse into 1 part per angle
  const amt = boundPath.length / 360;

  // Set source position to calculate iterations and create dest vector.
  let pos = amt * (settings.angle);

  // The actual line used to find the intersections
  // Ensure line is far longer than the diagonal of the object
  const line = new Path({
    segments: [
      new Point(0, 0),
      new Point(fillPath.bounds.width + fillPath.bounds.height, 0),
    ],
    position: boundPath.getPointAt(pos),
    rotation: settings.angle - 90,
  });

  // Find destination position on other side of circle
  pos = settings.angle + 180; if (pos > 360) pos -= 360;
  const len = Math.min(boundPath.length, pos * amt);
  const destination = boundPath.getPointAt(len);

  if (!destination) {
    console.table({
      bplen: boundPath.length, pos, amt, ang: settings.angle,
github techninja / cncserver / src / components / core / drawing / fillers / cncserver.drawing.fillers.pattern.js View on Github external
function generateSpiralPath() {
  // Setup the spiral:
  const spiral = new Path();

  // The spacing value is double the value in the fill settings menu
  // 10 (20 here) is the default fill spacing in the fill settings menu
  const spacing = settings.spacing / 5;

  // This is the diagonal distance of the area in which we will be filling
  // paths. We will never be filling of g.view.bounds; by ensuring the radius of the
  // spiral is larger than this distance we ensure that when we reach the end
  // of the spiral we have checked the entire printable area.
  const boundsSize = viewBounds.topLeft.getDistance(viewBounds.bottomRight);

  // Estimate the number of turns based on the spacing and boundsSize
  // Add 1 to compensate for the points we remove from the end
  let turns = Math.ceil(boundsSize / (spacing * 2 * Math.PI)) + 1;

  spiral.addSegments(makeSpiral(turns, spacing));
github CIDARLAB / 3DuF / src / app / library / transition.js View on Github external
render2D(params, key) {
        let position = params["position"];
        let cw1 = params["cw1"];
        let cw2 = params["cw2"];
        let length = params["length"];
        let orientation = params["orientation"];
        let color = params["color"];
        let trap = new paper.Path();

        if (orientation == "V") {
            trap.add(new paper.Point(position[0] - cw1 / 2, position[1]));
            trap.add(new paper.Point(position[0] + cw1 / 2, position[1]));
            trap.add(new paper.Point(position[0] + cw2 / 2, position[1] + length));
            trap.add(new paper.Point(position[0] - cw2 / 2, position[1] + length));
            //trap.add(new paper.Point(position[0] - cw1/2, position[1]));
        }
        else {
            trap.add(new paper.Point(position[0], position[1] - cw1 / 2));
            trap.add(new paper.Point(position[0], position[1] + cw1 / 2));
            trap.add(new paper.Point(position[0] + length, position[1] + cw2 / 2));
            trap.add(new paper.Point(position[0] + length, position[1] - cw2 / 2));
            //trap.add(new paper.Point(position[0], position[1] - cw1/2));
        }
        trap.closed = true;
github fponticelli / tempo / demo / paper / src / path_simplification / reducer.ts View on Github external
AddPath: state => {
    if (state.current.length <= 1) return state
    const path = new Path({
      segments: state.current,
      insert: false,
      applyMatrix: false
    })
    path.simplify(10)
    const paths = state.paths.concat([
      {
        segments: path.segments!.map(seg => {
          const newSeg = seg.clone()
          newSeg.transform(
            new Matrix(1, 0, 0, 1, -path.position!.x!, -path.position!.y!)
          )
          return newSeg
        }),
        position: path.position!
      }
github mydraft-cc / ui / src / core / utils / paper-helper.ts View on Github external
export function createRoundedRectangleLeft(rectangle: paper.Rectangle, radius = 10) {
        const rad = Math.min(radius, rectangle.width * 0.5, rectangle.height * 0.5);

        const t = rectangle.top;
        const l = rectangle.left;
        const r = rectangle.right;
        const b = rectangle.bottom;

        const item = new paper.Path(`M${r},${b} L${l + rad},${b} a${rad},${rad} 0 0 1 -${rad},-${rad} L${l},${t + rad} a${rad},${rad} 0 0 1 ${rad},-${rad} L${r},${t} z`);

        return item;
    }
github lucascassiano / reViz3d / reViz3d-R2a / src / controls / LineEditor.js View on Github external
draw = (canvas) => {
        paper.setup(canvas);
        let colorLines = 'rgba(0,0,0,0.1)';
        let { width, height } = canvas.getBoundingClientRect();
        let center = new paper.Point(width / 2, height / 2);

        var myPath = new paper.Path({ strokeWidth: 2, strokeCap: 'round' });
        myPath.strokeColor = Colors.blue_base;
        myPath.fillColor = Colors.blue_light;

        let points = this.props.points || [];

        let step = (width - 10) / (points.length - 1);
        let circles = [];

        for (var i = 0; i < points.length; i++) {
            let point = new paper.Point(5 + i * step, height - points[i]);
            myPath.add(point);

            let segment = myPath.segments[i];

            let circle = new paper.Path.Circle(point, 3)
github wonderunit / storyboarder / src / js / window / storyboarder-sketch-pane / marquee-strategy.js View on Github external
deselect () {
    this.context.store.dispatch({ type: 'TOOLBAR_MODE_STATUS_SET', payload: 'idle', meta: { scope: 'local' } })

    this.layer.clear()

    this.parent.marqueePath = null
    this.state.stateName = 'idle'

    this.state.selectionPath = new paper.Path()
    this.state.selectionSubPath = null

    this.state.started = false
    this.state.complete = false
    this.state.draftPoint = null
    this.state.isPointerDown = false

    this._draw()
  }
github CIDARLAB / 3DuF / src / app / library / dropletGenerator.js View on Github external
render2D(params, key) {
        let pos = params["position"];
        let x = pos[0];
        let y = pos[1];
        let color = params["color"];
        let orificeSize = params["orificeSize"];
        let orificeLength = params["orificeLength"];
        let oilInputWidth = params["oilInputWidth"];
        let waterInputWidth = params["waterInputWidth"];
        let outputWidth = params["outputWidth"];
        let outputLength = params["outputLength"];
        let rotation = params["rotation"];

        let ret = new paper.Path();

        let p1 = new paper.Point(x, y - waterInputWidth / 2);

        let p2 = new paper.Point(p1.x + oilInputWidth, p1.y);

        let p3 = new paper.Point(p2.x, p2.y + (waterInputWidth / 2 - orificeSize / 2));

        let p4 = new paper.Point(p3.x + orificeLength, p3.y);

        let p5 = new paper.Point(p4.x, p4.y - (outputWidth / 2 - orificeSize / 2));

        let p6 = new paper.Point(p5.x + outputLength, p5.y);

        let p7 = new paper.Point(p6.x, p6.y + (outputWidth));

        let p8 = new paper.Point(p7.x - outputLength, p7.y);
github alexjlockwood / ShapeShifter / src / app / scripts / paper / gesture / CreateEllipseGesture.ts View on Github external
onMouseUp(event: paper.ToolEvent) {
    if (this.isDragging) {
      const pathOverlay = this.ps.getPathOverlayInfo();
      const path = new paper.Path(pathOverlay);
      const vl = this.ps.getVectorLayer().clone();
      const pl = new PathLayer({
        name: LayerUtil.getUniqueLayerName([vl], 'path'),
        children: [] as Layer[],
        pathData: new Path(path.pathData),
        fillColor: '#000',
      });
      const children = [...vl.children, pl];
      vl.children = children;
      this.ps.setVectorLayer(vl);
      this.ps.setPathOverlayInfo(undefined);
      this.ps.setSelectedLayers(new Set([pl.id]));
    }
    this.ps.setToolMode(ToolMode.Selection);
  }