kinetic.d.ts的插件標籤丟失

我下載Kinetic.d.ts從Kinectic.d.ts kinetic.d.ts的插件標籤丟失

它遺漏標籤插件，所以我試圖創建它。

我創建：

class Label extends Group 
{ 
    constructor(config: LabelConfig); 
    setText(text: Text); 
    getText(): Text; 
    setRect(rect: LabelRect); 
    getRect(): LabelRect; 
} 

class LabelRect extends Shape 
{ 
    constructor(config: LabelRectConfig); 
    setPointerDirection(pointerDirection: string); 
    setPointerWidth(pointerWidth: number); 
    setPointerHeight(pointerHeight: number); 
    setCornerRadius(cornerRadius: number); 
    getPointerDirection(): string; 
    getPointerWidth(): number; 
    getPointerHeight(): number; 
    getCornerRadius(): number; 
} 

interface LabelConfig extends DrawOptionsConfig, ObjectOptionsConfig 
{ 
    rect: LabelRect; 
    text: Text; 
} 

interface LabelRectConfig extends DrawOptionsConfig, ObjectOptionsConfig 
{ 
    pointerDirection?: string; 
    pointerWidth?: number; 
    pointerHeight?: number; 
    cornerRadius?: number; 
}

我得到這個錯誤（我格式化錯誤讀取目的）：

Error 1 Supplied parameters do not match any signature of call target: 
Could not apply type 'LabelConfig' to argument 1, which is of type 
'{ 
    x: number; 
    y: number; 
    opacity: number; 
    listening: bool; 
    text: 
    { 
     text: string; 
     fontFamily: string; 
     fontSize: number; 
     padding: number; 
     fill: string; 
    }; 
    rect: 
    { 
     fill: string; 
     pointerDirection: string; 
     pointerWidth: number; 
     pointerHeight: number; 
     lineJoin: string; 
    }; 
}'

我實例化的標籤，如：

var labelNumerator = new Kinetic.Label(
    { 
     x: LEFT_MARGIN + numerator.getTextWidth() + 50, 
     y: numerator.getY() + 5, 
     opacity: 0.75, 
     listening: false, 
     text: { 
      text: 'Numerator', 
      fontFamily: FONT, 
      fontSize: LABEL_FONT_SIZE, 
      padding: LABEL_PADDING, 
      fill: LABEL_TEXT_COLOR 
     }, 
     rect: { 
      fill: LABEL_BACKGROUND_COLOR, 
      pointerDirection: 'left', 
      pointerWidth: LABEL_FONT_SIZE + LABEL_PADDING * 2, 
      pointerHeight: LABEL_FONT_SIZE + LABEL_PADDING * 2, 
      lineJoin: 'round' 
     } 
    } 
);

我錯過了什麼？

來源

2013-05-10 mrs99mrs99

比較的是輸入您已聲明的接口時，我看不出什麼毛病，所以也許你錯過了所需的這些接口的一個'LabelConfig'或'LabelRect'或'Text'延伸的特性。一種檢查方式可能是創建一個虛擬類，它實現''LabelConfig''，看看編譯器是否指出了一些缺失的屬性（你可能需要深入研究'LabelRect'和'Text'。 – JcFx 2013-05-10 19:25:19

基本上你很困惑類與接口。配置對象需要是一個接口，因爲它只是一個屬性包（沒有實現即函數）。您需要使用Config對象而不是類。

只要你宣佈以下爲一類：

class LabelRect extends Shape 
{ 
    constructor(config: LabelRectConfig); 
    setPointerDirection(pointerDirection: string); 
    setPointerWidth(pointerWidth: number); 
    setPointerHeight(pointerHeight: number); 
    setCornerRadius(cornerRadius: number); 
    getPointerDirection(): string; 
    getPointerWidth(): number; 
    getPointerHeight(): number; 
    getCornerRadius(): number; 
}

你就錯了路。由於LabelRect由您配置的接口需要：

