web-dev-qa-db-ja.com

Angular2でfabricjsを使用/含める方法

プロジェクトで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
      });
  }
}

私は多くの参考文献を検索しましたが、私の何が悪いのかを見つけることができませんでした。アドバイスをお願いします、ありがとうございます。

javascriptangulartypescriptfabricjs
10
Tushar Kadam

行なしで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
5
lfergon

現代の使用法：

  1. ファブリックのインストール：npm i fabric
  2. インストールの種類：npm i @types/fabric

Angular 5.2.8およびFabric2.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!'));
  }
}
15
2Toad

このようにして、Angular-cliを使用して作成されたAngularプロジェクトにFabric.jsを追加しました：

1）システムに Cairo をインストールします。

注：Cairoは、Fabric.jsが依存するnode-canvasを強化するシステムライブラリです。インストールが完了したら、ファブリックをインストールする前に、ターミナルを再起動するか、プロンプトを実行する必要がある場合があります。

2）Fabric.jsをインストールします

npm install fabric --save

3）Fabric.jsのTypeScript定義をインストールします

typings install fabric --source dt --save

4）必要なtsファイルにファブリックをインポートします

import 'fabric';
declare const fabric: any;

ここ 私の「HelloWorld」Angular + Fabric.jsプロジェクトを見つけることができます。

その他のリンク：

Fabricjsウェブサイト

Fabricjs docs

ファブリック および タイプ定義

4
Milan Hlinák

最近同様の問題が発生しました。次の手順で解決しました。 （angular 2.3.1 + angle-cli 1.0.0-beta.31）

  1. srcフォルダーの下にtypings.d.tsというファイルを作成します。
  2. コードを1行入れますdeclare module 'fabric'; 初期化。
  3. 次に、import { fabric } from 'fabric'; Angular 2コンポーネント。
1
Xinan

私も同じ問題を抱えています、以下は私の解決策です。

  1. ファブリックをインストールする

    $ npm install fabric --save

  2. タイピングモジュールを生成する

    $ typings install fabric --source dt --save

  3. プットdeclare module 'fabric'; の終わりに src/typings.d.ts

  4. 次に、インポートimport { fabric } from 'fabric';Angular2コンポーネント内。

正常に動作しており、ファブリックのオートコンプリートの提案も行っています。

0
PARAMANANDA PRADHAN