Question

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

我学到了一点，这真的很酷，但是在绘制图像时（至少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（）函数存在一些问题，但我无法从他们那里得到问题的答案。

Answer 1

在处理和SVG源中进行一些检查之后，看起来这个SVG有点像骗子。它有一个与'height'和'width'属性不同的视图框，这些属性是Processing在确定shape .width和.height ...时所看到的属性。

事实证明，高度和宽度分别设置为432和855，但REAL尺寸实际上分别为1396和2500，因此无论您尝试什么，它总是会出错，除非您将此文件加载为一个XML文件，还要检查“viewbox”属性报告的渲染维度，然后使用它们，而不是形状的.width和.height属性。

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

处理scale（）shape（）和shapeMode（）不适合图像到屏幕角落。另类？

1 个答案: