Angular 2アプリケーション（VS 2015アップデート3プロジェクト）に用紙パッケージを追加

私はAngp 2（VS 2015アップデート3）のasp.net MVCを使用しています。キャンバスセレクタで何かを描画するために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ファイル私はロードされているを見てわかるように、私の描画機能を持つファイルが、私も持っている警告がありません。 angular-app/app/paper-canvas/paper-canvas.component.htmlのように私の描画機能を書こうとしましたが、paperscriptのように仕事も。

ありがとうございました。

出典

2017-04-23 Pavel Basha