很棘手的一个问题，希望提供算法。

gibbon2000pro 2008-07-24 10:35:36

我用javascript写了两个方法
一个是

function drawDot(x,y,color)

作用是在网页相应位置，相应颜色绘制一个像素点
一个方法是

function drawLine(x1,y1,x2,y2,color)

作用是给定两个坐标点和颜色值，在网页上绘制一条线段
我现在需要一个方法

function drawTriangle(x1,y1,x2,y2,x3,y3,color,fill)

作用是给定三个坐标，在网页上绘制一个三角形，如果fill参数为true的话，就需要把这个三角形进行颜色填充。

我填充使用的算法是把(x1,y1)作为三角形顶点，另外两个点作为底边的两个点，然后从底边上的每个点，绘制到顶点的线段来进行填充，因为在绘制时，坐标值要取整的原因吧，所以有些不规则的三角形总是填充不满。
我不知道怎么样进行填充那部分的算法，希望高手指点，说明算法就行。

...全文

142 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

tengfei3003 2008-07-24

打赏
举报

数学的分割法：以一边为底，在这条边上取点，在另外两边上取点，连成与底边上的高平行的直线段，给直线段上色，
不断的取，从底边的一端开始到另一边结束

gibbon2000pro 2008-07-24

打赏
举报

哦按照你的方法我先试试哈

YH_Random 2008-07-24

打赏
举报

扫描算法：

把所有点的坐标存到数组中，

然后找出y轴相同的两点坐标，

该两点坐标的从x1到x2画线，

这样一行一行地找下去，

不过效率不是很高~~~~

tengfei3003 2008-07-24

打赏
举报

小小关注一下

gibbon2000pro 2008-07-24

打赏
举报

下面的rule方法没有明白他是什么意思。
上面的line方法有问题的
它是用x坐标来循环的，但是如果两个点x坐标相同的话呢？也就是当我要绘制水平线的时候，这个函数就绘不出来也

s_liangchao1s 2008-07-24

打赏
举报



<html> 

<head> 

<style> 

*{margin:0;padding:0;} 

</style> 

<script> 

function a(x,y,color) 

{document.write("<img border='0' style='position: absolute; left: "+x+"; top: "+y+";background-color: "+color+"' src='px.gif' width=1 height=1>")} 

</script> 

</head> 

<body onmouseup = 'alert(rule(event.clientX,event.clientY));'> 

<script> 

function line(x1,y1,x2,y2,color) 

{ 

var tmp; 

if(x1>=x2) 

{ 

  tmp=x1; 

  x1=x2; 

  x2=tmp; 

  tmp=y1; 

  y1=y2; 

  y2=tmp; 

} 

for(var i=x1;i<=x2;i++) 

{ 

  x = i; 

  y = (y2 - y1) / (x2 - x1) * (x - x1) + y1; 

  a(x,y,color); 

} 

} 

function rule(x,y) 

{ 

x = x; 

y = y; 

r1 = y - 100 - (300-100)/(500-400)*(x-400); 

r2 = y - 300; 

r3 = y - 300 - (100-300)/(400-300)*(x-300); 

if (r1>0&&r2<0&&r3>0) 

{ 

	

  return "在三角形内！"; 

} 

else 

{return "不在三角形内！";} 

} 

line(400,100,500,300,"ff0000"); 

line(500,300,300,300,"ff0000"); 

line(300,300,400,100,"ff0000"); 

</script> 

</body> 

</html>

看下这个

gibbon2000pro 2008-07-24

打赏
举报

刚去蹲个大号。都没有人回帖呢？

我想了一个算法，先根据三个坐标点，制定一片矩形区域，将三角形包括进去，然后对这个矩形区域的每个点做判断，如果在三角形内就描点，不在三角形区域内就不描点，但是这里就有一个问题，我怎么判断一个点是否是在一个封闭区域内呢？

s_liangchao1s 2008-07-24

打赏
举报

好东西研究下。。。

gibbon2000pro 2008-07-24

打赏
举报

按照YH_Random提供的算法写的代码如下，测试成功。结贴了哈



<html>

<head><title></title></head>

<body>

<script language="javascript">



// Author:贺渊凌 gibbon_ho 

function drawDot(x,y,color)

