Angular2 + FabricJS + HammerJS 설정

지금까지 hammerjs 및 fabricjs와 함께 실행중인 angular2 프로젝트를 얻으려고합니다.Angular2 + FabricJS + HammerJS 설정

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

내 app.component.html

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

app.component.css 현재는에 예외를 던지고있다

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

"캔버스 .on "은 현재 fabric2s 및/또는 hammerj와 함께 angular2를 효과적으로 사용하는 방법을 보여주는 온라인 예제를 볼 수 없었습니다.

출처

2017-04-12 Aeseir

신고 해주세요. var canvas : any? –

@ParthGhiya는 결과를 변경하지 않습니다. 아직도 ReferenceError : canvas가 정의되지 않았습니다. – Aeseir

어때요? <캔버스 id = "drawing_layer"#parth> 템플릿 내 @ViewChild ("parth") 캔버스 : 구성 요소의 ElementRef. 각도 코어에서 ElementRef 가져 오기. –

canvas.on() {...}을 onInit 함수 안에 넣어야합니다. 즉 구성 요소 초기화에서 캔버스가 클릭되거나 다른 모니터링하려는 이벤트에 대한 콜백을 "등록"합니다.

출처

2017-05-13 10:21:07 Ziv

Angular2 + FabricJS + HammerJS 설정

답변

관련 문제