添加文件包到Angular2应用程序（VS 2015 update 3项目）

Question

我正在使用 asp.net MVC 和 Angular 2。（VS 2015 更新 3）。我想使用 paper.js 在 canvas 选择器上绘制一些东西。

我做了什么：

通过 npm 安装文件并将其包含到项目中（在 systemjs.config.js 中）：

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

将此 js 文件导入组件 canvas:

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>

并添加功能以利用 canvas:

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

加载的所有文件：

正如你所看到的，我已经加载了 paper-full.js 文件和我的带有绘图功能的文件，但是我什至没有警告我有.. 我尝试将我的绘图函数写入 angular-app/app/paper-canvas/paper-canvas.component.html，如 paperscript，但它也不起作用。

提前感谢您的帮助。

Answer 1

我认为你需要包含 paper.js 以便它在整个应用程序中可用，因为它不是专门为 angular 编写的我建议你看看这个问题

你所做的其他一切似乎都还不错。

添加文件包到Angular2应用程序（VS 2015 update 3项目）

Add paper package to Angular 2 application (VS 2015 update 3 project)

javascript

canvas

paperjs

visual-studio-2015

angular