Question

我创建了自己的预先投影的topojson文件，我正在尝试更改画布中特定国家/地区的填充样式。 http://bl.ocks.org/anonymous/fea6cfde1184e2f10de8是我的代码/示例。我试图抓住特定的国家/地区代码并为该国家设置填充（在本例中为德国）。然而，由于某种原因，它也填补了许多其他国家。我怀疑它可能是一个共同的边界问题，但是一些不共享边界的国家也会被填满。

同样有趣的是，如果我不像http://bl.ocks.org/anonymous/3256fe09efaa8d2ebc96那样为其他国家渲染边框，则填充效果会很好，但显然所有边框都会消失。我只是不明白帆布填充是如何工作的？是否有不同的方式来突出特定国家/地区？在我看来，我可以使用面具填充特定的国家，但这似乎是一种非常迂回的方式。

注意，我知道使用SVG / CSS会更简单，但我真的很想让它在画布上工作。

Answer 1

与此example一样，您需要先绘制所有边框，然后填充所需的区域：

  var isDEU = null;
  for (var i = 0; i < geoJson.features.length; i++) {

    if (geoJson.features[i].id == "DEU") {
      isDEU = geoJson.features[i];
    }

    context.save();
    canvasPath(geoJson.features[i]);
    context.stroke();
    context.restore();
  }

  context.fillStyle = "#f00"
  context.beginPath();
  canvasPath(isDEU);
  context.fill();

示例here。

如何使用d3.geo和canvas填充特定国家/地区？

1 个答案: