角度2のpaper.jsとタイピングファイルをインストール

Question

Angular 2のコンポーネントの1つにpaper.jsを使用したいが、動作させられないようだ。 paper-full.jsファイルは、コンポーネントがロードされたときに実行されますが、キャンバスは認識されません。

paper.jsのClark-Stevenson（paper.d.ts）が作成した入力ファイルがありますが、これは問題の一部である可能性がありますが、Ben Nadelの一般的な指示に従ってリンクをインストールしようとすると

C：\ Users \ユーザーレヴィ\ドキュメント\プログラミング\ AngularDesigner2> ./ node_modules/.binファイル/ typingsinstall --global --saveファイル：./ paper.d.ts

）私は次の取得します'。'操作可能なプログラムまたはバッチファイル 内部または外部のコマンドとして認識されません。

https://www.bennadel.com/blog/3169-adding-custom-typings-files-d-ts-in-an-angular-2-typescript-application.htm

https://github.com/clark-stevenson/paper.d.ts 私はpaper.jsに新しいです、typescriptですと角2

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": [ "es2015", "dom" ], 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true 
    }, 
    "files": [ 
    "paper.d.ts" 

    ] 
} 

App.component.ts

import { Component } from '@angular/core'; 
import '../../node_modules/paper/dist/docs/assets/js/paper.js'; 


@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/canvas.html' 
}) 
export class AppComponent { 
} 

paper.d.tsファイルがSRCの下で発見されたcanvas.html

<h1>Canvas</h1> 
<canvas id="canvas"></canvas> 

：SRC/paper.d.ts

Answer 1

私は単純にそうNPMとの両方のライブラリをインストールすることをお勧めし：

npm install --save paper 
npm install --save @types/paper   (or --save-dev if you prefer) 

その後、あなたはそれをリストすることによって、あなたのパッケージにライブラリを含めるように.angular-cli.jsonを使用することができます"スクリプト"タグ。 .angular-cli.jsonで

はスクリプトに紙full.min.jsをインポートする行を追加します。

{ 
    .... 
    "apps": [ 
     .... 
     "scripts": [ 
      "../node_modules/paper/dist/paper-full.min.js" 
     ] 
    ] 
} 

を、あなたはそれに終わったら、紙ライブラリを使用することができますあなたのコンポーネントで。 単純なコンポーネントラッパーを作成することをお勧めします。

あなたが直接マウス操作を定義し、オブジェクト/シンボルを作成し、描画のようなすべてのpaper.js機能 を完全に制御する必要があります。この時点から紙canvas.component.tsような何か

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; 
import { PaperScope, Project, Path, Point } from 'paper'; 

@Component({ 
    moduleId: module.id, 
    selector: 'paper-canvas', 
    template: '<canvas #canvasElement width="595" height="842"></canvas>', 
}) 

export class PaperCanvasComponent implements OnInit { 
    @ViewChild('canvasElement') canvasElement: ElementRef; 
    scope: PaperScope; 
    project: Project; 

    constructor() { } 

    ngOnInit() { 
     this.scope = new PaperScope(); 
     this.project = new Project(this.canvasElement.nativeElement); 
    } 
} 

、ツールを作成するなど... http://paperjs.org/features/

単純なままにしたい場合は、project.activeLayerに項目を追加します。

const currentPath = new Path(); 
// ... add some points, set some properties 
this.project.activeLayer.addChild(currentPath); 

希望です。助けてくれる:-)