몇일 삽질끝에 드뎌 완성했습니다.
호의 휘어짐정도를 1 ~ 100 까지 더 늘릴수도 있음
테두리선의 굵기를 내맘대로 1~100까지 더 늘릴수도 있음
둘다 100x100으로 테스트하니 3초정도 걸리네요...
곡선 구하는 방법은 브렌헴(?) 알고리즘을 사용했습니다.
사용방법은 jjRoundBoxInit(적용할 오브젝트, 각도, 굵기, "테두리색상", "채울 색상");
위 링크에 가보시면 예제 있구요.. 소스는 알아서 퍼가세요...
====================================
이 스크립트는 "신의손"은 멋있다를 나타내야만 사용하실수 있습니다.
====================================
풋... 이것도 저작권에 걸리려나... "공대여자"님꺼 도용했습니다. ㅋㅋㅋ
출처 : http://www.jdpp.net/openSource/jjRoundBox.html
라운드 박스셋 모음
Sample 1
Sample 2
Sample 3
Sample 4
Sample 5
Code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<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>
<body>
라운드 박스셋 모음<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>
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>
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>
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>
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>
</body>
</html>
invalid-file
속도 개선된 버전 최종버전
'소프트웨어 > JavaScript • Dhtml' 카테고리의 다른 글
| 자바스크립으로 플래쉬 메뉴처럼... (0) | 2007.05.26 |
|---|---|
| Firefox용 innerText (0) | 2007.05.26 |
| Prototype 1.5.1 release candidate 2 (0) | 2007.04.25 |
| 스위칭 탭 & 탭 메뉴 (0) | 2007.04.24 |
| Prototype base multi-Selection API (0) | 2007.04.17 |