以角度2安装paper.js和typings文件

Question

我想在Angular 2中的一个组件中使用paper.js,但似乎无法使它工作.paper-full.js文件在加载组件时运行,但它从不识别画布.

有一个由Clark-Stevenson(paper.d.ts)为paper.js制作的打字文件,我认为这可能是问题的一部分,但是当我按照Ben Nadel的一般说明(见链接)尝试安装它时,我得到了以下:

C:\ Users\levi\Documents\Programming\AngularDesigner2> ./ node_modules/.bin/typingsinstall --global --save file:./ 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和angular 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  { 
}

canvas.html

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

paper.d.ts文件位于src: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将它列在你的包装中,方法是将它列在"scripts"标签中.

在.angular-cli.json中添加将paper-full.min.js导入脚本的行:

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

完成后,您可以在组件中使用纸库.我建议你制作一个简单的组件包装器.

像paper-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);
    }
}

从这个角度,你将有完全控制所有paper.js喜欢直接绘图,创建对象/符号,定义鼠标交互,创建工具...等功能http://paperjs.org/features/

如果要保持简单,请将项目添加到project.activeLayer.

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

希望这有效; 并帮助:-)