How to use paper - 10 common examples

function contoursdivide(contours1, spliter, operation) {
    let path1 = new paper.CompoundPath(contours1);
    let path2 = new paper.Path({
        segments: [
            [spliter[0].x, spliter[0].y],
            [spliter[1].x, spliter[1].y]
        ],
        closed: false
    });

    let intersections = path1.getIntersections(path2); // 分割
    intersections.forEach(function (ins) {
        console.log(ins.getPoint());
        let result = ins.split();
        // console.log(result);
    });
    let a = 0;
    path1.children.forEach(function (path) {

ngOnInit() {
    console.clear();
    this.mainService.getMain().takeWhile(() => this.subscribe).subscribe(main => this.main = main);

    // Init paperjs
    this.scope = new PaperScope();
    this.project = new Project(this.canvasElement.nativeElement);

    this.httpManager.get('https://aamks.inf.sgsp.edu.pl/api/riskScenario/getAnims/' + this.main.currentProject.id + '/' + this.main.currentRiskScenario.id).then((result: Result) => {
      this.chooseVisArray = JSON.parse(result.data['anims']);
      this.chooseVis = this.chooseVisArray[0];
      //this.notifierService.notify(result.meta.status, result.meta.details[0]);
    });

    this.httpManager.get('https://aamks.inf.sgsp.edu.pl/api/riskScenario/getStatic/' + this.main.currentProject.id + '/' + this.main.currentRiskScenario.id).then((result: Result) => {
      this.dstatic = JSON.parse(result.data['static'])
      this.showStaticImage(this.chooseVis);
    });

    // Initializing
    this.project.view.onMouseDrag = (event) => {
      let offset = new Point(this.staticGeoms.position.x + event.delta.x, this.staticGeoms.position.y + event.delta.y)

// // create geometry
    for(let i = 0; i < entity.vertices.length; i++) {

        if(entity.vertices[i].bulge) {
            //TODO: Figure out what to do with the bugle value
            bulge = entity.vertices[i].bulge;
            startPoint = entity.vertices[i];
            endPoint = (i + 1 < entity.vertices.length) ? entity.vertices[i + 1] : geometry.vertices[0];
            console.log("Start Point:", startPoint);
            console.log("End Point:", endPoint);

        } else {
            let vertex = entity.vertices[i];
            let nextvertex = entity.vertices[(i + 1 < entity.vertices.length) ? i + 1 : 0];
            let point = new paper.Point(vertex.x * 1000, vertex.y * 1000); //Need to convert everything to microns
            let nextpoint = new paper.Point(nextvertex.x * 1000, nextvertex.y * 1000);
            // console.log("Vertex:", point, nextpoint);
            let line = new paper.Path.Line(point, nextpoint);
            path.addChild(line);
        }

    }

}

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{

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,

cncserver.binder.bindTo('controller.setup', base.id, () => {
    const { settings: { bot } } = cncserver;
    console.log(bot);
    // Setup the project with the max cavas size in mm.
    base.size = new Size(bot.maxAreaMM.width, bot.maxAreaMM.height);

    // Setup the actual printable work space as a rectangle.
    base.workspace = new Rectangle({
      from: [bot.workAreaMM.left, bot.workAreaMM.top],
      to: [bot.workAreaMM.right, bot.workAreaMM.bottom],
    });

    base.project = new Project(base.size);

    // Setup layers: temp, working
    // Whatever the last layer added was, will be default.
    base.layers = {
      import: new Layer(),
      temp: new Layer(),
      preview: new Layer(),
    };

componentDidMount(){
    paper.setup(this.refCanvas);
    this.project = paper.View._viewsById[this.refCanvas.id]._project;
    this.view = paper.View._viewsById[this.refCanvas.id];

    var { font, message, category, screenWidth, backgroundMode, size, fontSize, letterSpacing, baseline } = this.props;
    // console.log (fontSize + "," + baseline);
    this.createGlyphPath(font, message, size, backgroundMode, fontSize, letterSpacing, baseline, screenWidth, category);
    this.project.activate();
    this.view.draw();
  }

componentWillReceiveProps(nextProps) {
    if (!_.isEqual(nextProps.change, this.props.change)) {
      // if we've got a new update, render it
      if (this.vizState.histRendering) console.error(nextProps.change);
      renderUpdate(this.vizState, nextProps.change, this.nativeCanvas);
    } else if (!_.isEqual(nextProps.initialBook, this.props.initialBook)) {
      // currency has changed; reset all internal state and re-initialize component
      console.log('Reinitializing component state with new initial book...');
      this.initState(nextProps);

      console.log('re-rendering canvas...');
      renderInitial(this.vizState, this.nativeCanvas);

      // initialize the PaperJS environment on the internal canvas
      this.vizState.paperscope = new paper.PaperScope();
      this.vizState.paperscope.setup(this.paperCanvas);
      initPaperCanvas(this.vizState);

      // clear old trades from previous currency and reset zoom to default for the new currency
      this.vizState.trades = [];
      resetZoom(this.vizState);

      // Work around strange bug in Paper.JS causing canvas scaling to increase every time that
      // the visualization updates for a new currency
      const pixelRatio = this.vizState.paperscope.project._view._pixelRatio;
      const ctx = this.vizState.paperscope.project._view._context;
      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
    }
  }

fillUtil.connect((path, settingsOverride) => {
  settings = { ...settings, ...settingsOverride };
  fillPath = path;
  viewBounds = fillUtil.project.view.bounds;
  exportGroup = new Group();

  // Init boundpath and traversal line
  // The path drawn around the object the line traverses
  boundPath = new Path.Ellipse({
    center: path.position,
    size: [path.bounds.width * 2, path.bounds.height * 2],
  });

  // Init canvas boundary line to intersect if beyond the printable area.
  canvasBounds = new Path.Rectangle({
    from: [0, 0],
    to: [viewBounds.width, viewBounds.height],
  });

  while (dynamicLineFillNext()) {
    // console.log('*');
  }

  fillUtil.finish(exportGroup);
});

componentDidMount(){
    paper.setup(this.refCanvas);
    this.project = paper.View._viewsById[this.refCanvas.id]._project;
    this.view = paper.View._viewsById[this.refCanvas.id];

    var { font, message, category, screenWidth, backgroundMode, size, fontSize, letterSpacing, baseline } = this.props;
    // console.log (fontSize + "," + baseline);
    this.createGlyphPath(font, message, size, backgroundMode, fontSize, letterSpacing, baseline, screenWidth, category);
    this.project.activate();
    this.view.draw();
  }