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

Question

I'm using asp.net MVC with Angular 2. (VS 2015 update 3). I want to use paper.js to draw something on canvas selector.

What I did:

install paper via npm and include it to project (in systemjs.config.js):

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

import this js file to component with 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'
}

my angular-app/app/paper-canvas/paper-canvas.component.html:

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

and add functionality to draw on 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();
}

All files loaded:

As you can see I have loaded paper-full.js file and my file with draw function, but there no even alert I have.. I tried to write my draw-function into angular-app/app/paper-canvas/paper-canvas.component.html like paperscript but it wasn't work too.

Thank you for any help in advance.

score 2 · Accepted Answer · answered Apr 23 '17 at 11:11

I think you need to include paper.js so that it is available in whole application, since it is not written specially for angular I suggest you to look at this question using external JS libraries in my angular 2 project

Everything else you did seems okay.

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

1 Answers1