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(); });
}
SAPUI5-HTML
最新推荐文章于 2024-07-24 19:45:00 发布