将纸质包添加到 Angular 2 应用程序（VS 2015 更新 3 项目）答案

【问题标题】：Add paper package to Angular 2 application (VS 2015 update 3 project)将纸质包添加到 Angular 2 应用程序（VS 2015 更新 3 项目）
【发布时间】：2017-04-23 10:43:04
【问题描述】：

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

我做了什么：

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

加载的所有文件：

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

提前感谢您的帮助。

【问题讨论】：

标签： javascript angular canvas visual-studio-2015 paperjs

【解决方案1】：

我认为您需要包含 paper.js 以便它在整个应用程序中可用，因为它不是专门为 Angular 编写的，我建议您查看这个问题 using external JS libraries in my angular 2 project

你所做的一切看起来都还不错。

【讨论】：