0

私は処理にまったく慣れていませんが、インタラクティブなマップを使用して Web ページを作成したかったのですが、これが唯一の/より簡単な方法のように思えました。

私は少し学びましたが、それは本当にクールですが、画像 (少なくとも 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

ProcessingとSVGソースをチェックインした後、このSVGは少しうそをついているように見えます。これには、「height」および「width」属性とは異なる寸法のビューボックスがあります。これらの属性は、Processingが形状の.widthおよび.height..を決定するために参照する属性です。

実は、高さと幅はそれぞれ432と855に設定されていますが、実際の寸法は実際にはそれぞれ1396と2500であるため、このファイルをXMLファイルとしてロードしない限り、何を試しても常に間違って表示されます。また、「viewbox」属性がレンダリング寸法として報告する内容を確認し、シェイプの.widthプロパティと.heightプロパティの代わりにそれらを使用します。

だからあなたのアプローチは正しいです！SVGファイルは残念なテスト画像です。

于 2013-02-04T23:16:18.300 に答える