라운드, 라운드박스, 테이블 둥글게

인터넷관련 2008. 2. 20. 10:10

미리보기 : 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
,

티스토리툴바