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

计算机快速。在绘制时，每帧重新计算特定alpha的像素数对我来说似乎很快。请在此处自行测试：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))

如何计算绘制区域的面积？

2 个答案: