Búsqueda de sitios web

javascript - Cómo usar/incluir fabricjs en Angular2

Quiero usar fabricjs en mi proyecto. Instalé fabricjs usando bower y lo enlacé en index.html. pero no funciona. Por favor, vea el código a continuación.

index.html

<html>

<head>
 <script>document.write('<base href="' + document.location + '" />');         </script>
  <title>Image Editor</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap/dist/css/bootstrap.min.css">

  <!-- 1. Load libraries -->
  <!-- Polyfill(s) for older browsers -->
  <script src="libs/core-js/client/shim.min.js"></script>
  <script src="libs/zone.js/dist/zone.js"></script>
  <script src="libs/reflect-metadata/Reflect.js"></script>
  <script src="libs/systemjs/dist/system.src.js"></script>

  <script src="css/jquery/dist/jquery.min.js"></script>
  <script src="css/bootstrap/dist/js/bootstrap.min.js"></script>
  // incuding fabricjs here
  <script src="../../bower_components/fabric.js/dist/fabric.min.js"></script>

  <!-- 2. Configure SystemJS -->
  <script src="systemjs.config.js"></script>
  <script>
  System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>

<!-- 3. Display the application -->

<body>
     <my-app>Loading...</my-app>
</body>
</html>

Este es el archivo del componente "stage.component.ts"

import {Component, OnInit} from '@angular/core';
import { ActivatedRoute, Router} from '@angular/router';
import { fabric } from 'fabric';
import { ImageService } from '../services/image.service';

declare var fabric:any;
 @Component({
   selector:'my-stage',
   styleUrls: ['./app/stage/stage.component.css'],
   templateUrl: './app/stage/stage.component.html',
 })

 export class StageComponent implements OnInit {
    title:string = 'Image Editor';
    imgpath: string = '';
     canvas:any = null;

   // fabric:any = null;
    constructor(
       private route: ActivatedRoute,
    ) {
    //  this.fabric = new fabric();
    }

  ngOnInit() {

     this.canvas = new fabric.Canvas('fstage', {
        isDrawingMode: true,
        selection: true
      });
  }
}

He buscado muchas referencias pero no pude averiguar qué está mal conmigo. Por favor, aconseje, gracias.

Respuesta #1

Uso moderno:

  1. Instalar Fabric: npm i fabric
  2. Tipos de instalación: npm i @types/fabric

Demostración con Angular 5.2.8 y Fabric 2.2.2

HTML

<div>
  <canvas id="myCanvas" width="500" height="500"></canvas>
</div>

TypeScript

import { Component, OnInit } from '@angular/core';
import { fabric } from 'fabric';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  canvas: any;

  ngOnInit() {
    this.canvas = new fabric.Canvas('myCanvas');
    this.canvas.add(new fabric.IText('Hello Fabric!'));
  }
}

Respuesta #2

Puedo usar fabric.js sin la línea

import { fabric } from 'fabric';

cargando el script en index.html y declarando la biblioteca en el archivo ts:

import { Component } from '@angular/core';
declare var fabric: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  printValue() {
    console.log(fabric.version);
  };
}

En la consola del navegador:

1.6.7  app.component.ts:13

Artículos relacionados