Question

我试图获取画布元素的内容（实际上只是加载到画布上的图像）并使用d3将它们扭曲成不同的地图投影。因此，我找到了一个这样做的例子（this other SO问题）。

问题在于它并不适用于每个投影。代码：

var height = 375,
    width = 750;

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = width;
canvas.height = height;

var context = canvas.getContext('2d');

var projection = d3.geo.lagrange()
    .translate([width/2, height/2])
    .scale(100); //SET SCALE HERE

var path = d3.geo.path().projection(projection);

var image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'http://i.imgur.com/zZkxbz7.png';
image.onload = function() {
    var dx = width,
        dy = height;

    context.drawImage(image, 0, 0, dx, dy);

    var sourceData = context.getImageData(0, 0, dx, dy).data,
        target = context.createImageData(dx, dy),
        targetData = target.data;

    for (var y = 0, i = -1; y < height; ++y) {
        for (var x = 0; x < width; ++x) {
            var p = projection.invert([x, y]),    //ERROR HERE
                λ = p[0],
                φ = p[1];
            if (λ > 180 || λ < -180 || φ > 90 || φ < -90) {
                i += 4;
                continue;
            }
            var q = ((90 - φ) / 180 * dy | 0) * dx + ((180 + λ) / 360 * dx | 0) << 2;
            targetData[++i] = sourceData[q];
            targetData[++i] = sourceData[++q];
            targetData[++i] = sourceData[++q];
            targetData[++i] = 255;
        }
    }

    context.clearRect(0, 0, width, height);
    context.putImageData(target, 0, 0);
}

在上面的例子中，如果我将投影的比例设置得太低（比如80），那么变量p（在for循环中）最终为null。我不确定为什么会发生这种情况，我需要设置比例，以便投影适合画布区域。

一个有效的jsfiddle示例：http://jsfiddle.net/vjnfyd8t/

Answer 1

（这是一个有趣的问题）

我无法完全解读这里发挥的作用，但是FWIW，this is the implementation of the Lagrange invert() method。显然，有些情况下它返回null，大概是x或y在某个范围之外（x，y是pre-transformed here）。所以我猜你假设忽略空值（例如通过将输出像素设置为透明），你仍然可以在最后得到一个适当的缩放地图。

This is what I get只是忽略null（但用红色突出显示它们，以说明它发生的位置）

if (!p) {
  targetData[++i] = 255;
  targetData[++i] = 0;
  targetData[++i] = 0;
  targetData[++i] = 255;
  continue;
}

如果比例设置为94，则红色条带完全消失，看起来最合适（至少在那个比例下）。那是你想要的吗？

D3.js在画布图像上映射投影

1 个答案: