easeljs上的按鈕

Question

我只是學習JavaScript（嘗試創建一個遊戲的Windows 8用戶界面）。

這是我在easeljs上的按鈕，但我認爲這個代碼太（toooooo）醜陋。 按鈕必須使用所有按鈕狀態的一個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

原型的目的是做一個很好的方式，但如果你想避免這種情況完全只需要添加DOM按鈕和將其定位爲您的用戶界面的一部分或完全使用DOM創建用戶界面。

相關問題： Can I put an HTML button inside the canvas?

一切順利， 沙洛姆