Как рассчитать площадь окрашенной области?

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));
}

Если это действительно слишком медленно, вы можете обновить область при каждом другом движении мыши, при каждом третьем движении мыши и т. Д. Или в интервальном таймере. Например, вот очень слегка измененная версия, которая обновляет только каждое десятое движение мыши: http://jsfiddle.net/ZC8cB/4/

И если один кадр подсчета слишком медленный - потому что у вас медленный компьютер или огромный холст или оба - тогда вы можете получить 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))