Fatal编程技术网
  • javascript/
  • Javascript 如何在Angular2中使用/包含fabricjs

Javascript 如何在Angular2中使用/包含fabricjs

javascript angular typescript

Javascript 如何在Angular2中使用/包含fabricjs,javascript,angular,typescript,fabricjs,Javascript,Angular,Typescript,Fabricjs,我想在我的项目中使用fabricjs。我使用bower安装了fabricjs，并在index.html中链接。但它不起作用。请参阅下面的代码 index.html <html> <head> <script>document.write('<base href="' + document.location + '" />'); </script> <title>Image Editor</tit

我想在我的项目中使用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>
我查了很多参考资料，但找不出我的电脑出了什么问题。请给我建议，谢谢。

我可以不用线就使用fabric.js

从“fabric”导入{fabric}

在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
我最近遇到了类似的问题，以下步骤解决了它。（angular 2.3.1+angular cli 1.0.0-beta.31）

  • 在
    src
    文件夹下创建一个名为typings.d.ts的文件
  • 放置一行代码
    声明模块'fabric'在其中
  • 然后您可以
    从'fabric'导入{fabric}在您的角2组件中
    • 通过这种方式，我将Fabric.js添加到使用Angular cli创建的Angular项目中：

    1）安装到您的系统上。

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

    2）安装Fabric.js

    npm install fabric --save 

    typings install fabric --source dt --save
    3）为Fabric.js安装类型脚本定义

    npm install fabric --save 

    typings install fabric --source dt --save
    4）在所需的ts文件中导入结构

    import 'fabric';
declare const fabric: any;
    您可以找到我的“Hello World”Angular+Fabric.js项目

    其他链接：

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

  • 安装织物

    $npm安装结构--保存

  • 生成打字模块

    $typings安装结构--源dt--保存

  • 放置
    声明模块'fabric'在
    src/typings.d.ts的末尾
  • 然后从“fabric”导入
    import{fabric}
    • 它工作良好，并给织物自动完成的建议

    现代用法：

  • 安装结构：
    npm i结构
  • 安装类型：
    npm i@types/fabric

    • HTML

    <div>
  <canvas id="myCanvas" width="500" height="500"></canvas>
</div>
    hlink能否请您附加指向库和文档的链接谢谢。我在执行第二步后遇到此错误。MSBudi:错误MSB328：无法加载VisualC++组件“VCuBuff.exe”。要解决此问题，请1）安装.NET Framework 2.0 SDK，2）安装Microsoft Visual Studio 2005，或3）将组件的位置添加到系统路径（如果组件安装在其他位置）。[E:\office projects\image editing demo\node\u modules\canvas\build\binding.sln]注意，通过在包中安装类似的结构，您可以省去安装cairo的麻烦。json:
    “postinstall”：“npm安装--无可选--无保存”fabric@2.7.x“
    。如果您只针对浏览器，而不是服务器，那么它就可以工作。直到fabric决定制作一个专用于浏览器的软件包，它才是我找到的最好的解决方案。