How to use the pts.CanvasForm function in pts

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

github alexeden / rpi-led-matrix / app / web / src / app / canvas / canvas.component.ts View on Github external
private readonly renderer2: Renderer2,
    private readonly canvas: HTMLCanvasElement,
    readonly bufferService: BufferService,
    readonly socketService: SocketService
  ) {
    (window as any).canvasComponent = this;
    this.renderer2.appendChild(this.elRef.nativeElement, this.canvas);
    this.ctx = this. canvas.getContext('2d')!;

    this.space = new CanvasSpace(this.canvas, () => this.ready$.next(true)).setup({
      bgcolor: '0xFF0000',
      resize: false,
      retina: false,
    });

    this.form = new CanvasForm(this.space);

    this.animate = new Observable(subscriber => {
      this.space.add((t, dt) => subscriber.next({ t: t!, dt: dt! }));
    });

    this.pointer = new Observable(subscriber => {
      let { left, top } = this.canvas.getBoundingClientRect();
      this.space.add({
        resize: () => {
          const rect = this.canvas.getBoundingClientRect();
          left = rect.left;
          top = rect.top;
          // { left, top } = rect;
          // { left, top } = this.canvas.getBoundingClientRect();
        },
        action: (t, x, y) => subscriber.next(new Pt(x - left, y - top)),