Angular 2 응용 프로그램에 용지 패키지 추가 (VS 2015 업데이트 3 프로젝트)

저는 Angpular 2와 함께 asp.net MVC를 사용하고 있습니다 (VS 2015 업데이트 3). paper.js를 사용하여 캔버스 선택기에 무언가를 그립니다.Angular 2 응용 프로그램에 용지 패키지 추가 (VS 2015 업데이트 3 프로젝트)

내가 무슨 짓을 :

는 NPM을 통해 종이를 설치하고 (systemjs.config.js에서) 프로젝트에 포함

var map = { 
'app': 'angular-app', // 'dist', 
... 
'paper/paper-full': 'npm:paper/dist/paper-full.min.js', 
... 
};

수입이 캔버스 구성 요소 파일을 JS :

import { Component } from '@angular/core'; 
import 'paper/paper-full'; 
import 'angular-app/app/paper-canvas/paper-functions'; 

@Component({ 
    selector: 'paper-canvas', 
    templateUrl: 'angular-app/app/paper-canvas/paper-canvas.component.html', 
    styleUrls: ['angular-app/app/paper-canvas/paper-canvas.component.css'] 
    }) 
export class PaperCanvasComponent { 
title = 'canvas here' 
}

내 angular-app/app/paper-canvas/paper-canvas.component.html :

<div class="well"> 
    <h2>{{title}}</h2> 
    <canvas id="canvasArea">loading canvas</canvas> 
</div>

캔버스에 그릴 기능을 추가 :

document.addEventListener('DOMContentLoaded', function() { 
     alert('it works'); 
}); 

window.onload = function() { 
     alert("in func"); 
     // Get a reference to the canvas object 
     var canvas = document.getElementById('canvasArea'); 
     // Create an empty project and a view for the canvas: 
     paper.setup(canvas); 
     // Create a Paper.js Path to draw a line into it: 
     var path = new paper.Path(); 
     // Give the stroke a color 
     path.strokeColor = 'black'; 
     var start = new paper.Point(100, 100); 
     // Move to start and draw a line from there 
     path.moveTo(start); 
     // Note that the plus operator on Point objects does not work 
     // in JavaScript. Instead, we need to call the add() function: 
     path.lineTo(start.add([200, -50])); 
     // Draw the view now: 
     paper.view.draw(); 
}

모든 파일은로드 :

당신이 종이 full.js 파일 I 넣은를 볼 수 있듯이 내 그리기 기능을 가진 파일,하지만 심지어 경고가 없습니다 .. angular-app/app/paper-canvas/paper-canvas.component.html에 내 draw-function을 쓰려고했지만 paperscript과 같았습니다. 너무 일한다.

사전에 도움을 주셔서 감사합니다.

출처

2017-04-23 Pavel Basha