[스크립트] javascript로 그림 그리기
작성자 : 돌구리
등록날짜 : 2009.04.14 13:29
기능은 점찍기, 선긋기, 사각형그리기, 원그리기 뿐이고요;;;
최근에 아주 간단하게 속도향상에 성공하여 소스 정리좀 해서 다시 올려봅니다...
function Jdraw(id, base)
{
// property
this.id = id;
this.base = base;
this.scr = "JdrawScreen_" + id;
this.buff = "";
// method
this.init = init;
this.dot = dot;
this.flush = flush;
this.line = line;
this.circle = circle;
this.rect = rect;
}
function init(bgcolor, width, height)
{
var scr = "<DIV id=\"" + this.scr + "\" style=\"width:" + width + "px; height:" + height + "px; background:" + bgcolor + "\"></DIV>";
if(this.base != undefined)
{
try
{
document.getElementById(this.base).innerHTML = scr;
return;
}
catch(e)
{}
}
document.write(scr);
}
function dot(color, posX, posY)
{
posX = parseInt(posX, 10);
posY = parseInt(posY, 10);
if(posX < 0)
{
return;
}
if(posY < 0)
{
return;
}
var scr = document.getElementById(this.scr);
posX = scr.offsetLeft + posX;
posY = scr.offsetTop + posY;
if(posX >= scr.offsetLeft + scr.offsetWidth)
{
return;
}
if(posY >= scr.offsetTop + scr.offsetHeight)
{
return;
}
this.buff += "<img style=\"position:absolute; background:" + color + "; width:1px; height:1px; top:" + posY + "px; left:" + posX + "px\">";
}
function line(color, posX1, posY1, posX2, posY2)
{
var n = 1;
posX1 = parseInt(posX1/n);
posY1 = parseInt(posY1/n);
posX2 = parseInt(posX2/n);
posY2 = parseInt(posY2/n);
if (posX2>=posX1)
{
var dx = posX2-posX1;
var incx = 1;
}
else
{
var dx = posX1-posX2;
var incx = -1;
}
if (posY2>=posY1)
{
var dy = posY2-posY1;
var incy = 1;
}
else
{
var dy = posY1-posY2;
var incy = -1;
}
var x = posX1;
var y = posY1;
if (dx>=dy)
{
dy <<= 1;
var balance = dy-dx;
dx <<= 1;
while (x != posX2)
{
this.dot(color, x*n, y*n);
if (balance>=0)
{
y += incy;
balance -= dx;
}
balance += dy;
x += incx;
}
this.dot(color, x*n, y*n);
}
else
{
dx <<= 1;
var balance = dx-dy;
dy <<= 1;
while (y != posY2)
{
this.dot(color, x*n, y*n);
if (balance>=0)
{
x += incx;
balance -= dy;
}
balance += dx;
y += incy;
}
this.dot(color, x*n, y*n);
}
}
function circle(color, posX, posY, width, height)
{
var x = 0;
var y = height;
var a = width
var b = height;
var a_squ = a * a;
var b_squ = b * b;
var two_a_squ = a_squ << 1;
two_b_squ = b_squ << 1;
var d = b_squ - a_squ*b + (a_squ >> 2);
var dx = 0;
var dy = two_a_squ * b;
while( dx < dy )
{
this.dot(color, posX+x, posY+y);
this.dot(color, posX-x, posY+y);
this.dot(color, posX+x, posY-y);
this.dot(color, posX-x, posY-y);
if( d > 0 )
{
y --;
dy -= two_a_squ;
d -= dy;
}
x ++;
dx += two_b_squ;
d += b_squ + dx;
}
d += ( 3*(a_squ - b_squ)/2 - (dx+dy)/2 );
while( y >= 0 )
{
this.dot(color, posX+x, posY+y);
this.dot(color, posX-x, posY+y);
this.dot(color, posX+x, posY-y);
this.dot(color, posX-x, posY-y);
if( d < 0 )
{
x ++;
dx += two_b_squ;
d += dx;
}
y --;
dy -= two_a_squ;
d += a_squ - dy;
}
}
function rect(color, posX1, posY1, posX2, posY2)
{
this.line(color, posX1, posY1, posX2, posY1);
this.line(color, posX1, posY1, posX1, posY2);
this.line(color, posX2, posY1, posX2, posY2);
this.line(color, posX1, posY2, posX2, posY2);
}
function flush(id)
{
if(id != undefined)
{
try
{
document.getElementById(this.scr).innerHTML = this.buff1;
return;
}
catch(e)
{}
}
document.getElementById(this.scr).innerHTML = this.buff;
}
쓰실때에는...
<div id='sampleArea1'></div>
<br>
<div id='sampleArea2'></div>
<script language=javascript>
var test = new Jdraw('sample1', 'sampleArea1');
test.init("#000000", 100, 100);
test.circle('yellow', 50, 50, 40, 40);
test.circle('yellow', 50, 50, 30, 30);
test.circle('yellow', 50, 50, 20, 20);
test.circle('yellow', 50, 50, 10, 10);
test.flush();
var test = new Jdraw('sample2', 'sampleArea2');
test.init("#CC0000", 100, 100);
test.line("#FFFFFF", 10, 90, 90, 10);
test.line("#FFFFFF", 10, 10, 90, 90);
test.line("#FFFFFF", 10, 50, 90, 50);
test.line("#FFFFFF", 50, 10, 50, 90);
test.rect('yellow', 10, 10, 90, 90);
test.flush();
</script>
이렇게 쓰시면...
http://libphp.com/main/data/preview.php?no=3228
이렇게 나옵니다... (__);
나름 쓰일 곳이 있기를 바랍니다;;;;
최근에 아주 간단하게 속도향상에 성공하여 소스 정리좀 해서 다시 올려봅니다...
function Jdraw(id, base)
{
// property
this.id = id;
this.base = base;
this.scr = "JdrawScreen_" + id;
this.buff = "";
// method
this.init = init;
this.dot = dot;
this.flush = flush;
this.line = line;
this.circle = circle;
this.rect = rect;
}
function init(bgcolor, width, height)
{
var scr = "<DIV id=\"" + this.scr + "\" style=\"width:" + width + "px; height:" + height + "px; background:" + bgcolor + "\"></DIV>";
if(this.base != undefined)
{
try
{
document.getElementById(this.base).innerHTML = scr;
return;
}
catch(e)
{}
}
document.write(scr);
}
function dot(color, posX, posY)
{
posX = parseInt(posX, 10);
posY = parseInt(posY, 10);
if(posX < 0)
{
return;
}
if(posY < 0)
{
return;
}
var scr = document.getElementById(this.scr);
posX = scr.offsetLeft + posX;
posY = scr.offsetTop + posY;
if(posX >= scr.offsetLeft + scr.offsetWidth)
{
return;
}
if(posY >= scr.offsetTop + scr.offsetHeight)
{
return;
}
this.buff += "<img style=\"position:absolute; background:" + color + "; width:1px; height:1px; top:" + posY + "px; left:" + posX + "px\">";
}
function line(color, posX1, posY1, posX2, posY2)
{
var n = 1;
posX1 = parseInt(posX1/n);
posY1 = parseInt(posY1/n);
posX2 = parseInt(posX2/n);
posY2 = parseInt(posY2/n);
if (posX2>=posX1)
{
var dx = posX2-posX1;
var incx = 1;
}
else
{
var dx = posX1-posX2;
var incx = -1;
}
if (posY2>=posY1)
{
var dy = posY2-posY1;
var incy = 1;
}
else
{
var dy = posY1-posY2;
var incy = -1;
}
var x = posX1;
var y = posY1;
if (dx>=dy)
{
dy <<= 1;
var balance = dy-dx;
dx <<= 1;
while (x != posX2)
{
this.dot(color, x*n, y*n);
if (balance>=0)
{
y += incy;
balance -= dx;
}
balance += dy;
x += incx;
}
this.dot(color, x*n, y*n);
}
else
{
dx <<= 1;
var balance = dx-dy;
dy <<= 1;
while (y != posY2)
{
this.dot(color, x*n, y*n);
if (balance>=0)
{
x += incx;
balance -= dy;
}
balance += dx;
y += incy;
}
this.dot(color, x*n, y*n);
}
}
function circle(color, posX, posY, width, height)
{
var x = 0;
var y = height;
var a = width
var b = height;
var a_squ = a * a;
var b_squ = b * b;
var two_a_squ = a_squ << 1;
two_b_squ = b_squ << 1;
var d = b_squ - a_squ*b + (a_squ >> 2);
var dx = 0;
var dy = two_a_squ * b;
while( dx < dy )
{
this.dot(color, posX+x, posY+y);
this.dot(color, posX-x, posY+y);
this.dot(color, posX+x, posY-y);
this.dot(color, posX-x, posY-y);
if( d > 0 )
{
y --;
dy -= two_a_squ;
d -= dy;
}
x ++;
dx += two_b_squ;
d += b_squ + dx;
}
d += ( 3*(a_squ - b_squ)/2 - (dx+dy)/2 );
while( y >= 0 )
{
this.dot(color, posX+x, posY+y);
this.dot(color, posX-x, posY+y);
this.dot(color, posX+x, posY-y);
this.dot(color, posX-x, posY-y);
if( d < 0 )
{
x ++;
dx += two_b_squ;
d += dx;
}
y --;
dy -= two_a_squ;
d += a_squ - dy;
}
}
function rect(color, posX1, posY1, posX2, posY2)
{
this.line(color, posX1, posY1, posX2, posY1);
this.line(color, posX1, posY1, posX1, posY2);
this.line(color, posX2, posY1, posX2, posY2);
this.line(color, posX1, posY2, posX2, posY2);
}
function flush(id)
{
if(id != undefined)
{
try
{
document.getElementById(this.scr).innerHTML = this.buff1;
return;
}
catch(e)
{}
}
document.getElementById(this.scr).innerHTML = this.buff;
}
쓰실때에는...
<div id='sampleArea1'></div>
<br>
<div id='sampleArea2'></div>
<script language=javascript>
var test = new Jdraw('sample1', 'sampleArea1');
test.init("#000000", 100, 100);
test.circle('yellow', 50, 50, 40, 40);
test.circle('yellow', 50, 50, 30, 30);
test.circle('yellow', 50, 50, 20, 20);
test.circle('yellow', 50, 50, 10, 10);
test.flush();
var test = new Jdraw('sample2', 'sampleArea2');
test.init("#CC0000", 100, 100);
test.line("#FFFFFF", 10, 90, 90, 10);
test.line("#FFFFFF", 10, 10, 90, 90);
test.line("#FFFFFF", 10, 50, 90, 50);
test.line("#FFFFFF", 50, 10, 50, 90);
test.rect('yellow', 10, 10, 90, 90);
test.flush();
</script>
이렇게 쓰시면...
http://libphp.com/main/data/preview.php?no=3228
이렇게 나옵니다... (__);
나름 쓰일 곳이 있기를 바랍니다;;;;
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
☞자세히보기 |
|
|