Question

我正试图通过Jer Thorp's "Just Landed"启发时间推移地理推特可视化。我正在使用最新版本的处理。

我正在为我的地图使用SVG图像，因为我希望能够以任意角度放大地图，专注于某些地方，然后在全球范围内显示推特连接。我遇到了几个问题，第一个是当我旋转地图时闪烁的国家的路径边界。这是我的问题的截图：

以下是导致问题的代码：

import processing.opengl.*;
import java.awt.event.*;

PShape map;
PShape test1;
PShape test2;

//camera position/movement intialization
PVector position = new PVector(450, 450);
PVector movement = new PVector();
PVector rotation = new PVector();
PVector velocity = new PVector();

float rotationSpeed = 0.035;
float panningsSpeed = 0.035;
float movementSpeed = 0.05;
float scaleSpeed = 0.25;
float fScale = 2;

void setup(){
  map = loadShape("blank_merc.svg"); //swap out for whatever file
  size(900, 900, OPENGL);
  smooth();
  fill(150, 200, 250);
  addMouseWheelListener(new MouseWheelListener(){
    public void mouseWheelMoved(MouseWheelEvent mwe){
      mouseWheel(mwe.getWheelRotation());
    }
  }); 
}

void draw(){
  if (mousePressed) {
    if (mouseButton==LEFT) velocity.add( (pmouseY-mouseY) * 0.01, (mouseX-pmouseX) * 0.01, 0);
    if (mouseButton==RIGHT) movement.add( (mouseX-pmouseX) * movementSpeed, (mouseY-pmouseY) * movementSpeed, 0);
  }
  //TODO: implement reset functionality: DONE
  if (keyPressed){
    if (key=='r'){
      position.set(450,450);
      rotation.sub(rotation.get());
      velocity.sub(velocity.get());
      movement.sub(movement.get());
    }
  }
  velocity.mult(0.95);
  rotation.add(velocity);
  movement.mult(0.95);
  position.add(movement);

  background(255);
  //lights();




  translate(position.x, position.y, position.z);
  rotateX(rotation.x*rotationSpeed);
  rotateY(rotation.y*rotationSpeed);
  scale(fScale);

  shape(map,-250,-250,1000,1000);

}

void mouseWheel(int delta){
  fScale -= delta * scaleSpeed;
  fScale = max(0.5, fScale);
}

我被告知它可能是路径中的z战斗，我认为这可能是问题，因为当地图是中间旋转时，闪烁更成问题，特别是在与观察平面不正交的角度。我试图通过test1.translate(0,0,0.1);命令在Z方向上“翻译”文件的PShape子项来解决这个问题，但我收到错误告诉我illegal argument exception: cannot use translate(x,y,z) on a PMatrix2D。

我也无法使用其他SVG地图文件测试我的代码，并且通常让SVG看起来像我认为的样子。在我的SVG地图上有一堆城市和其他奇怪的标记，甚至当我从维基媒体公共下载完全“空白”的svg世界地图mercator投影时。这些城市标记/区域属性显示在处理渲染中，不会显示在浏览器视图中。我正在试图弄清楚如何在Inkscape中“清理”我的SVG文件，但我不确定具体要找什么。

例如，我使用此地图运行它：http://commons.wikimedia.org/wiki/File:Mercator_Projection.svg

但我没有使用的点和线，我不得不求助于手动选择和删除路径，这不是一个非常彻底的过程

当我使用this地图时，它应该是上面没有所有标记的“空白版本”，我不仅看到一堆标记（可能在SVG中隐藏了一些样式属性） XML？）但这个奇怪的垂直条带，我的相机控制超级慢。 applet似乎表现得好像文件太大了，但它像2MB。这是一个截图：

enter image description here

我真的只是想找到一种方法来获得一个“干净”的SVG世界地图进入Processing所以我可以旋转它并放大它，如果我可以让它工作我可以启动Arc-Drawing部分。我真诚地感谢任何人都能给予我的帮助。

由于

Answer 1

如果我正确理解你的问题，闪烁只在边缘，大概是它们重叠的地方。这表明z-fight对我来说。我通常会发现在主草图之外进行简单的测试是最好的，只是快速查看发生了什么以及如何修复它。

如果你制作一个有两个重叠形状的简单SVG，只共享一条边，会发生同样的事情吗？

如果是这样，我认为最简单的解决方案（虽然不是那么容易）可能是：

选择Illustrator中的所有国家/地区
使用Object > Transform > Scale...并缩小一点

然后为其他人分享您的固定地图！

处理闪烁问题的3D SVG动画，svg加载问题

1 个答案: