SAPUI5-HTML

最新推荐文章于 2024-07-24 19:45:00 发布

Liuyingao_dao

最新推荐文章于 2024-07-24 19:45:00 发布

阅读量1.1k

点赞数

分类专栏： SAPUI5

本文链接：https://blog.csdn.net/liuyingao_dao/article/details/46827427

版权

SAPUI5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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(); });
        }