All geek questions in one place

How to use / include fabricjs in Angular2

I want to use fabricjs in my project. I installed fabricjs using chat and linked in index.html. But that does not work. See 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 the 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 many links, but I can’t find out what is wrong with him. Please advice, thanks.

+4
source share
5 answers

I can use fabric.js without a string

import {fabric} of 'fabric';

by loading the script on index.html and declaring the library in 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);
  };
}

Exit to the browser console:

1.6.7  app.component.ts:13
+2
source

, Fabric.js Angular, angular -cli:

1) Cairo .

. Cairo - , node -canvas, Fabric.js. , .

2) Fabric.js

npm install fabric --save

3) TypeScript Fabric.js

typings install fabric --source dt --save

4) ts

import 'fabric';
declare const fabric: any;

"Hello World" Angular + Fabric.js.

:

- Fabricjs

Fabricjs

Fabric

+2

, . (angular 2.3.1 + angular -cli 1.0.0-beta.31)

  • typings.d.ts src.
  • declare module 'fabric';.
  • import { fabric } from 'fabric'; Angular 2 .
+1

:

  • : npm i fabric
  • : npm i @types/fabric

Angular 5.2.8 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!'));
  }
}
+1

, .

  • $ npm install fabric --save

  • $ typings install fabric --source dt --save

  • declare module 'fabric'; src/typings.d.ts

  • import { fabric } from 'fabric'; Angular2.

.

0

Source: https://habr.com/ru/post/1657714/

More articles:


All Articles