ウェブサイト検索

typescript - 「Canvasはコンストラクタではありません」エラー - Angular 6でFabricJSを使用する

私は最近Angular 5から6にアップグレードされたプロジェクトに取り組んでいます。新しい機能を追加しており、データから画像を描画する必要があるため、CanvasやSVGのDOMオブジェクトを使おうとしています。FabricJSには私が必要とする多くの機能があります。

昨夜、プロジェクトに追加しようとしました。ウェブサイトからFabricJSのフルDEV/MINバージョン、v2.3.3をダウンロードしました。それから、node_modulesフォルダに「fabric」フォルダを作り、そこに*.jsファイルを入れました。angular.jsonファイルを編集して、次のようにしました:

    "scripts": [
      "node_modules/fabric/fabric.js"
    ]

次に、これを使って typings.d.ts ファイルを作成しました:

declare const fabric: any;

最後に、私のモジュールでは、このようにインポートします:

import * as fabric from 'fabric';

ページにキャンバス要素を置き、それに「C」と名前を付けました

<canvas id="c"></canvas>

そして次に、布コードを使用してみてください:

        // create a wrapper around native canvas element (with id="c")
        const canvas = new fabric.Canvas('c');

ファブリックコードが実行されると、エラーが発生します：

***ERROR TypeError: fabric__WEBPACK_IMPORTED_MODULE_2__.Canvas is not a constructor
at SafeSubscriber._next***

これが何を意味するのか、私はあまりよく分かりません。答えを探すのに少し時間を費やしましたが、あまり多くは見つかりませんでした。ただ、こちらのページは見つけました:

Fabric.js と Typescript と Webpack: Canvas はコンストラクタではありません

これは私の問題にかなり似ていますが、私はまだAngularに慣れていないため、何が起こっているのか常に理解できるわけではありません。その投稿では、webpack.mix.jsファイルを変更することについて話しています。しかし、私はそのようなファイルを持っておらず、Angular 6には新しいバージョンのWebPackがあることを知っています。もしかしたらそれが問題を引き起こしているのでしょうか？

これをどう直すかについて何か考えはありますか？どこから始めればいいですか？

回答 #1

まず最初に確認するのは、インポート文です。

生地は〜として輸入されます

import { fabric } from 'fabric';

webpackの設定やFabric全般に関しては、こちらをご覧ください：

https://github.com/fabricjs/fabricjs-webpack

ここでは、必要に応じて npm モジュールを直接使用するための設定例を見つけることができます。またいずれにしても、webpack が Node の依存関係をバンドルしようとするのを回避するのに役立ちます。

回答 #2

私は次の手順に従って、グローバル輸出としてファブリックを使用しています：

  • npm install fabric を実行する
  • スクリプトに追加: ["node_modules/fabric/dist/fabric.js"]
  • typings.d.ts に追加してください: declare const fabric: any;
  • インポートせずに使用してください: const canvas=new fabric.Canvas('c');
  • 利益

最後の部分が欠けていると思います。もしAngularのスクリプトにライブラリを追加すると、インポートする必要はなくなります。さもなければ、ライブラリの異なるコピーが2つ存在することになります。モジュールとして使用したい場合は、スクリプト配列に追加すべきではありません。詳細はこちら: https://github.com/angular/angular-cli/wiki/stories-global-scripts#using-global-libraries-inside-your-app

これが役に立てば幸いです。

関連記事