調和描画アプリケーションの背景画像を変更

Question

私はmrdoob harmony Webアプリケーションを作っています。メニューにボタンを追加してbackground.iに画像を追加したいのですが、背景画像挿入のこの例が見つかりました。どうすればよいですか？メニューのボタンを作る？

これは、私はあなたがノードのカップルを追加する必要が新しいボタン、メニューinit機能（Menu.prototype.init）で

function Menu() 
 
{ 
 
    this.init(); 
 
} 
 

 
Menu.prototype = 
 
{ 
 
    container: null, 
 

 
    foregroundColor: null, 
 
    backgroundColor: null, 
 

 
    selector: null, 
 
    //save: null, 
 
    exportImage: null, 
 
    resetBrush: null, 
 
    clear: null, 
 
    //about: null, 
 

 
    init: function() 
 
    { 
 
     function newColorWell(width, height, identifier) 
 
     { 
 
      var well = document.createElement("canvas"); 
 
      well.style.cursor = 'pointer'; 
 
      well.width = width; 
 
      well.height = height; 
 
      well.className = 'well ' + identifier; 
 
      return well; 
 
     } 
 

 
     var option, space, separator, color_width = 20, color_height = 15; 
 

 
     this.container = document.createElement("div"); 
 
     this.container.className = 'gui menu'; 
 
     this.container.style.position = 'absolute'; 
 
     this.container.style.top = '-7px'; 
 

 
     this.foregroundColor = newColorWell(color_width, color_height, 'fg-color'); 
 
     this.container.appendChild(this.foregroundColor); 
 

 
     this.setForegroundColor(COLOR); 
 

 

 

 
     this.backgroundColor = newColorWell(color_width, color_height, 'bg-color'); 
 
     this.container.appendChild(this.backgroundColor); 
 

 
     this.setBackgroundColor(BACKGROUND_COLOR); 
 

 

 

 
     this.selector = document.createElement("select"); 
 
     this.selector.style.marginRight = '3px'; 
 

 
     for (i = 0; i < BRUSHES.length; i++) 
 
     { 
 
      option = document.createElement("option"); 
 
      option.id = i; 
 
      option.textContent = BRUSHES[i].toUpperCase(); 
 
      this.selector.appendChild(option); 
 
     } 
 

 
     this.container.appendChild(this.selector); 
 

 

 

 
     this.save = document.createElement("span"); 
 
     this.save.style.marginRight = '3px'; 
 
     this.container.appendChild(this.save); 
 

 
     
 

 
     this.exportImage = document.createElement("span"); 
 

 
     this.exportImage.style.marginLeft = '3px'; 
 
     this.exportImage.style.marginRight = '3px'; 
 
     this.container.appendChild(this.exportImage); 
 

 
     this.resetBrush = document.createElement("span"); 
 
    
 
     this.resetBrush.style.marginRight = '3px'; 
 
     this.container.appendChild(this.resetBrush); 
 

 
     this.clear = document.createElement("Clear"); 
 
     this.clear.className = 'button'; 
 
     this.clear.textContent = 'CLEAR'; 
 
     this.clear.style.marginRight = '3px'; 
 
     this.container.appendChild(this.clear); 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t 
 

 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t 
 

 
     this.about = document.createElement("About"); 
 

 
     this.container.appendChild(this.about); 
 
    }, 
 

 
    setForegroundColor: function(color) 
 
    { 
 
     this.foregroundColor.style.backgroundColor = 'rgb(' + color[0] + ', ' + color[1] +', ' + color[2] + ')'; 
 
    }, 
 

 
    setBackgroundColor: function(color) 
 
    { 
 
     this.backgroundColor.style.backgroundColor = 'rgb(' + color[0] + ', ' + color[1] +', ' + color[2] + ')'; 
 
    } 
 
}

Answer 1

を作成する必要が調和からメニューのコードです - buttonおよびinput[type="file"]。

あなたがこのコードを使用して行います。

// add background control 
this.background = document.createElement("div"); 
this.background.className = "button background"; 
this.background.innerHTML = "Background"; 
this.container.appendChild(this.background); 
// add fileupload 
this.uploader = document.createElement("input"); 
this.uploader.type = 'file'; 
this.uploader.className = "file-uploader"; 
this.background.appendChild(this.uploader); 

入力ファイルを隠し、それはあなたがこのスタイルを追加する必要が働くようにするには：

ここ

.background { 
    position:relative; 
} 
.background > input { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    opacity: 0; 
    cursor:pointer; 
} 

が結果にbinです。