HTML5 canavas에서 수평선을 맞추는 방법은 무엇입니까?

여기 내 질문 : HTML5 canavas에서 가로선을 어떻게 일치시킬 수 있습니까?HTML5 canavas에서 수평선을 맞추는 방법은 무엇입니까?

내가하고 싶은 것을 조금 더 설명하기 위해 캔버스에로드하는 이미지 (jpg)가 있습니다. 이미지 데이터를 얻고 그것을 분석하기 위해 모든 픽셀을 구문 분석합니다.

끝에서 나는 경기가 좋은 있는지 확인 에 내 이미지에 선을 그리 긴 수평선을 찾아 할 수 싶습니다.

외부 라이브러리를 사용하고 싶지 않습니다. 주제에 관한 기사에 대한 언급이 있으면 위대한 것입니다!

var Ll = 0; // max horizontal line's length var Ly=0; // max line's x coordonate var Lx=0; // max line's y coordonate for (var i=0;i<imgData.data.length;i+=(4*canvas.width)){ for (var j=i;j<(4*canvas.width);j+=4){ o = imgData.data[j+3]; if(o==255){ black = true }else{ black = false } k=i; while(black){ o = imgData.data[k+3]; if(o==255 & k<(4*canvas.width)){ black = true }else{ black = false } k+=4; } tmpLength = (k-j)/4; if(tmpLength > Ll){ Ll = tmpLength; Ly = i/4; Lx = (j-i); console.log([Ll, Ly, Lx]); } } }

내 이미지는 검은 색으로 투명합니다. 이것은 내가에만 사용하는 이유는 캔버스에 최대 연속 수평선을 찾는 방법 imgData.data[j+3]

출처

2013-07-20 Paul Fournel

, 그 것 큰!!! –

여기 있습니다. 그것은 매우 혼란 스럽다! –

enter image description here

방법은 다음과 같습니다

는 픽셀 데이터 배열을 가져
한 번에 한 행씩 픽셀을 이동하십시오.
행에서 가장 긴 연속 수평선을 계산하십시오.
계산 된 행이 maxLine보다 길면 해당 긴 행을 maxLine으로 설정하십시오.
모든 행을 완료하면 가장 긴 연속 수평선을 얻게됩니다.

이 각 행을 스캔하고 맥스 라인을 계산하는 코드는 여기에

// set up variables to hold the results 
    var maxLength=0; 
    var maxY; 
    var maxStartX; 
    var maxEndX; 

    // step through each horizontal line 
    for(var y = 0; y < canvas.height; y++) { 

     var continuous=0; 

     for(var x = 0; x < canvas.width; x++) { 

      if(data[((canvas.width * y) + x) * 4 + 3]>0){ 

       // calculate this line's maximum continuouse line 
       continuous++; 

      }else{ 

       // if this line's line is longer than maxLength 
       if(continuous>maxLength){ 
        // replace maxLength with this line's data 
        maxLength=continuous; 
        maxY=y+1; 
        maxEndX=x-1; 
        maxStartX=maxEndX-continuous+1; 
       } 

       continuous=0; 
      } 
     } 
    }

코드와 바이올린입니다 : 우리는 당신의 코드 referrence이있는 경우 http://jsfiddle.net/m1erickson/nvd49/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; padding:20px; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    ctx.beginPath(); 
    ctx.moveTo(20,20); 
    ctx.lineTo(20,220); 
    ctx.lineTo(80,220); 
    ctx.closePath(); 
    ctx.fill(); 

    ctx.beginPath(); 
    ctx.moveTo(100,100); 
    ctx.lineTo(65,125); 
    ctx.lineTo(100,150); 
    ctx.lineTo(135,125); 
    ctx.closePath(); 
    ctx.fill(); 

    ctx.fillRect(175,0,30,canvas.height); 

    // get the pixel-data array 
    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height); 
    var data = imageData.data; 

    // set up variables to hold the results 
    var maxLength=0; 
    var maxY; 
    var maxStartX; 
    var maxEndX; 

    // step through each horizontal line 
    for(var y = 0; y < canvas.height; y++) { 

     var continuous=0; 

     for(var x = 0; x < canvas.width; x++) { 

      if(data[((canvas.width * y) + x) * 4 + 3]>0){ 

       // calculate this line's maximum continuouse line 
       continuous++; 

      }else{ 

       // if this line's line is longer than maxLength 
       if(continuous>maxLength){ 
        // replace maxLength with this line's data 
        maxLength=continuous; 
        maxY=y+1; 
        maxEndX=x-1; 
        maxStartX=maxEndX-continuous+1; 
       } 

       continuous=0; 

      } 

     } 
    } 

    ctx.beginPath(); 
    ctx.moveTo(maxStartX,maxY); 
    ctx.lineTo(maxEndX,maxY); 
    ctx.strokeStyle="orange"; 
    ctx.lineWidth=1; 
    ctx.stroke(); 

    $("#results").text(maxLength+"px long from ["+maxStartX+"/"+maxY+"] to ["+maxEndX+"/"+maxY+"]"); 


}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <p>The longest continuous horizontal line:</p> 
    <p>(Highlighted by the orange line)</p> 
    <p id="results"></p> 
    <canvas id="canvas" width=300 height=250></canvas> 
</body> 
</html>

출처

2013-07-21 00:42:55 markE

이것은 대단한 것 같아요, 오늘 시도 할게요. 고마워! –

HTML5 canavas에서 수평선을 맞추는 방법은 무엇입니까?

답변

관련 문제