1

I am trying to get angular2 project running in conjunction with hammerjs and fabricjs with no luck so far.

my app.component.ts

    import { Component, OnInit } from '@angular/core';

declare var fabric: any;
let canvas: any;

    @Component({
      selector: 'ca-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      ngOnInit() {
    canvas = new fabric.Canvas('drawing_layer');
    const backImage = new Image();

    backImage.src = 'http://lorempixel.com/600/600/sports/';
    backImage.onload = () => {
      canvas.setBackgroundImage(backImage.src, canvas.renderAll.bind(canvas), {
        originX: 'left',
        originY: 'top',
        left: 0,
        top: 0,
      });

    };
  }
    }

canvas.on({
  'mouse:down': (ev) => {
    const pointer: any = canvas.getPointer(ev.e);
    const circle: any = new fabric.Circle({
      left: pointer.x,
      top: pointer.y,
      radius: 5,
      strokeWidth: 5,
      stroke: 'red',
      selectable: false,
      originX: 'center', originY: 'center',
    });

    canvas.add(circle);
  },
  'object:selected': (ev) => {
    console.info('object selected');
  },
  'selection:cleared': (ev) => {
console.info('selection cleared');
  },
});

let hammertime = new Hammer(document.getElementById("canvas-wrapper"));
hammertime.get("pinch").set({ enable: true });
hammertime.get("pan").set({ direction: Hammer.DIRECTION_ALL, threshold: 100 });
hammertime.on("pan", (ev) => {
    let fDeltaX: number;
    let fDeltaY: number;

    if (ev.pointerType === "mouse") {
        fDeltaX = ev.deltaX / 100;
        fDeltaY = ev.deltaY / 100;
    } else {
        fDeltaX = ev.deltaX / 10;
        fDeltaY = ev.deltaY / 10;
    }

    if (pageState.panning) {
        canvas.relativePan(new fabric.Point(Math.round(fDeltaX), Math.round(fDeltaY)));
    }
});
hammertime.on("pinch", (ev) => {
    canvas.setZoom(canvas.getZoom() * (ev.scale / 100));
});

my app.component.html

<div id="canvas-wrapper">
  <canvas id="drawing_layer"></canvas>
</div>

app.component.css

.upper-canvas {
  width: 100% !important;
  height: 100% !important;
}

Currently it is throwing exceptions at "canvas.on", haven't been able to see any examples online currently showing how to use angular2 with fabricjs and/or hammerjs effectively.

Aeseir
  • 7,754
  • 10
  • 58
  • 107
  • tried declare var canvas: any ? – Parth Ghiya Apr 12 '17 at 08:15
  • @ParthGhiya doesn't change the outcome. Still get ReferenceError: canvas is not defined – Aeseir Apr 12 '17 at 08:22
  • How about this ? in template @ViewChild("parth") canvas: ElementRef in component. Importing ElementRef from angular core. – Parth Ghiya Apr 12 '17 at 08:26
  • The issue is that its not recognizing canvas. By removing canvas.on section it renders the image without any problems. – Aeseir Apr 12 '17 at 08:29
  • thats Why i suggested ElementRef. something like this. constructor(elementRef: ElementRef, renderer: Renderer) { // Listen to click events in the component renderer.listen(canvasElement, 'click', (event) => { // Do something with 'event' }) ); Can u create working plunkr or something. – Parth Ghiya Apr 12 '17 at 08:32
  • Let me clarify. It recognises the canvas element in HTML and renders the image. What it has a problem with is "canvas.on()" functionality, saying canvas is not recognised, yet clearly it is as it loaded it and rendered the image. – Aeseir Apr 12 '17 at 08:34

1 Answers1

0

You should put the canvas.on(){...} inside your onInit function. i.e on component init you "register" your callback for when the canvas get clicked or any other event you want to monitor.

Ziv
  • 538
  • 1
  • 4
  • 7