Búsqueda de sitios web

typescript - instalar paper.js y archivo de tipos en angular 2

Quiero usar paper.js en uno de mis componentes en Angular 2 pero no puedo hacer que funcione. El archivo paper-full.js se ejecuta cuando se carga el componente pero nunca reconoce el canvas.

Hay un archivo de tipificaciones hecho por Clark-Stevenson (paper.d.ts) para paper.js y creo que esto podría ser parte del problema, pero cuando intento instalarlo siguiendo las instrucciones generales de Ben Nadel (ver enlace) obtengo lo siguiente:

C:\Users\levi\Documents\Programming\AngularDesigner2>./node_modules/.bin/typingsinstall --global --save file:./paper.d.ts

''.' no se reconoce como un comando interno o externo, programa o archivo por lotes ejecutable.

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 Soy nuevo en paper.js, TypeScript y 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  { 
}

lienzo.html

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

El archivo paper.d.ts se encuentra bajo src: src/paper.d.ts

Respuesta #1

Recomiendo simplemente instalar ambas bibliotecas con npm así:

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

entonces puedes usar el .angular-cli.json para incluir la biblioteca en tu empaquetado listándola en la etiqueta "scripts".

En el .angular-cli.json agrega la línea importando paper-full.min.js a tus scripts:

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

Una vez que termines con eso, puedes usar la biblioteca de paper en tus componentes. Te sugiero que hagas un envoltorio de componente simple.

Algo como 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);
    }
}

A partir de este punto tendrás control total sobre todas las funciones de paper.js, como dibujar directamente, crear objetos/símbolos, definir la interacción del ratón, crear herramientas ... etc. http://paperjs.org/features/

Agrega elementos al proyecto.activeLayer si quieres mantenerlo simple.

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

Espero que esto funcione; y ayude :-)

Respuesta #2

@types/paper está obsoleto. Paper proporciona sus propias definiciones de tipos, ya no es necesario instalar esto.

Artículos relacionados