在 Angular 2 中安装 paper.js 和类型文件答案

【问题标题】：install paper.js and typings file in angular 2在 Angular 2 中安装 paper.js 和类型文件
【发布时间】：2017-08-10 10:01:18
【问题描述】：

我想在 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

【问题讨论】：

标签： angular typescript paperjs

【解决方案1】：

我建议简单地使用 npm 安装这两个库：

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

然后您可以使用 .angular-cli.json 通过在“脚本”标签中列出该库来将其包含在您的包装中。

在 .angular-cli.json 中添加行 importing 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);

希望这行得通；并帮助:-)

【讨论】：

嗨 Iwohlhart，你能帮我解决这个问题吗：我可以通过脚本标签导入 paperjs 并使用 @types/paper 进行编码吗？此外，当我按照您在调试模式下看到的建议导入时，它总是显示 dist/paper-full.js 而不是 dist/paper-full.min.js 到 Path() 对象。 Angular CLI 是压缩 paperjs 代码还是映射？

【解决方案2】：

@types/paper 已弃用。 Paper 提供了自己的类型定义，无需再安装。

【讨论】：

【解决方案3】：

这是 lwohlhart 兄弟的最佳答案！
但是，如果您的项目无法正常运行。尝试在您的 angular.json 文件中重新配置（我目前使用 Angular 8）。现在的路径是 "node_modules/paper/dist/paper-full.min.js"
希望这很有用！

【讨论】：