미리보기 : http://oxtag.com/html/ex/roundBorderBox.html
<html>
<head>
<title>라운드 박스셋</title>
<script type="text/JavaScript" language="JavaScript">
function jjArrayMap(arr) {
var Str = "array(\n";
for(var key in arr) {
Str += "["+key+"] => "+arr[key]+"\n";
}
return Str
}
function jjCircleInit(ratio,border,rtnArr)
{
var x, y, thres;
if( ratio == 0 ) return [0,0];
if(!rtnArr) {
var i,j;
rtnArr = [];
for(i=0,j=(ratio+border-2); i<=j; i++) {
rtnArr[i] = [1000,0];
}
}
y = ratio -1;
thres = -3 - (ratio + ratio);
for(x=0; x < y; x++) {
if( thres < 0 ) thres += 6 + (x << 2);
else {
thres += 10 + ((x - y) << 2);
y--;
}
rtnArr = jjCircleBorder(rtnArr, x, ratio + border - y - 2);
rtnArr = jjCircleBorder(rtnArr, y, ratio + border - x - 2);
}
border--;
if(border > 0) rtnArr = jjCircleInit(ratio+1,border,rtnArr);
return rtnArr;
}
function jjCircleBorder(rtnArr, x, y)
{
if(!rtnArr[y]) rtnArr[y] = [100, 0];
if(rtnArr[y][0] > x) rtnArr[y][0] = x;
if(rtnArr[y][1] < x) rtnArr[y][1] = x;
return rtnArr;
}
function jjRoundBoxInit(Obj, objRound, objBorder, objBorderColor, objFill)
{
objRound = parseInt(objRound);
objBorder = parseInt(objBorder);
var margin = jjCircleInit(objRound,objBorder);
var piece;
var topSet = document.createElement('DIV');
for(var key in margin) {
piece = document.createElement('DIV');
var marginLeft = objRound + objBorder - margin[key][1] -2;
piece.style.margin = '0px '+ marginLeft +'px';
var borderWidth = margin[key][1] - margin[key][0] +1;
piece.style.borderLeft = borderWidth +'px solid';
piece.style.borderRight = borderWidth +'px solid';
piece.style.borderColor = objBorderColor;
piece.style.backgroundColor = (margin[key][0] == 0 ? objBorderColor : objFill);
piece.style.height = '1px';
piece.style.overflow = 'hidden';
topSet.appendChild(piece);
}
var botSet = document.createElement('DIV');
for(var i=topSet.childNodes.length - 1; i>=0; i--) {
botSet.appendChild(topSet.childNodes[i].cloneNode(true));
}
var content = document.createElement('DIV');
content.style.borderLeft = objBorderColor +' '+ borderWidth +'px solid';
content.style.borderRight = objBorderColor +' '+ borderWidth +'px solid';
content.style.backgroundColor = objFill;
content.style.padding = '0px '+objRound+'px';
content.innerHTML = Obj.innerHTML;
Obj.innerHTML = ''
Obj.appendChild(topSet);
Obj.appendChild(content);
Obj.appendChild(botSet);
}
</script>
</head>
<body style="font-size:9pt;font-family:'맑은 고딕',Dotum,돋움;">
라운드 박스셋 모음<BR />
<BR />
Sample 1
<div id=r10b1ffff>
jjRoundBoxInit(document.getElementById('r10b1ffff'), 10, 1, '#e88', '#eee');//Object, round, border, fill
</div>
<script type="text/JavaScript" language="JavaScript">
jjRoundBoxInit(document.getElementById('r10b1ffff'), 10, 1, '#e88', '#eee');//Object, round, border, fill
</script>
<BR /><BR />
Sample 2
<div id=r10b10ffff>
jjRoundBoxInit(document.getElementById('r10b10ffff'), 10, 10,'#e88', '#eee');//Object, round, border, fill
</div>
<script type="text/JavaScript" language="JavaScript">
jjRoundBoxInit(document.getElementById('r10b10ffff'), 10, 10,'#e88', '#eee');//Object, round, border, fill
</script>
<BR /><BR />
Sample 3
<div id=r5b10ffff>
jjRoundBoxInit(document.getElementById('r5b10ffff'), 5, 10,'#e88', '#eee');//Object, round, border, fill
</div>
<script type="text/JavaScript" language="JavaScript">
jjRoundBoxInit(document.getElementById('r5b10ffff'), 5, 10,'#e88', '#eee');//Object, round, border, fill
</script>
<BR /><BR />
Sample 4
<div id=r20b10ffff>
jjRoundBoxInit(document.getElementById('r20b10ffff'), 20, 10,'#e88', '#eee');//Object, round, border, fill
</div>
<script type="text/JavaScript" language="JavaScript">
jjRoundBoxInit(document.getElementById('r20b10ffff'), 20, 10,'#e88', '#eee');//Object, round, border, fill
</script>
<BR /><BR />
Sample 5
<div id=r20b20ffff>
jjRoundBoxInit(document.getElementById('r20b20ffff'), 20, 20,'#e88', '#eee');//Object, round, border, fill
</div>
<script type="text/JavaScript" language="JavaScript">
jjRoundBoxInit(document.getElementById('r20b20ffff'), 20, 20,'#e88', '#eee');//Object, round, border, fill
</script>
호의 휘어짐정도를 1 ~ 100 까지 더 늘릴수도 있음
테두리선의 굵기를 내맘대로 1~100까지 더 늘릴수도 있음
둘다 100x100으로 테스트하니 3초정도 걸리네요...
곡선 구하는 방법은 브렌헴(?) 알고리즘을 사용했습니다.
사용방법은 jjRoundBoxInit(적용할 오브젝트, 각도, 굵기, "테두리색상", "채울 색상");
신의손은 멋있다.
</body>
</html>
'인터넷관련' 카테고리의 다른 글
| 글씨의 색을 자동으로 변환시켜주는 함수 (0) | 2008.02.20 |
|---|---|
| 자바스크립트 에러 상태창에 표시 (0) | 2008.02.20 |
| 내 USB를 컴퓨터로 만들어주는 포터블 프로그램 (0) | 2008.02.20 |
| 개인용 무료 PDF 변환 솔루션 (0) | 2008.02.20 |
| array_map을 활용한 배열 통째로 stripslashes (0) | 2008.02.20 |
| HTML 하드코더 (0) | 2008.02.20 |
| cut - 문자열 자르기 (0) | 2008.02.20 |
| TD에서 한글이 위로 치우치는 문제 해결 트릭 (0) | 2008.02.20 |