interface LabelConfig extends DrawOptionsConfig, ObjectOptionsConfig 
{ 
    rect: LabelRect;

這意味着調用構造函數時需要提供所有這些功能（以及那些在基類）：

constructor(config: LabelConfig);

你需要看看在文檔中找出如何在合適的地方使用只需接口。

以下工作但可能不正確，閱讀文檔（特別是對的setRect/getRect）：

/// <reference path="kinetic.d.ts" /> 

declare module Kinetic { 

    class Label extends Group { 
     constructor(config: LabelConfig); 
     setText(text: Text); 
     getText(): Text; 
     setRect(rect: LabelRectConfig); 
     getRect(): LabelRectConfig; 
    } 

    class LabelRect extends Shape { 
     constructor(config: LabelRectConfig); 
     setPointerDirection(pointerDirection: string); 
     setPointerWidth(pointerWidth: number); 
     setPointerHeight(pointerHeight: number); 
     setCornerRadius(cornerRadius: number); 
     getPointerDirection(): string; 
     getPointerWidth(): number; 
     getPointerHeight(): number; 
     getCornerRadius(): number; 
    } 

    interface LabelRectConfig extends RectConfig{ 

    } 

    interface LabelConfig extends DrawOptionsConfig, ObjectOptionsConfig 
    { 
     rect: LabelRectConfig; 
     text: TextConfig; 
    } 

    interface LabelRectConfig 
    { 
     pointerDirection?: string; 
     pointerWidth?: number; 
     pointerHeight?: number; 
     cornerRadius?: number; 
    } 
} 


var labelNumerator = new Kinetic.Label(
    { 
     x: LEFT_MARGIN + numerator.getTextWidth() + 50, 
     y: numerator.getY() + 5, 
     opacity: 0.75, 
     listening: false, 
     text: { 
      text: 'Numerator', 
      fontFamily: FONT, 
      fontSize: LABEL_FONT_SIZE, 
      padding: LABEL_PADDING, 
      fill: LABEL_TEXT_COLOR 
     }, 
     rect: { 
      fill: LABEL_BACKGROUND_COLOR, 
      pointerDirection: 'left', 
      pointerWidth: LABEL_FONT_SIZE + LABEL_PADDING * 2, 
      pointerHeight: LABEL_FONT_SIZE + LABEL_PADDING * 2, 
      lineJoin: 'round', 
      width: 999, // Need to specify as not optional 
      height: 999, // Need to specify as not optional 
     } 
    } 
    );

來源

2013-05-10 23:25:54 basarat

BASarat

感謝響應。在閱讀您的評論後，我實施了您的建議。不幸的是，它仍然沒有工作。在進一步排除故障之後，我發現我使用的Kinectic.d.ts有一個字符串Kinetic.Text.padding。

padding?: string;

我回顧了Kinetic的Text.js文件，它將填充數字設置爲默認值。

Kinetic.Node.addGetterSetter(Kinetic.Text, 'padding', 0);

所以我改變了TextConfig從填充？：字符串;到

來源

2013-05-12 13:42:58 mrs99mrs99

哎呀....我意外提交沒有完成我的答案...

因此，我改變TextConfig從

padding?: string;

到

padding? number;

這似乎解決這個問題。

我對您建議的代碼做了一些小改動。

class Label extends Group 
{ 
    constructor(config: LabelConfig); 
    setText(text: TextConfig); 
    getText(): TextConfig; 
    setRect(rect: LabelRectConfig); 
    getRect(): LabelRectConfig; 
} 

interface LabelConfig extends DrawOptionsConfig, ObjectOptionsConfig 
{ 
    rect: LabelRectConfig; 
    text: TextConfig; 
} 

interface LabelRectConfig extends DrawOptionsConfig, ObjectOptionsConfig 
{ 
    width?: number; 
    height?: number; 
    pointerDirection?: string; 
    pointerWidth?: number; 
    pointerHeight?: number; 
    cornerRadius?: number; 
}

這似乎工作。你怎麼看？

來源

2013-05-12 13:51:51 mrs99mrs99

kinetic.d.ts的插件標籤丟失

回答

相關問題