5

sで何ができるかを確認するために、今日実験を行いました<div>。そこで、s で描画できる簡単な Paint のようなプログラム<div>を作成しました。

$(window).mousemove(function(e){
    if(!mousedown){
        return false;
    }
    var x = e.clientX,
        y = e.clientY;

    drawDot(x,y,ele);

    lastX = x;
    lastY = y;          
});

これはコードの一部です。動作しますが、ドット間にギャップがあります。そこでfillDot、点 A (最後の点) から点 B (現在の点) まで線を引くという関数を作成しました。

drawDot(x,y,ele);

fillDot(lastX,lastY,x,y,ele);

function fillDot(lx,ly,x,y,canvas){
    var rise = y - ly,
        run = x - lx,
        slope = rise / run,
        yInt = y - (slope * x);
    if( lx < x ){
        for(var i = lx; i < x ; i+=.5){
            var y = slope * i + yInt;
            drawDot(i,y,canvas);
        }
    }else if( x < lx ){
        for(var i = x; i < lx ; i++){
            var y = slope * i + yInt;
            drawDot(i,y,canvas);
        }
    }
}

水平っぽい線を描いているときだけうまくいきます。上から下または下から上に描くと、まだ隙間があります。同じことができるBresenham's line algorithmと呼ばれるものを見つけましたが、それを使用する方法がわかりません...

間のすべてのポイントを埋める方法はありますか?

ps: があることは知っていますが<canvas>、 で何ができるかをテストしてい<div>ます。

4

1 に答える 1

1

Bresenham のライン アルゴリズムを JavaScript に変換したところ、完全に機能するようになりました。

function fillDot(x0, y0, x1, y1){
   var dx = Math.abs(x1-x0);
   var dy = Math.abs(y1-y0);
   var sx = (x0 < x1) ? 1 : -1;
   var sy = (y0 < y1) ? 1 : -1;
   var err = dx-dy;

   while(true){

     drawDot(x0,y0);

     if ((x0==x1) && (y0==y1)) break;
     var e2 = 2*err;
     if (e2>-dy){
       err -= dy;
       x0  += sx;
     }
     if (e2 < dx){
       err += dx;
       y0  += sy;
     }
   }
}
于 2012-08-04T01:46:04.593 に答える