{

    var newObj = document.createElement("IMG");

    document.body.appendChild(newObj);

    with(newObj)

    {

        border=0;

        style.position='absolute';

        style.pixelLeft=(x);

        style.pixelTop=(y);

        style.backgroundColor=color;

        style.pixelWidth=1;

        style.pixelHeight=1;

    }

};

function drawLine(x1,y1,x2,y2,color)

{

    if(x1==x2 && y1==y2)return;

    var w = x2-x1;

    var h = y2-y1;

    var length = Math.round(Math.sqrt(Math.pow(w,2)+Math.pow(h,2)));



    for(var i=0;i<=length;i++)

    {



        drawDot(Math.round(x1+w*i/length),Math.round(y1+h*i/length),color);



    }

    

    return (w>0)?(Math.asin(h/length)):(Math.PI-Math.asin(h/length));

};

function sequence(x1,y1,x2,y2,x3,y3)//从y值高到低

{

    var h1,h2,h3,temp;

    h1 = {

        x:x1,

        y:y1

    };

    h2 = {

        x:x2,

        y:y2

    };

    h3 = {

            x:x3,

            y:y3

        };

    if(h1.y>h2.y)

    {

        temp = h2;

        h2 = h1;

        h1 = temp;

    }

    if(h2.y>h3.y)

    {

        temp = h3;

        h3 = h2;

        h2 = temp;

    }

    if(h1.y>h2.y)

    {

        temp = h2;

        h2 = h1;

        h1 = temp;

    }

    

    return [h3,h2,h1];



};

function drawTriangle(x1,y1,x2,y2,x3,y3,color,fill)

{  

    if(fill)

    {

        var data = sequence(x1,y1,x2,y2,x3,y3);

        var hx = getX(data[0].x,data[0].y,data[2].x,data[2].y,data[1].y);

        fillHorizTriangle(data[0].x,data[0].y,hx,data[1].x,data[1].y,color);

        fillHorizTriangle(data[2].x,data[2].y,hx,data[1].x,data[1].y,color);

    }

    else

    {

        drawLine(x1,y1,x2,y2,color);

        drawLine(x2,y2,x3,y3,color);

        drawLine(x3,y3,x1,y1,color);

    }

};



function getX(x1,y1,x2,y2,y)

{

    if(y1==y2)return null;

    

    var w=(x2-x1);

    var h=(y2-y1);

    

    return Math.round(x1+(y-y1)*w/h);

    

};

function fillHorizTriangle(x1,y1,x21,x22,y2,color)

{



    if(y1==y2)return null;

    var h = Math.abs(y1-y2);

    var bottom = Math.min(y1,y2);

    for(var i=0;i<=h;i++)

    {

        var x_1 = getX(x1,y1,x21,y2,bottom+i);

        var x_2 = getX(x1,y1,x22,y2,bottom+i);

        drawLine(x_1,bottom+i,x_2,bottom+i,color);

    }

};

function drawArrow(x1,y1,x2,y2,color,r,fill)

{

    var radian = drawLine(x1,y1,x2,y2,color);   

    var radianArrow1 = radian+Math.PI+0.25;

    var radianArrow2 = radian+Math.PI-0.25;

    var xa1 = x2+r*Math.cos(radianArrow1);

    var ya1 = y2+r*Math.sin(radianArrow1);

    var xa2 = x2+r*Math.cos(radianArrow2);

    var ya2 = y2+r*Math.sin(radianArrow2);

    if(fill)

    {

        drawTriangle(x2,y2,xa1,ya1,xa2,ya2,color,true);

    }

    else

    {

        drawLine(x2,y2,xa1,ya1,color);

        drawLine(x2,y2,xa2,ya2,color); 

    }

};



drawArrow(400,400,500,100,"#000000",30,true);

drawArrow(400,400,400,200,"#000000",30,true);

drawArrow(400,400,300,100,"#000000",15,true);

drawArrow(400,400,200,400,"#000000",30,true);

drawArrow(400,400,200,600,"#000000",15,true);

drawArrow(400,400,400,800,"#000000",30,true);

drawArrow(400,400,700,600,"#000000",15,true);

drawArrow(400,400,500,400,"#000000",30,true);





</script>

</body>

</html>