SAPUI5-HTML

来源:互联网 发布:t在c语言中是什么意思 编辑:程序博客网 时间:2024/05/17 06:03
var oHtml = new sap.ui.core.HTML("html1", {            content : "<div style='position:relative;background-color:black;width:64px;height:64px'>" + "<div style='position:absolute;background-color:rgb(200,  0,  0);width:8px;height:8px;top:28px;left:48px' ></div>" +"<div style='position:absolute;background-color:rgb(200,100,  0);width:8px;height:8px;top:18px;left:45px' ></div>" +"<div style='position:absolute;background-color:rgb(200,200,  0);width:8px;height:8px;top:11px;left:38px' ></div>" +"<div style='position:absolute;background-color:rgb(100,200,  0);width:8px;height:8px;top: 8px;left:28px' ></div>" +"<div style='position:absolute;background-color:rgb(  0,200,  0);width:8px;height:8px;top:11px;left:18px' ></div>" +"<div style='position:absolute;background-color:rgb(  0,200,100);width:8px;height:8px;top:18px;left:11px' ></div>" +"<div style='position:absolute;background-color:rgb(  0,200,200);width:8px;height:8px;top:28px;left: 8px' ></div>" +"<div style='position:absolute;background-color:rgb(  0,100,200);width:8px;height:8px;top:38px;left:11px' ></div>" +"<div style='position:absolute;background-color:rgb(  0,  0,200);width:8px;height:8px;top:45px;left:18px' ></div>" +"<div style='position:absolute;background-color:rgb(100,  0,200);width:8px;height:8px;top:48px;left:28px' ></div>" + "<div style='position:absolute;background-color:rgb(200,  0,200);width:8px;height:8px;top:45px;left:38px' ></div>" +"<div style='position:absolute;background-color:rgb(200,  0,100);width:8px;height:8px;top:38px;left:45px' ></div>" +"</div>",            preferDOM : false,            afterRendering : function(e) {                if ( !e.getParameters()["isPreservedDOM"] )                    {                        var $=e.getSource().$();                        $.click(function(e) {                        addColorBlockAtCursor($, e, 64, 8);                        });                    }            }        });        oPanel.addContent(oHtml);        return oPanel;        function rgb(r,g,b) {            return 'rgb(' + Math.round(255*r) + ',' + Math.round(255*g) + ',' + Math.round(255*b) + ')';        }        function hsb2rgb(h,s,b) {            h = (360.0 * h / 255.0);            s = s / 255.0;            b = b / 255.0;            var f,i,hTemp,p,q,t;            if ( s == 0 ) {                // color is on black-and-white center line                return rgb(b,b,b);            } else {                // chromatic color                h = (h % 360) / 60.0;     // h is now IN [0,6)                i = Math.floor(h);        // largest integer <= h                f = h - i;                  // fractional part of h                p = b * (1.0 - s);                q = b * (1.0 - (s * f));                t = b * (1.0 - (s * (1.0 - f)));                switch(i) {                    case 0: return rgb(b,t,p);                    case 1: return rgb(q,b,p);                    case 2: return rgb(p,b,t);                    case 3: return rgb(p,q,b);                    case 4: return rgb(t,p,b);                    case 5: return rgb(b,p,q);                }            }        }        function addColorBlockAtCursor($, e, psize, size) {            var oOffset;            if (typeof e.offsetX === "undefined" ) {                oOffset = jQuery(e.target).offset();                e.offsetX = e.pageX - oOffset.left;                e.offsetY = e.pageY - oOffset.top;            }            var dx = e.offsetX - psize/2;            var dy = -(e.offsetY - psize/2);            var a = 2 * Math.PI + (dx < 0 ? Math.PI - Math.atan2(dy, -dx) : Math.atan2(dy, dx));            var h = a / 2 / Math.PI * 255.0;            colorBlock(hsb2rgb(h, 255, 200), e.offsetX-4, e.offsetY-4, size).appendTo($);        }        function colorBlock(sColor, iX, iY, iSize) {            return jQuery("<div/>").                attr("title", sColor).                css({                    "position" : "absolute",                    "background-color" : sColor,                    "top" : iY+"px",                    "left" : iX+"px",                    "width" : iSize+"px",                    "height" : iSize+"px"                }).                click(function(e) { jQuery(this).remove(); });        }

这里写图片描述

0 0