将纸质包添加到Angular 2应用程序（VS 2015 update 3 project）

Question

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

我做了什么：

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

  <?php
  $songData = $_POST['data'];
  $songData = explode(',', $songData); 
  print_r(array_values($songData));
  ?>
  

• 将此js文件导入到包含canvas的组件：

  var map = {
  'app': 'angular-app', // 'dist',
  ...
  'paper/paper-full': 'npm:paper/dist/paper-full.min.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>
  

  加载所有文件：

正如你所看到的，我已经加载了paper-full.js文件和带有绘图功能的文件，但是我甚至都没有警告.. 我试图将我的绘制函数写入 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(); } angular-app/app/paper-canvas/paper-canvas.component.html，但它也不起作用。

感谢您提前提供任何帮助。

Answer 1

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

你做的其他事情似乎没问题。