塗りつぶし領域の面積を計算する方法は？

Question

キャンバスにフリーハンドのストロークを以下のようなコードでペイントします。私はどのくらいのキャンバスがストロークで覆われているか確認する必要があります。それを確認する良い方法は何ですか？私が考えることができる唯一のことは、マウスアップイベントで特定の色を持つピクセルの数を数えることです。しかし、それは遅いために不自由です...

助けてください？

$(document).ready(function(){ 
    var draw = false; 
    var x_prev = null, y_prev = null; 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    canvas.mousedown(function(e){ 
     draw = true; 
     x_prev = e.pageX - this.offsetLeft; 
     y_prev = e.pageY - this.offsetTop; 
    }); 
    window.mouseup(function(){draw=false}); 
    canvas.mousemove(function(e){ 
     if(draw){ 
      context.beginPath(); 
      context.moveTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); 
      context.lineTo(x_prev, y_prev); 
      context.stroke(); 
      context.closePath(); 
      x_prev = e.pageX - this.offsetLeft; 
      y_prev = e.pageY - this.offsetTop; 
     } 
    }); 

Answer 1

コンピュータが速いをしている総正方形の数でカバー正方形を分割することによりパーセントでエリアを描画されることができます。描画するときに、各フレームの特定のアルファのピクセル数を再カウントするのはかなり速いです。ここではそれを自分でテストします。http://jsfiddle.net/ZC8cB/3/

関連するコード：

を

var w = canvas.attr('width'), 
    h = canvas.attr('height'), 
    area = w * h; 

function updateArea() { 
    var data = context.getImageData(0, 0, w, h).data; 
    for (var ct=0, i=3, len=data.length; i<len; i+=4) if (data[i]>50) ct++; 
    $fill.html(ct); 
    $pct.html((100 * ct/area).toFixed(2)); 
} 

これは本当に遅すぎる場合は、地域になど、他のすべてののMouseMove、すべての第三のMouseMoveを、更新したり、インターバルタイマーにすることを選択することができます。例えば、ここでの唯一の10回に1回のMouseMoveを更新し、非常-やや修正したバージョンです：

そしてカウントの単一のフレームが遅すぎる場合は、その後、遅いコンピュータや巨大なキャンバスまたは両方—を持っているので—することができますhttp://jsfiddle.net/ZC8cB/4/ 1つのフレームにImageDataをフェッチし、各更新フレームはピクセルの特定の部分をカウントします。

Answer 2

面積を線幅の四角形に数え、描画中に遭遇する一意の四角形の数を数えます。

var thickness = 4 
var height = .. 
var width = .. 
var drawn = [] 
var covered = 0; 

canvas.mousemove(function(e) { 

    var x = e.pageX - this.ofsetLeft; 
    var y = e.pageY - this.offsetTop; 
    x = parseInt(x/width) * (width/thickness) 
    y = parseInt(y/height) * (height/thickness) 
    id = x + y * parseInt(thickness/width) 
    if (!drawn[ id ]) { 
     drawn[ id ] = 1; 
     covered++; 
    } 

} 

あなたは

var a = covered/((width/thickness) * (height/thickness))