javascript - 将复杂的 svg 形状转换为圆形抽象

Question

SVG 很丑，请查看我的:

JSFIDDLE LINK

HTML:

<svg version="1.1" class="overlap-svg" id="alaska"></svg>
<svg version="1.1" class="overlap-svg" id="grid"></svg>

CSS:

.overlap-svg {
    position: absolute;
    left:0;
    top: 0;
}

问题:

如果我们重叠这 2 个 svg，JS 函数是什么来突出显示其中包含阿拉斯加(红色)部分的 svg 圆圈？

查看下面的描述以获取更多信息

---

1. 假设您有一个复杂的形状，例如阿拉斯加的轮廓。

1. 假设您有另一个 svg 圆网格:

---

我如何转换它:

像这样:

如果阿拉斯加(红色)的任何部分在圆圈区域内，则圆圈应填充为红色。

请再次查看我上面的 JSFiddle 链接。

Answer 1

fiddle

您可以获取 svg 并将其加载到 Canvas 元素中。获取该元素，因为它是一个 Canvas 元素，所以您可以获得它的像素数组。

可以通过从适当调整大小的 Canvas 的像素构建网格来构建您的圆形抽象。

首先是一个助手:网格管理器。

function GridManager(configIn) {
  var gm_ = {};

  gm_.config = {
    'gridWidth': 10,
    'gridHeight': 10,
    'gridCellWidth': 10,
    'gridCellHeight': 10,
    'gridHeight': 100,
    'dataSrc': []
  };

  // Load new config over defaults
  for (var property in configIn) {
    gm_.config[property] = configIn[property];
  }

  /** 
    * Creates an array using the module's config building a 2d data array 
    * from a flat array. Loops over GridManager.config.dataSrc
    * 
    * Render a checkerboard pattern:
    *   GridManager.config.dataSrc = ["#"," "]
    * 
    * Render you can load a image by passing in its full pixel array, 
    * provided image height and width match GridManager.config.gridHeight
    * and GridManager.config.gridWidth. 
    */
  gm_.createGridSrc = function() {
    var height = this.config.gridHeight;
    var width = this.config.gridWidth;
    var output = [];

    for (var i = 0; i < height; i++) {
      output[i] = [];

      for (var ii = 0; ii < width; ii++) {
        if (this.config.dataSrc !== undefined) {
          var dataSrc = this.config.dataSrc;
          output[i][ii] = dataSrc[i*width + ii % dataSrc.length];
        }
      }
    }
    return output;
  };

  /** 
    * Creates a SVG with a grid of circles based on
    * GridManager.config.dataSrc.
    * 
    * This is where you can customize GridManager output.
    */
  gm_.createSvgGrid = function() {
    var cellWidth = this.config.gridCellWidth;
    var cellHeight = this.config.gridCellHeight;
    var svgWidth = 1000;
    var svgHeight = 1000;
    var radius = 3
    var cellOffset = radius / 2;

    //create svg
    var xmlns = 'http://www.w3.org/2000/svg';
    var svgElem = document.createElementNS (xmlns, 'svg');
    svgElem.setAttributeNS (null, 'viewBox', '0 0 ' + svgWidth + ' ' + svgHeight);
    svgElem.setAttributeNS (null, 'width', svgWidth);
    svgElem.setAttributeNS (null, 'height', svgHeight);
    svgElem.style.display = 'block';

    //create wrapper path
    var g = document.createElementNS (xmlns, 'g');
    svgElem.appendChild (g);

    //create grid
    var data = this.createGridSrc();
    var count = 0;
    for (var i = data.length - 1; i >= 0; i--) {
      for (var ii = data[i].length - 1; ii >= 0; ii--) {
        
        // This svgHeight and svgWidth subtraction here flips the image over
        // perhaps this should be accomplished elsewhere.
        var y = svgHeight - (cellHeight * i) - cellOffset;
        var x = svgWidth - (cellWidth * ii) - cellOffset;

        var cell = document.createElementNS (xmlns, 'circle');
        var template = data[i][ii];
        
        // Machine has averaged the amount of fill per pixel
        // from 0 - 255, so you can filter just the red pixels like this
        // over a certain strength.
        if (template[0] > 10 ) {
          cell.setAttributeNS (null, 'fill', '#ff0000');
          // Consider stashing refs to these in this.groups['red'] or something
          // similar
        } else {
          cell.setAttributeNS (null, 'fill', 'none');
        }

        cell.setAttributeNS (null, 'stroke', '#000000');
        cell.setAttributeNS (null, 'stroke-miterlimit', '#10');
        cell.setAttributeNS (null, 'cx', x);
        cell.setAttributeNS (null, 'cy', y);
        cell.setAttributeNS (null, 'r', radius);

        g.appendChild (cell);
      }
    }
    return svgElem;
  }
  return gm_;
}

然后在 main.js 中

var wrapper = document.getElementById('wrapper');

var mySVG = document.getElementById('alaska').outerHTML;

mySVG = mySVG.slice(0, 4) + ' height="100" ' + mySVG.slice(4);

// Create a Data URI based on the #alaska element.
var mySrc = 'data:image/svg+xml;base64,' + window.btoa(mySVG);

// Create a new image to do our resizing and capture our pixel data from.
var source = new Image();
source.onload = function() {

  var svgRasterStage = document.createElement('canvas');
  svgRasterStage.width = 1000;
  svgRasterStage.height = 1000;

  svgRasterStage.classList.add('hidden');

  // You may not need this at all, I didn't test it.
  wrapper.appendChild(svgRasterStage);

  // Get drawing context for the Canvas
  var svgRasterStageContext = svgRasterStage.getContext('2d');

  // Draw the SVG to the stage.
  svgRasterStageContext.drawImage(source, 0, 0);
  
  // We can now get array of rgba pixels all concatinated together:
  //    [ r, g, b, a, r, g, b, a,  (...)  r, g, b, a, r, g, b, a]
  var rgbaConcat = svgRasterStageContext.getImageData(0, 0, 100, 100).data;

  // Which sucks, so here's a way to convert them to pixels that we can 
  // use with GridManager.createSvgGrid.
  var pixels = [];
  var count = 0;
  
  // NOTE: this is a for with a weird step: i=i-4. i-4 is an infinte loop.
  // anything else just jumbles the pixels.
  for (var i = rgbaConcat.length - 1; i >= 0; i=i-4) {
    var r = rgbaConcat[i - 0];
    var g = rgbaConcat[i - 1];
    var b = rgbaConcat[i - 2];
    var a = rgbaConcat[i - 3];
    pixels.push([r, g, b, a]);
  }

  // We create our GridManager (finally).
  var gm = new GridManager({
    'gridWidth': 100,
    'gridHeight': 100,
    'dataSrc': pixels
  });
  
  // And let her rip!
  wrapper.appendChild(gm.createSvgGrid());
}