Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

svg - Drawing Tool with Processing

I am trying to create a little drawing tool with processing. The final drawing should be exportable as a .svg file – so i thought this to be pretty easy… but actually it isnt… I put the background function into setup – to be able to draw – the safed svg file unfortunately only contains a single frame – and not the whole drawing. :-( What am I missing – how could I achieve that! I would be thankful for any kind of help!

This is my code so far:

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;
}

Tried different things in organizing the code lines in different orders – but could not manage it…

Thank you!

question from:https://stackoverflow.com/questions/65936271/drawing-tool-with-processing

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

That's because you're creating an image every time you beginRecord and endRecord. If you want to save the image as you see it, you can use save(fileName.png) instead. Here's a code snippet to demonstrate:

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

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

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

If, on the other hand, you really want to use beginRecord, know that it'll save everything you draw between beginRecord and endRecord. You could programatically create an image file this way, as an example, but you cannot just add snapshots to an existing image (which is why you only see "one frame" with your current code). Every time you begin recording, you create a new image. I'm not especially familiar with this method, but one obvious way to do things would be to "save" whatever the user is doing and reproduce those instructions to save them. Here's an example which does this (it saves when you right-click, and I also took the liberty of drawing only when the left mouse button is down):

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;
}

While drawing:

DRAWING

The file (as a png here but it was saved as a svg on my computer):

SAVED IMAGE

Hope it helps. Have fun!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...