关闭

SAPUI5-HTML

522人阅读 评论(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(); });
        }

这里写图片描述

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:16996次
    • 积分:339
    • 等级:
    • 排名:千里之外
    • 原创:16篇
    • 转载:5篇
    • 译文:0篇
    • 评论:0条
    文章分类