Angular2 + FabricJS + HammerJS setup

Question

Ich versuche, eckig2 Projekt in Verbindung mit Hammerjs und Fabricjs bisher ohne Glück zu bekommen.

mein 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)); 
}); 

mein app.component.html

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

app.component.css

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

Derzeit ist es Ausnahmen bei „Leinwand werfen .on "konnten bisher keine Online-Beispiele sehen, die zeigen, wie man angular2 effektiv mit fabricjs und/oder hammerjs verwendet.

Answer 1

Sie sollten die canvas.on() {...} in Ihre onInit-Funktion einfügen. , d. H. Bei der Komponenteninitialisierung "registrieren" Sie Ihren Rückruf, wenn Sie auf die Zeichenfläche klicken oder ein anderes Ereignis, das Sie überwachen möchten.