Quiero usar paper.js en uno de mis componentes en Angular 2 pero parece que no puedo hacerlo funcionar. El archivo paper-full.js se ejecuta cuando se carga el componente, pero nunca reconoce el lienzo.
Hay un archivo de escritura 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 el siguiendo:
C:\Usuarios\levi\Documentos\Programación\AngularDesigner2>./node_modules/.bin/typingsinstall --global --save file:./paper.d.ts
'.' no se reconoce como un comando interno o externo, un programa ejecutable o un archivo por lotes.
https://github.com/clark-stevenson/paper.d.ts Soy nuevo en paper.js, mecanografiado 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 en src: src/paper.d.ts
Recomiendo simplemente instalar ambas bibliotecas con npm para que:
npm install --save paper npm install --save @types/paper ( or --save-dev if you prefer )luego puede usar .angular-cli.json para incluir la biblioteca en su paquete incluyéndola en la etiqueta "scripts".
En .angular-cli.json, agregue la línea importing paper-full.min.js a sus scripts:
{ .... "apps": [ .... "scripts": [ "../node_modules/paper/dist/paper-full.min.js" ] ] }Una vez que haya terminado con eso, puede usar la biblioteca de papel en sus componentes. Le sugiero que haga un contenedor de componentes simple.
Algo así 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); } }desde este punto, tendrá control total sobre todas las funciones de paper.js, como dibujar directamente, crear objetos/símbolos, definir la interacción del mouse, crear herramientas, etc. http://paperjs.org/features/
Agregue elementos a project.activeLayer si desea mantenerlo simple.
const currentPath = new Path(); // ... add some points, set some properties this.project.activeLayer.addChild(currentPath);Espero que esto funcione; y ayuda :-)
@types/paper está en desuso. Paper proporciona sus propias definiciones de tipo, ya no es necesario instalarlo.
¡Esa es una gran respuesta de lwohlhart hermano!
Sin embargo, si su proyecto no puede ejecutarse normalmente. Intente volver a configurar en su archivo angular.json (actualmente uso Angular 8). La ruta ahora es "node_modules/paper/dist/paper-full.min.js"
¡Ojalá sea útil!