Button 画架上的按钮

我只是在学习javascript（尝试为Windows8UI创建一个游戏）

这是我在easeljs上的按钮，但我认为这段代码太难看了。 按钮必须使用所有按钮状态的一个3倍纹理更改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

---

对对象进行原型化是一种很好的方法，但是如果您想完全避免这种情况，可以添加DOM按钮并将其定位为UI的一部分，或者完全使用DOM创建UI

相关问题：

祝你一切顺利， 沙洛姆