0

我对处理很陌生，但我想制作一个带有交互式地图的网页，这似乎是唯一/更简单的方法。

我学到了一点，它真的很酷，但是在绘制图像（至少是 SVG 图像）时，scale() 和 shape() 函数似乎存在一些问题。

我尝试了以下代码，通过注释worldMap.scale(xScale, yScale);行打开或关闭。事实上，我尝试了更多的东西，但要正确获取地图是不可能的。即使您正确获得了比例，阿拉斯加的部分地区也不会出现。

PShape worldMap;
float xScale;
float yScale;

void setup() {
  size(900, 500);
  worldMap = loadShape("https://upload.wikimedia.org/wikipedia/commons/e/e8/BlankMap-World6-Equirectangular.svg");
  xScale = width / worldMap.width;
  yScale = height / worldMap.height;
  //worldMap.scale(xScale, yScale);
  smooth(); // Improves the drawing quality of the SVG
  noLoop();
}

void draw() {
  background(255);
  translate(0, 0);
  // Draw the full map
  shapeMode(CORNERS);
  shape(worldMap, 0, 0, 900, 500);
  //saveFrame("map output.png");
}

知道我做错了什么吗？我已经为这个“小”问题浪费了几个小时。从我在 SO 中阅读的一些寻找解决方案的帖子中，似乎表明 Processing 中的 scale() 函数存在一些问题，但我无法从他们那里得到问题的答案。

4

1 回答 1

1

在检查了处理和 SVG 源之后，看起来这个 SVG 有点像骗子。它有一个尺寸与其“高度”和“宽度”属性不同的视图框，这些属性是 Processing 用来确定形状 .width 和 .height 的属性...

事实证明，高度和宽度分别设置为 432 和 855，但实际尺寸实际上分别是 1396 和 2500，所以无论您尝试什么，它总是看起来错误，除非您将此文件作为 XML 文件加载并检查“viewbox”属性报告的渲染尺寸，然后使用这些，而不是形状的 .width 和 .height 属性。

所以你的方法是正确的！SVG 文件只是一个不幸的测试图像。

于 2013-02-04T23:16:18.300 回答