How to use the paper.PaperScope 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 aamks / aamks / gui / interface / src / app / views / main / risk / results / results.component.ts View on Github external
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)
github Ameobea / cryptoviz / src / react-orderbook / Orderbook / Orderbook.js View on Github external
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);
    }
  }
github jayelm / bad-flamingo / examples / modules / tic-tac-toe / components / board.js View on Github external
mountTraitor() {
    paper.install(this);
    this.paper = new paper.PaperScope();
    this.paper.setup(this.canvas); // Setup Paper #canvas
  }
github jayelm / bad-flamingo / src / modules / game / components / board-traitor.js View on Github external
componentDidMount() {
    this.paper = new paper.PaperScope();
    this.paper.setup(this.canvas); // Setup Paper #canvas

    this.importThenRender();
  }
github jayelm / bad-flamingo / examples / modules / tic-tac-toe / components / board.js View on Github external
updateTraitor() {
    this.paper = new paper.PaperScope();
    this.paper.setup(this.canvas); // Setup Paper #canvas
    // if (this.pathinks) {
    //   this.drawInk();
    // }
  }
github jayelm / bad-flamingo / src / modules / game / components / board-drawer.js View on Github external
mountDrawer() {
    this.guess = null;
    this.timer = 0;
    this.initInk(); // Initialize Ink array ()
    this.paper = new paper.PaperScope();

    this.paper.setup(this.canvas); // Setup Paper #canvas

    var tool = new this.paper.Tool(); // Inititalize Paper Tool

    // Paper Tool Mouse Down Event
    tool.onMouseDown = event => {
      // New Paper Path and Settings

      this.path = new this.paper.Path();
      this.path.strokeColor = "#5C604D";
      this.path.strokeWidth = 0.01 * this.canvas.offsetWidth;
      this.paths.push(this.path);
      // Get Time [ms] for each Guess (needed for accurate Google AI Guessing)
      var thisTimestamp = event.event.timeStamp;
      var time;
github jayelm / bad-flamingo / src / modules / game / components / board-guesser.js View on Github external
componentDidUpdate() {
    this.paper = new paper.PaperScope();
    this.paper.setup(this.canvas); // Setup Paper #canvas
    
    this.importThenRender();
  }
github react-paper / react-paper-bindings / src / App.js View on Github external
componentDidMount() {
    if (!this.paper) {
      const { canvas } = this.refs;
      this.paper = new paperjs.PaperScope();
      this.paper.setup(canvas);
      this.paper.view.play();
      this.forceUpdate();
    }
  }
  render() {