1

私は4本の線を描いているキャンバスを持っています。次に、描画されたこれらの線の精度を、定義済みの 4 つの線の座標と比較する必要があります。キャンバスでこれを行うことはできますか？

ありがとう。

4

2 に答える 2

0

var pixelarray= canvas.getImageData(x, y, width, height).data; さて、javascript の rgb 配列でキャンバスのピクセルを取得できます。 pixelarray[0]整数は最初のピクセルpixelarray[3]の赤の値、2 番目のピクセルの赤の値などです。100px 幅 (最初の行のピクセル インデックス 0 から 299) のキャンバスでは、最初のpixelarray[299]行の最後のピクセルの青の値とpixelarray[300]2 番目の行の最初のピクセルの赤の値になります。

次に、比較したい4行を表す関数を取得して、次のようなことを行うことができます

function isblack(x,y,width,height){
return pixelarray[(y*width+x)*3]==255&&pixelarray[(y*width+x)*3+1]==255&&pixelarray[(y*width+x)*3+2]==255||x<0||x>width||y<0||y>height;
}
function f(x){return a*x+b;}
var lineblackness=0;
for(var x=0;x<picturewidth;x++)if(isblack(x,f(x),picturewidth,pictureheight))lineblackness++;
if(lineblackness==picturewidth)line_is_drawn();

fx(x) が線を表す場所 ...

線に画像または座標を使用すると、簡単になる可能性があります。

getcoord(data){
var ar=new array();
for(var i=0;i<data.length/3;i++)if(data[i*3]==255)ar.push(i);
return ar;
}
var comparecoords=getcoord(comparecanvas.getImageData(x, y, width, height).data);
var thisdata=canvas.getImageData(x, y, width, height).data;
var linehits=0;
for(var i=0;i<comparecoords.length;i++){if(thisdata[comparecoords[i]*3]==255)linehits++;}
if(comparecoords.length==linehits)all_coords_are_hit();

ここでは、白黒の画像があると仮定して、赤の値のみを比較しました。

正確に適合しない行を比較したい場合は、==255 をいくつかの追加の if で変更できます。

function isblack(x,y,width,height,blurr,treshhold){
    for(var i=-blurr;i<blurr;i++)if(x-i>0&&x+i<width&&pixelarray[(y*width+(x+i))*3]>=treshhold)return true;
    for(var i=-blurr;i<blurr;i++)if(y-i>0&&y+i<height&&pixelarray[((y+i)*width+(x))*3]>=treshhold)return true;
    return false;
    }

この関数も赤のみを使用しますが、しきい値を使用してグレーも有効にします。また、ピクセルの前後で x 方向をチェックし、次に y 方向でチェックするためのぼかし値も受け入れます。

2 つのループを組み合わせて、ピクセルの周囲の四角形をチェックインすることもできます。

をに変更するreturn trueとreturn i、チェックしたいピクセルからの距離も得られます。2 つのループを i 値と j 値に結合し、sqrt(i^2+j^2) を返し、すべてのチェックを合計すると、ラインの精度を示すインジケーターを取得できます。

sqareroot-error を実装するには、y 距離を比較し、2 乗距離 i^2 を合計するだけで十分です。

これらのプログラムは提案であり、より良い実装が存在する可能性があり、私のコードにはまだエラーが含まれている可能性があることに注意してください。

于 2013-05-16T11:13:50.630 に答える