Question

我试图在Processing中创建一个简单，快速和脏的演示界面，其中小部件动画由我循环的SVG帧组成。我只是在学习，而且我在这个领域没有任何经验，所以请耐心等待。问题是我输入的x，y坐标不是SVG绘制的位置。 Here is a screenshot comparing expected draw location vs actual draw location

我已经检查了我的原始SVG（在Adobe Animate CC中创建并逐帧导出），我使用shapeMode（），我尝试使用viewBox中的路径坐标进行翻译（它没有改变什么），我花了太多时间在网上搜索。这是代码：

ArrayList<Button> buttons;

//creating background grid(50x50)
int nbOfHorizontalLines = 20;
int nbOfVerticalLines = 30;

void setup() {
  size(1500, 1000);
  buttons = new ArrayList<Button>();

  // button constructor: x, y, width, height, text
  buttons.add(new Button (100, 100, 100, 100, "100,100 (top left corner of button should be drawn here)"));

}

void draw() {
  background(200);
  frameRate(20);

  float distanceBetweenHorizontalLines = (float)height/nbOfHorizontalLines;
  float distanceBetweenVerticalLines = (float)width/nbOfVerticalLines;

  for(int i = 0; i < nbOfHorizontalLines; i++)
  {
    stroke(#56A9FA);
    line(0, i *distanceBetweenHorizontalLines, width, i*distanceBetweenHorizontalLines);  
  }

  for(int i = 0; i < nbOfVerticalLines; i++)
  {
    stroke(#56A9FA);
    line(i*distanceBetweenVerticalLines, 0, i*distanceBetweenVerticalLines, height);
  }

  // draw buttons
  for (Button b : buttons) {
    b.drawButton();

  }
  textSize(15);
  text("~210,140", 210, 128);
}

这是Button的类（为了这篇文章而编辑，因此它只绘制一个帧，而不是遍历我的所有SVG文件）：

class Button {

  float x, y;
  //width and height
  float w, h;
  //cycles through the animation files 
  ArrayList<PShape> restFrames;
  //var to load current frame
  PShape frame;
  int frameIndex;
  //assign text string from parameter to t
  String t;


  public Button(float newX, float newY, float newWidth, float newHeight, String newText) {

    x = newX;
    y = newY; 
    w = newWidth ;
    h = newHeight;
    frameIndex = 0;
    t = newText;
    restFrames = new ArrayList<PShape>();

    restFrames.add(loadShape("cleanBreathingNoBG_1.svg"));

  }

  void drawButton() {
    shapeMode(CORNER);
    PShape frame = restFrames.get(frameIndex);

    shape(frame, x, y, w, h);  
    textSize(18);
    fill(0);
    textAlign(LEFT, TOP);
    text(t, x, y);
  }
}

最后，SVG本身的代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="386px" height="363px" viewBox="0 0 386 363">
<defs>
<path id="Layer0_0_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 454.95 160.95
Q 478.0671875 309.616015625 464.95 476.9"/>

<path id="Layer0_1_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 464.95 476.9
Q 607.547265625 499.9689453125 769.9 479.9"/>

<path id="Layer0_2_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 770.9 481.9
Q 761.9529296875 312.828515625 769.9 158.95"/>

<path id="Layer0_3_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 454.95 157.95
Q 614.925 174.6916015625 769.9 156.95"/>

<path id="Layer0_4_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 463.95 475.9
L 442.95 502.9"/>

<path id="Layer0_5_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 769.9 478.9
L 783.9 503.9"/>

<path id="Layer0_6_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 771.9 158.95
L 782.9 183.95"/>

<path id="Layer0_7_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 785.9 505.9
Q 781.89296875 341.61796875 784.9 187.95"/>

<path id="Layer0_8_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 446.95 504.9
Q 616.425 506.6560546875 780.9 505.9"/>

<path id="Layer0_9_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 452.95 159.95
L 439.95 182.95"/>

<path id="Layer0_10_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 442.95 501.9
Q 449.8580078125 337.425 439.95 186.95"/>
</defs>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_0_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_1_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_2_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_3_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_4_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_5_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_6_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421.7,-148.75) ">
<use xlink:href="#Layer0_7_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_8_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_9_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_10_1_STROKES"/>
</g>
</svg>

如果需要其他信息，请告诉我是否遗漏了任何内容！我很感激你的帮助，因为我是一个初学者，我身边也没有人知道这件事。

Answer 1

偏移量来自svg文件。

我通过将svg文件与另一个svg文件一起加载（我从转到File > Examples > Basics > Shape > LoadDisplaySVG然后转到Sketch > Show Sketch Folder然后复制{{1}从示例的bot1.svg目录到我的data目录。然后我运行此代码：

data

PShape yourShape; PShape myShape; void setup(){ size(500, 500); yourShape = loadShape("image.svg"); myShape = loadShape("bot1.svg"); } void draw(){ background(200); ellipse(mouseX, mouseY, 10, 10); shape(yourShape, mouseX, mouseY, 100, 100); shape(myShape, mouseX, mouseY, 100, 100); }文件是您的image.svg文件，这就是我所看到的：

svg offsets

这表明＆＃34;我的＆＃34; svg文件的左上角为svg，但您的文件有偏差。

现在，我不确定为什么您的mouseX, mouseY包含偏移量，但这至少表明它不是处理代码，并为您提供您可以使用更简单的示例。如果我是你，我会用精细梳齿检查你的svg文件。偏移对于其他人来说可能是显而易见的，但我对svg文件不是很熟悉。祝你好运。

处理中的SVG动画未在正确的位置绘图

1 个答案: