更改和谐绘图应用程序的背景图像

Question

我正在mrdoob harmony绘图web应用程序，我想在菜单中添加一个按钮以将图像添加到background.i已找到此示例的背景图像插入http://jsfiddle.net/tc3r4sj5/但我怎么能在菜单中为它做一个按钮？

这是从和谐的菜单，在这里我需要创建一个新的按钮

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

在你的菜单init功能（Menu.prototype.init），你需要添加节点的夫妇的代码 - 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与结果。