如何在Angular2中使用/包含fabricjs答案

【问题标题】：How to use / include fabricjs in Angular2如何在Angular2中使用/包含fabricjs
【发布时间】：2017-02-23 11:38:35
【问题描述】：

我想在我的项目中使用 fabricjs。我使用 bower 安装了 fabricjs 并在 index.html 中链接。但它不工作。请看下面的代码。

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>

这是组件文件“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
      });
  }
}

我搜索了很多参考资料，但找不到我的问题所在。请指教，谢谢。

【问题讨论】：

标签： javascript angular typescript fabricjs

【解决方案1】：

现代用法：

安装结构：npm i fabric
安装类型：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!'));
  }
}

【讨论】：

请注意，您可以通过在 package.json 中安装这样的结构来避免安装 cairo 的痛苦："postinstall": "npm install --no-optional --no-save fabric@2.7.x"。如果您只针对浏览器而不是服务器，它就可以工作。在fabric 决定为浏览器专门制作一个包之前，它是我找到的最佳解决方案。

【解决方案2】：

我可以在没有这条线的情况下使用 fabric.js

从“面料”导入{面料}；

在 index.html 上加载脚本并在 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);
  };
}

在浏览器控制台上输出：

1.6.7  app.component.ts:13

【讨论】：

【解决方案3】：

通过这种方式，我将 Fabric.js 添加到使用 angular-cli 创建的 Angular 项目中：

1) 在您的系统上安装Cairo。

注意：Cairo 是一个系统库，它为 Fabric.js 所依赖的节点画布提供支持。安装完成后，您可能需要在安装 Fabric 之前重新启动终端或命令提示符。

2) 安装 Fabric.js

npm install fabric --save

3) 为 Fabric.js 安装 TypeScript 定义

typings install fabric --source dt --save

4) 在需要的ts文件中导入fabric

import 'fabric';
declare const fabric: any;

Here你可以找到我的“Hello World”Angular + Fabric.js 项目。

其他链接：

Fabricjs website

Fabricjs docs

Fabric 和 type definitions

【讨论】：

hlinak 你能附上图书馆和文档的链接吗？谢谢。

【解决方案4】：

我最近有类似的问题，以下步骤解决了。（角度 2.3.1 + 角度 cli 1.0.0-beta.31）

在您的 src 文件夹下创建一个名为 typings.d.ts 的文件。
在里面放一行代码declare module 'fabric';。
然后你可以在你的 Angular 2 组件中import { fabric } from 'fabric';。

【讨论】：

【解决方案5】：

我也有同样的问题，下面是我的解决方案。

安装面料

$ npm install fabric --save
生成类型模块

$ typings install fabric --source dt --save
将declare module 'fabric';放在src/typings.d.ts的末尾
然后在Angular2组件中导入import { fabric } from 'fabric';。

它运行良好，并且还提供了织物自动完成建议。

【讨论】：

第二步后出现此错误。 MSBUILD：错误 MSB3428：无法加载 Visual C++ 组件“VCBuild.exe”。要解决此问题，1) 安装 .NET Framework 2.0 SDK，2) 安装 Microsoft Visual Studio 2005 或 3) 如果组件安装在其他位置，则将其位置添加到系统路径。 [E:\office-projects\image-editing-demo\node_modules\canvas\build\binding.sln]