画架上的按钮

Question

我正在学习 javascript(尝试为 Windows 8 ui 创建游戏)。

这是我在画架上的按钮，但我认为这段代码太(太)丑陋了。按钮必须使用所有按钮状态的一个 3x 纹理来更改 mouseEvents 上的纹理。

也许有其他解决方案用于此目的？

使用:

btn_newgame = new my_controls.Button("button.png", "New Game", "30px sans-serif");
btn_newgame.set_position("center", 300);
btn_newgame.click = function (event) { console.log('newgame click'); };

按钮代码:

(function () {

Button.prototype = new createjs.Container();
Button.prototype.constructor = Button;

function Button(source_img, text, font, font_color) {
    this.initialize();
    this.mouseEventsEnabled = true;

    this.set_scale = set_scale;
    this.set_position = set_position;


    text = text || "";
    font = font || "12px sans-serif";
    font_color = font_color || "black";



    this.img_bitmap = new createjs.Bitmap(source_img)
    this.btn_text = new createjs.Text(text, font, font_color);
    this.btn_text.x = source_img.naturalWidth / 2 - this.btn_text.getMeasuredWidth() / 2;
    this.btn_text.y = this.btn_text.getMeasuredHeight() / 8;

    this.addChild(this.img_bitmap);
    this.addChild(this.btn_text);

    this.width = source_img.naturalWidth,
    this.height = source_img.naturalHeight / 4;


    // for different states = different pieces of one texture.
    this.states = {
        out: new createjs.Rectangle(0, 0, this.width, this.height),
        over: new createjs.Rectangle(0, this.height, this.width, this.height),
        down: new createjs.Rectangle(0, this.height * 2, this.width, this.height)
    };

    this.img_bitmap.sourceRect = this.states['out'];


    this.press;
    this.over;
    this.out;
    this.click;

    this.onPress = onPress;
    this.onMouseOver = onMouseOver;
    this.onMouseOut = onMouseOut;
    this.onClick = onClick;

}

function set_scale (scale_x, scale_y) {
    this.scaleX = scale_x || 1;
    this.scaleY = scale_y || 1;
}


function set_position (posX, posY) {

    posX = posX || 0;
    posY = posY || 0;


    if (typeof posX == "number") {
        this.x = posX;
    }
    else {
        switch (posX) {
            case "center":
                this.x = canvas.width / 2 - Math.floor(this.width / 2 * this.scaleX);
                break;
            case "left":
                this.x = 0;
                break;
            case "right":
                this.x = canvas.width - Math.floor(this.width * this.scaleX);
                break;
            default:
                this.x = 0;
        }
    }

    if (typeof posY == "number") {
        this.y = posY;
    }
    else {
        switch (posY) {
            case "center":
                this.y = canvas.height / 2 - Math.floor(this.height / 2 * this.scaleY);
                break;
            case "top":
                this.y = 0;
                break;
            case "bottom":
                this.y = canvas.height - Math.floor(this.height * this.scaleY);
                break;
            default:
                this.y = 0;
        }
    }
}



function onPress (event) {
    this.img_bitmap.sourceRect = this.states['down'];
    this.btn_text.x += 1;
    this.btn_text.y += 1;
    if (this.press)
        this.press(event);
}

function onMouseOver (event) {
    this.img_bitmap.sourceRect = this.states['over'];
    this.last_state = 'over';
    if (this.over)
        this.over(event);
}

function onMouseOut (event) {
    this.img_bitmap.sourceRect = this.states['out'];
    this.last_state = 'out';
    if (this.out)
        this.out(event);
}

function onClick (event) {
    this.img_bitmap.sourceRect = this.states['over'];
    this.btn_text.x -= 1;
    this.btn_text.y -= 1;
    if (this.click)
        this.click(event);
}

my_controls.Button = Button;
})(my_controls); // Button

Answer 1

对对象进行原型(prototype)设计是一个非常好的方法，但如果您想完全避免这种情况，您可以添加 DOM 按钮并将它们放置为 UI 的一部分，或者完全使用 DOM 创建 UI。

相关问题: Can I put an HTML button inside the canvas?

祝一切顺利，沙洛姆