'라운드박스'에 해당되는 글 1건

  1. 2007.05.26 라운드 테이블 | 라운드 박스 | 호의각도/굵기를 내맘대로... (2)
2007.05.26 11:42

라운드 테이블 | 라운드 박스 | 호의각도/굵기를 내맘대로...

 

몇일 삽질끝에 드뎌 완성했습니다.

호의 휘어짐정도를 1 ~ 100 까지 더 늘릴수도 있음

테두리선의 굵기를 내맘대로 1~100까지 더 늘릴수도 있음

둘다 100x100으로 테스트하니 3초정도 걸리네요...

곡선 구하는 방법은 브렌헴(?) 알고리즘을 사용했습니다.

사용방법은 jjRoundBoxInit(적용할 오브젝트, 각도, 굵기, "테두리색상", "채울 색상");

위 링크에 가보시면 예제 있구요.. 소스는 알아서 퍼가세요...

====================================
이 스크립트는 "신의손"은 멋있다를 나타내야만 사용하실수 있습니다.
====================================
풋... 이것도 저작권에 걸리려나... "공대여자"님꺼 도용했습니다. ㅋㅋㅋ


출처 : http://www.jdpp.net/openSource/jjRoundBox.html


라운드 박스셋 모음

Sample 1

jjRoundBoxInit(document.getElementById('r10b1ffff'), 10, 1, '#e88', '#eee');//Object, round, border, fill

Sample 2

jjRoundBoxInit(document.getElementById('r10b10ffff'), 10, 10,'#e88', '#eee');//Object, round, border, fill

Sample 3

jjRoundBoxInit(document.getElementById('r5b10ffff'), 5, 10,'#e88', '#eee');//Object, round, border, fill

Sample 4

jjRoundBoxInit(document.getElementById('r20b10ffff'), 20, 10,'#e88', '#eee');//Object, round, border, fill

Sample 5

jjRoundBoxInit(document.getElementById('r20b20ffff'), 20, 20,'#e88', '#eee');//Object, round, border, fill


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>

jjRoundBox_Sample.html

속도 개선된 버전 최종버전

Trackback 2 Comment 2
  1. 신의손 2007.06.12 14:19 address edit & del reply

    ㅎㅎㅎ 제껄 여기서 만나게되니 기쁘네요^^

    http://www.jdpp.net/openSource/jjRoundBox.html

    에 가보시면 속도계선된것 올려놨습니다.

    300x300 으로 생성하셔도 속도가 느리지 않습니다. ^^

  2. BlogIcon falconer 2007.06.13 08:02 신고 address edit & del reply

    감사합니다.
    속도 개선된 버전도 잘 쓸께요.