需要與TypeScript使用fabricjs.d.ts的例子

我在一個項目中使用fabricjs我試圖轉換爲使用TypeScript，但我無法弄清楚如何使用它。以前我會通過執行以下操作創建自己的自定義對象：需要與TypeScript使用fabricjs.d.ts的例子

my.namespace.Control = fabric.util.createClass(fabric.Object, { 
    id: "", 
    type: 'Control', 
    color: "#000000", 
    ... 
});

在我的新項目，我已經安裝了從here類型定義文件，但我想不出應該怎麼使用呢？

看看.d.ts文件，fabric.Object看起來不是一個Function，所以不允許傳遞給createClass，而createClass本身返回void，所以我不能將值賦給一個變量。

即使所有這些工作，我應該如何格式化它，因此它的工作方式是TypeScript方式？即，我要導出哪些內容以便我可以將其導入需要Control類的其他地方？

任何人都有這樣做的例子嗎？

來源

2015-11-08 Matt Brailsford

-1

使用fabricjs.d.ts的老方法是在你的文件的頂部：

/// <reference path="path/to/your/fabricjs.d.ts" />

如果用tsd得到它，你必須引用您的tsd.d.ts包文件

但現在使用打字稿1.6.2和vscode您只需要通過tsd下載參考文件以獲取代碼中的定義。

在d.ts文件，你可以發現2種方法簽名：

createClass(parent: Function, properties?: any): void; 

createClass(properties?: any): void;

所以，你的代碼似乎無效，因爲fabric.Object作爲接口IObjectStatict不能asignable輸入功能。您可以將fabric.Object作爲一個函數執行操作

my.namespace.Control = fabric.util.createClass(<Function>fabric.Object, { 
    id: '', 
    type: 'Control', 
    color: '#000000', 
    ... 
});

來源

2015-11-09 10:35:23

我明白上面的答案，但有沒有因爲過任何變化？此外，我不確定我的.ts文件中的導入聲明的格式，以便使用結構。 –

您只需定義一個可擴展結構類的typescript類即可。

export interface IMindObjectOptions { 
    item: IMindItem; 
} 

export interface IMindExpanderOptions extends IMindObjectOptions { 
    x: number; 
    y: number; 
    radius: number; 
    isExpanded: boolean; 
} 

export class MindExpander extends fabric.Circle implements IMindObjectOptions { 

    public constructor(options: IMindExpanderOptions) { 
     const circleOptions: ICircleOptions = { 
      originX: "center", 
      originY: "center", 
      left: options.x, 
      top: options.y, 
      radius: options.radius, 
      stroke: "#000000", 
      fill: options.isExpanded ? "#00FFFF": "#00FF00", 
      selectable: false 
     }; 
     super(circleOptions); 
     this.item = options.item; 
    } 

    public readonly item: IMindItem; 
}

！上面的代碼在瀏覽器中工作正常，但不在nodejs環境中。

要enviornment的NodeJS工作，比如運行單元測試沒有瀏覽器，你需要：

import {assert} from "chai"; 
import * as f from 'fabric'; 
import {ITextOptions} from "fabric"; 

declare function require(s: string): any; 
declare const __dirname: string; 

const fabric = require("fabric").fabric; 

interface ITextConstructor { 
    new(text: string, options: ITextOptions): f.Text; 
} 
function getTextConstructor(): ITextConstructor { 
    return fabric.Text; 
} 

describe("nodejs setup", function() { 
    it("fabric is imported correctly", function() { 
     const x = fabric.Text as f.Text; 
     assert.equal(typeof x, "function"); 
    }); 
    it("fabric class is extensible", function() { 
     class SubText extends getTextConstructor() { 
      public constructor(text: string, options: fabric.ITextOptions) { 
       super(text, options); 
      } 
     } 

     const c = new SubText("Hello", {left: 100, top: 100}); 
     assert.equal(c.text, "Hello"); 
     assert.isNotNull(c); 
    }); 
});

來源

2017-03-27 07:22:49 Smartkid

需要與TypeScript使用fabricjs.d.ts的例子

回答

相關問題