How to use the paper.Path.Circle 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 emfmesquita / beyondhelp / src / services / PaperMapService.js View on Github external
if (areaType === C.MapAreaCircle && splited.length !== 3) return;
    if (areaType === C.MapAreaComment && splited.length !== 14) return;

    splited = toNumberArray(splited);

    // removes old item and creates another
    const props = PaperMapService.getAreaData(jqArea) || {};
    if (props.paperId) {
        const item = paper.project.activeLayer.children.find(child => child.id === props.paperId);
        if (item) item.remove();
    }

    let path = null;
    if (areaType === C.MapAreaCircle) { // circle
        const center = new Point(splited[0], splited[1]);
        path = new Path.Circle(center, splited[2]);
    } else if (areaType === C.MapAreaRect) { // rect
        const p1 = new Point(splited[0], splited[1]);
        const p2 = new Point(splited[2], splited[3]);
        const rect = new Rectangle(p1, p2);
        path = new Path.Rectangle(rect);
    } else { // rho or comment
        path = new Path();
        for (let i = 0; i < splited.length; i += 2) {
            path.add(new Point(splited[i], splited[i + 1]));
        }
        path.closed = true;
    }

    const defaultColor = props.color || "black";
    applyColor(path, defaultColor);
    path.strokeWidth = 2;
github aamks / aamks / gui / interface / src / app / views / main / risk / results / results.component.ts View on Github external
// We attach to the static geoms
    var g;

    for (var i = 0; i < this.dd_geoms['rectangles'].length; i++) {
      g = this.dd_geoms['rectangles'][i];
      this.staticGeoms.addChild(new Path.Rectangle({ point: new Point(g["xy"][0], -g["xy"][1]), size: new Size(g["width"], -g["depth"]), strokeColor: g['strokeColor'], strokeWidth: g['strokeWidth'], fillColor: g['fillColor'], opacity: g['opacity'] }));
    }

    for (var i = 0; i < this.dd_geoms['lines'].length; i++) {
      g = this.dd_geoms['lines'][i];
      this.staticGeoms.addChild(new Path.Line({ from: new Point(g["xy"][0], -g["xy"][1]), to: new Point(g["x1"], -g["y1"]), strokeColor: g['strokeColor'], strokeWidth: g['strokeWidth'], opacity: g['opacity'] }));
    }

    for (var i = 0; i < this.dd_geoms['circles'].length; i++) {
      g = this.dd_geoms['circles'][i];
      this.staticGeoms.addChild(new Path.Circle({ center: new Point(g["xy"][0], -g["xy"][1]), radius: g["radius"], fillColor: g['fillColor'], opacity: g['opacity'] }));
    }
    for (var i = 0; i < this.dd_geoms['texts'].length; i++) {
      g = this.dd_geoms['texts'][i];
      this.staticGeoms.addChild(new PointText({ point: new Point(g["xy"][0], -g["xy"][1]), content: g["content"], fontFamily: 'Play', fontSize: g["fontSize"], fillColor: g['fillColor'], opacity: g['opacity'] }));
    }
  }
github aamks / aamks / gui / interface / src / app / views / main / risk / results / results.component.ts View on Github external
public paperjsLetItBurn() {
    // The animated fire is displayed in a separate setInterval loop. Perhaps onFrame() suits more.
    if (this.burningFire == undefined) {
      this.burningFire = new Group();
    } else {
      this.burningFire.removeChildren();
    }

    if (this.burningFireLocation.length < 2) {
      clearInterval(this.intervalId);
      return;
    }
    this.burningFire.addChild(new Path.Circle({ center: new Point(this.burningFireLocation[0], -this.burningFireLocation[1]), radius: this.ballsSize * 4, fillColor: this.colors["firefill"], strokeColor: this.colors["firestroke"], strokeWidth: this.ballsSize }));

    clearInterval(this.intervalId);
    this.fireScale = 0.9;
    this.fireScaleCounter = 1;
    this.intervalId = setInterval(function () {
      this.fireScaleCounter++;
      if (this.fireScaleCounter % 20 == 0) {
        this.fireScale = 1 / this.fireScale;
      }
      this.burningFire.children[0].scale(this.fireScale);
    }, 100);
  }
github aamks / aamks / gui / interface / src / app / views / main / risk / results / results.component.ts View on Github external
public highlightGeom(key) {
    try {
      new Path.Rectangle({ point: new Point(Math.round(this.rooms[key]["x0"]), -Math.round(this.rooms[key]["y0"])), size: new Size(Math.round(this.rooms[key]["width"]), -Math.round(this.rooms[key]["depth"])), opacity: 0.4, fillColor: "#0f0" });
    } catch (e) {
      new Path.Circle({ center: new Point(Math.round(this.doors[key]["center_x"]), -Math.round(this.doors[key]["center_y"])), radius: 100, opacity: 0.4, fillColor: "#0f0" });
    }
  }
github fponticelli / tempo / paperjs / src / path.ts View on Github external
  >((_: State) => new Path.Circle(options.args), options)
github react-paper / react-paper-bindings / src / react-paper-bindings.js View on Github external
instance._applyProps = applyToolProps
        break
      case TYPES.LAYER:
        instance = new Layer(instanceProps)
        instance._applyProps = applyLayerProps
        break
      case TYPES.GROUP:
        instance = new Group(instanceProps)
        instance._applyProps = applyGroupProps
        break
      case TYPES.PATH:
        instance = new Path(instanceProps)
        instance._applyProps = applyPathProps
        break
      case TYPES.CIRCLE:
        instance = new Path.Circle(instanceProps)
        instance._applyProps = applyCircleProps
        break
      case TYPES.ELLIPSE:
        instance = new Path.Ellipse(instanceProps)
        instance._applyProps = applyEllipseProps
        break
      case TYPES.RECTANGLE:
        instance = new Path.Rectangle(instanceProps)
        instance._applyProps = applyRectangleProps
        break
      case TYPES.POINTTEXT:
        instance = new PointText(instanceProps)
        instance._applyProps = applyPointTextProps
        break
      default:
        invariant(instance, 'PaperReact does not support the type "%s"', type)
github aamks / aamks / gui / interface / src / app / views / main / risk / results / results.component.ts View on Github external
this.evacBalls = new Group();
      this.evacLabels = new Group();
    } else {
      this.evacVelocities.removeChildren();
      this.evacBalls.removeChildren();
      this.evacLabels.removeChildren();
    }

    if (this.visContainsAnimation == 0) { return; }

    for (var i = 0; i < this.numberOfEvacuees; i++) {
      this.evacVelocities.addChild(new Path.Line({ from: new Point(this.evacueesData[0][i][0], -this.evacueesData[0][i][1]), to: new Point(this.evacueesData[0][i][2], -this.evacueesData[0][i][3]), strokeColor: this.colors['fg'], strokeCap: 'round', dashArray: [2, 10], strokeWidth: this.velocitiesSize }));
    }

    for (var i = 0; i < this.numberOfEvacuees; i++) {
      this.evacBalls.addChild(new Path.Circle({ center: new Point(this.evacueesData[0][i][0], -this.evacueesData[0][i][1]), radius: this.ballsSize, fillColor: this.colors['doseN'] }));
    }
  }