0

Kinetic.d.ts からKinetic.d.tsをダウンロードしました

Label プラグインがないので、作成しようとしています。

私が作成しました：

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'
        }
    }
);

私は何が欠けていますか？

4

3 に答える 3

0

おっと....回答を完了せずに誤って送信してしまいました...

だから私は 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-12T13:51:51.630 に答える
0

バサラト

返信ありがとうございます。あなたのコメントを読んだ後、私はあなたの提案を実装しました。残念ながら、それでもうまくいきませんでした。さらにトラブルシューティングを行った後、使用していた Kinectic.d.ts に Kinetic.Text.padding が文字列として含まれていることがわかりました。

padding?: string;

Kinetic の Text.js ファイルを確認したところ、デフォルトで数値としてパディングが設定されています。

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

そこで、TextConfig を padding?: string; から変更しました。に

于 2013-05-12T13:42:58.210 に答える
0

基本的に、クラスとインターフェースを混同しています。構成オブジェクトは単なるプロパティ バッグであるため (実装、つまり関数なし)、インターフェイスである必要があります。クラスの代わりに 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-10T23:25:54.683 に答える