过滤数组中特定的数字范围

Question

我正在创建一个模糊画布边框的算法(图像).在应用模糊效果之前,我正在创建一个filtered包含所有需要模糊的像素值的数组.

我创建了一个10×10px图像的例子.

function compute(w, h, bW) {
  w *= 4;
  var ignored = [];
  for (y = bW; y < (h - bW); y++) {
    for (x = 0; x < (w - (bW * 4 * 2)); x++) {
      ignored.push(w * y + x + bW * 4);
    }
  }
  console.log(ignored);

  function range(limit) {
    return Array.apply(null, Array(limit)).map(function(_, i) {
      return i;
    })
  }
  Array.prototype.diff = function(array) {
    return this.filter(function(elem) {
      return array.indexOf(elem) === -1;
    })
  }
  var filtered = range(w * h).diff(ignored);
  console.log(filtered);

  return filtered;
}

compute(10, 10, 2);

//////////////////////////////////////////////////////////////////
// Below is just to display the numbers that are being filtered //
//    Here, the size is 100 x 100 px with 10px border width     //
//////////////////////////////////////////////////////////////////

var pixels = compute(100, 100, 10);
var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
var imgD = ctx.createImageData(100, 100);
for (var i = 0; i < imgD.data.length; i += 4) {
  if (pixels.indexOf(i) > 0) {
    imgD.data[i + 0] = 0;
    imgD.data[i + 1] = 0;
    imgD.data[i + 2] = 0;
    imgD.data[i + 3] = 255;
  } else {
    imgD.data[i + 0] = 255;
    imgD.data[i + 1] = 0;
    imgD.data[i + 2] = 0;
    imgD.data[i + 3] = 255;
  }
}
ctx.putImageData(imgD, 10, 10);

<canvas></canvas>

该数组filtered包含具有背景颜色的所有数字并ignored包含具有背景颜色的所有数字 和 在图像中.

我的问题是:

如何更改代码以使数组filtered具有背景颜色的数字 和 并不是 ？

---

有点高分辨率(65×65px)的示例:

---

Answer 1

FIDDLEJS:http://jsfiddle.net/t14gr6pL/2/

说明:

它取决于三角形的宽度(第二种颜色).在64*64示例中,此宽度为7.

我们假设这个宽度(tw)是这样计算的(你可以改变):

var tw = (2 * bW) - 1;

所以你的代码是:

function compute(w, h, bW) {
    var filtered = [];
    var WIDTH_MULTIPLICATOR = 4;

    var bH = bW;
    w *= WIDTH_MULTIPLICATOR;
    bW *= WIDTH_MULTIPLICATOR;

    var triangleWidth = (2 * bW) - 1;

    for (y = 0; y < h; y++) {
        for (x = 0; x < w; x++) {
            if (
                // Borders
                (Math.min(x, w - x) < bW) ||
                (Math.min(y, h - y) < bH) ||

                // Adding "Triangles"
                (Math.min(x, w - x) < bW + triangleWidth - Math.max(0, Math.min(y, h - y) - bH) * WIDTH_MULTIPLICATOR)

            ) {
                filtered.push(w * y + x);
            }
        }
    }

    return filtered;
}