How to use / include fabricjs in Angular2

2019-03-11 17:25发布

站内问答 / JavaScript
962 5 6

I want use fabricjs in my project. I installed fabricjs using bower and linked in index.html. but it is not working. Please see the below code.

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>

This is component file "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
      });
  }
}

I have search many reference but couldn't find out what is wrong with my. Please advice, thank you.

5条回答
手持菜刀，她持情操
2楼-- · 2019-03-11 17:34

I also have same problem, following is my solution.

  1. Install fabric

    $ npm install fabric --save

  2. Generate typings module

    $ typings install fabric --source dt --save

  3. Put declare module 'fabric'; at the end of src/typings.d.ts

  4. Then import import { fabric } from 'fabric'; in the Angular2 Component.

It is working fine and giving fabric autocomplete suggestions also.

查看更多
0人赞 添加讨论(0) 举报
SAY GOODBYE
3楼-- · 2019-03-11 17:36

In this way I added Fabric.js to my Angular project created using angular-cli:

1) Install Cairo on your system.

Note: Cairo is a system library which powers node-canvas, which Fabric.js relies on. When the installation is complete, you may need to restart your terminal or command prompt before installing fabric.

2) Install Fabric.js

npm install fabric --save

3) Install TypeScript definitions for Fabric.js

typings install fabric --source dt --save

4) Import fabric in required ts file

import 'fabric';
declare const fabric: any;

Here you can find my "Hello World" Angular + Fabric.js project.

Other links:

Fabricjs website

Fabricjs docs

Fabric and type definitions

查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
4楼-- · 2019-03-11 17:36

I have similar issue recently, the following steps resolved it. (angular 2.3.1 + angular-cli 1.0.0-beta.31)

  1. Create a file called typings.d.ts under your src folder.
  2. Put a line of code declare module 'fabric'; in it.
  3. Then you can import { fabric } from 'fabric'; in your Angular 2 components.
查看更多
0人赞 添加讨论(0) 举报
Melony?
5楼-- · 2019-03-11 17:53

I can use fabric.js without the line

import { fabric } from 'fabric';

loading the script on index.html and declaring the library on the ts file:

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

Out on browser console:

1.6.7  app.component.ts:13
查看更多
0人赞 添加讨论(0) 举报
\"骚年 ilove
6楼-- · 2019-03-11 17:55

Modern usage:

  1. Install Fabric: npm i fabric
  2. Install types: npm i @types/fabric

Demo with Angular 5.2.8 and 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!'));
  }
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)