0

我从 Kinetic.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'
        }
    }
);

我错过了什么？

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

基本上，您将类与接口混淆了。配置对象需要是一个接口，因为它只是一个属性包（没有实现，即函数）。您需要使用 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 回答
0

巴萨拉特

感谢您的回复。阅读您的评论后，我实施了您的建议。不幸的是，它仍然没有工作。在排除更多故障后，我发现我使用的 Kinetic.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 回答