Hinzufügen von Papier-Paket zu Angular 2-Anwendung (VS 2015 Update 3 Projekt)

Question

Ich benutze asp.net MVC mit Angular 2. (VS 2015 Update 3). Ich möchte mit paper.js etwas auf Leinwand Selektor zeichnen.

Was ich tue:

• installieren Papier über npm und schließt es (in systemjs.config.js) zu projizieren:

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

• Import dieser JS-Datei zu der Komponente mit Leinwand:

  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' 
  } 
  

• mein angular-app/app/paper-canvas/paper-canvas.component.html:

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

• und erweitern die Funktionalität auf Leinwand zu zeichnen:

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

  Alle Dateien geladen:

Wie Sie habe ich Papier-full.js Datei geladen sehen und meine Datei mit Zeichenfunktion, aber da habe ich noch keine Alarmierung. Ich habe versucht, meine Zeichenfunktion in angular-app/app/paper-canvas/paper-canvas.component.html wie paperscript zu schreiben, aber das war es nicht arbeite auch.

Vielen Dank für jede Hilfe im Voraus.

Answer 1

Ich glaube, Sie brauchen paper.js enthalten, so dass es in ganze Anwendung ist, da sie nicht speziell geschrieben für Winkel Ich schlage vor, Sie zu dieser Frage suchen using external JS libraries in my angular 2 project

Alles andere Alles in Ordnung tat scheint .