Question

你如何在angular2中使用paperjs事件？我在整合它时遇到了麻烦。我在我的组件类中尝试过，但似乎没有用。

this.currentAoi = this.paper.Path.Rectangle({
    point: [100,100],
    size: [100,100],
    fillColor: 'green',
});

this.currentAoi.onMouseDrag = function(event) {
    console.log(this.position);
    console.log(event.delta);
}

Answer 1

看您提供的代码，我想说您没有实例化Rectangle。
您必须要做的（注意new关键字）：

this.currentAoi = new this.paper.Path.Rectangle({
    point: [100,100],
    size: [100,100],
    fillColor: 'green',
});

example这里是一部完整的著作。

import { Component, ElementRef, ViewChild } from '@angular/core';
import {paper} from 'paper';

@Component({
  selector: 'my-app',
  template: '<canvas #canvas></canvas>',
  styles: [ `
    canvas {
      width: 100vw;
      height: 100vh;
    }
  ` ]
})
export class AppComponent  {
  // get a reference to canvas element
  @ViewChild('canvas') canvas:ElementRef;

  ngAfterViewInit() {
    // setup paper
    paper.setup(this.canvas.nativeElement);

    // draw a circle
    var circle = new paper.Path.Circle({
      center: paper.view.center,
      radius: 50,
      fillColor: 'orange'
    });

    // on mouse drag
    circle.onMouseDrag = function(event) {
      // move the circle
      this.position = event.point;
    }

    // display instructions
    new paper.PointText({
      content: 'Drag me',
      point: paper.view.center.subtract(0,80),
      justification: 'center'
    });
  }
}

Angular2如何使用paperjs事件？

1 个答案: