加工绘图工具

Question

我正在尝试创建一个带有处理功能的小绘图工具。最终的绘图应该可以导出为 .svg 文件——所以我认为这很容易……但实际上并不…… 我将背景功能放入设置中——以便能够绘制——不幸的是，安全的 svg 文件只包含一个框架——而不是整个绘图。 :-( 我错过了什么——我怎么能做到这一点！如有任何帮助，我将不胜感激！

到目前为止，这是我的代码：

import processing.svg.*;

boolean record;



void setup () {
  size(1080, 1080);
  background(255);
}

void draw() {
  if (record) {
    beginRecord(SVG, "frame-####.svg");
  }

  fill(255);
  strokeWeight(1);
  ellipse(mouseX, mouseY, 100, 100);
  if (record) {
    endRecord();
    record = false;
  }
}

void mousePressed() {
  record = true;
}

尝试了不同的方法来按不同的顺序组织代码行——但无法管理……

谢谢！

Answer 1

那是因为每次开始记录和结束记录时，您都在创建图像。如果你想保存你看到的图像，你可以使用 save(fileName.png) 代替。这是一个代码片段来演示：

void setup() {
  size(800, 600);
  background(255);
  
  fill(255);
  strokeWeight(1);
}

void draw() {
  ellipse(mouseX, mouseY, 100, 100);
}

void mousePressed() {
  save("myImage.png");
}

另一方面，如果您真的想要使用beginRecord，知道它会保存您在beginRecord和[之间绘制的所有内容=15=]。例如，您可以通过这种方式以编程方式创建一个图像文件，但您不能只将快照添加到现有图像（这就是为什么您在当前代码中只能看到“一帧”）。每次开始录制时，都会创建一个新图像。我不是特别熟悉这种方法，但一种明显的做事方式是“保存”用户正在做的任何事情并重现这些指令以保存它们。这是一个这样做的例子（当你右键单击时它会保存，我也冒昧地只在按下鼠标左键时才绘图）：

import processing.svg.*;

boolean record;
ArrayList<PVector> positionsList;

void setup() {
  size(800, 600);

  positionsList = new ArrayList<PVector>();
}

void draw() {
  background(255);

  fill(255);
  strokeWeight(1);
  for (PVector p : positionsList) {
    ellipse(p.x, p.y, 100, 100);
  }
  ellipse(mouseX, mouseY, 100, 100);

  if (record) {
    positionsList.add(new PVector(mouseX, mouseY));
  }
}

void mousePressed() {
  record = mouseButton == LEFT;

  if (mouseButton == RIGHT) {
    beginRecord(SVG, "frame.svg");

    fill(255);
    strokeWeight(1);
    for (PVector p : positionsList) {
      ellipse(p.x, p.y, 100, 100);
    }

    endRecord();
  }
}

void mouseReleased() {
  record = false;
}

绘图时：

文件（这里是 png 但在我的电脑上保存为 svg）：

希望对您有所帮助。玩得开心！

Answer 2

import processing.pdf.*;
PShape shape;

void setup () {
  size(1080, 1080);
  beginRecord(PDF, "drawing.pdf");
  shape = loadShape("shape.svg");
  shapeMode(CENTER);
  background(0,255,0);
}

void draw() {


  shape.disableStyle();
  fill(255);
  strokeWeight(10);
  shape(shape, mouseX, mouseY, 200, 200);
}

void keyPressed() {
  if (key == 's') {
    endRecord();
    exit();
  }
}

加工绘图工具

Drawing Tool with Processing

svg

processing

drawing