Question

我正在制作mrdoob harmony绘图网页应用程序，我想在菜单中添加一个按钮，将图像添加到背景中。我已经找到了这个背景图片插入示例http://jsfiddle.net/tc3r4sj5/但是怎么能我在菜单中为它做了一个按钮？

这是和谐菜单的代码，我需要创建一个新按钮

＆＃13;

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);
		
		
		
		

		
		
		
		

        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] + ')';
    }
}

＆＃13;

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的结果。

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

1 个答案: