Question

我一直在使用blobDetection library处理Processing，从高度图制作等高线图。我现在将每个图层导出为激光切割的SVG，但是草图边缘的斑点不完整，边缘顶点未绘制。

这是一个简化的例子：

我开始的图像，白色区域将变成斑点

SVG输出，缺少边缘

import processing.svg.*;
import blobDetection.*;
import peasy.*;
import processing.pdf.*;
PeasyCam cam;

PImage img;

float levels = 10;

BlobDetection[] contours = new BlobDetection[int(levels)];

//Creating array to store the blob objects
ArrayList<Ring> rings = new ArrayList<Ring>();

void setup() {

  size(480, 360, P3D);
  surface.setResizable(true);

  img = loadImage("maptest2.jpg");
  surface.setSize(img.width, img.height);

  cam = new PeasyCam(this, img.width, img.height, 0, 1500);
  colorMode(HSB, 360, 100, 100);

  for (int i=0; i<levels; i++) {
    contours[i] = new BlobDetection(img.width, img.height);
    contours[i].setThreshold(i/levels);
    contours[i].computeBlobs(img.pixels);
  }

  for (int i = 0; i < rings.size(); i++) {
    System.out.println("id: " + rings.get(i).getId());
    System.out.println("lvl: " + rings.get(i).getLvl());
    System.out.println("x: " + rings.get(i).getX());
    System.out.println("y: " + rings.get(i).getY());
    System.out.println();
  }

  noLoop();
}


void draw() {

  for (int i=0; i<levels; i++) {  

    beginRecord(SVG, "level-"+i+".svg");

    drawContours(i);
    println("drew level " + i);

    println("saved as: level-"+i+".svg");
    endRecord();
    println();

    if(i == levels-1){
      println("finished");
    }

  }

  System.out.println("Number of blobs (rings.size()): " + rings.size());
   println();

   for (int i = 0; i < rings.size(); i++){
   System.out.println("id: " + rings.get(i).getId());
   System.out.println("lvl: " + rings.get(i).getLvl());
   System.out.println("x: " + rings.get(i).getX());
   System.out.println("y: " + rings.get(i).getY());
   System.out.println();
   }

}

void drawContours(int i) {
  Blob b;
  EdgeVertex eA, eB;
  for (int n=0; n<contours[i].getBlobNb(); n++) {
    b=contours[i].getBlob(n);

    //Condition for drawing only blobs bigger than 5% of width and 5% of height
    if(b.w*width>.05*width && b.h*height>.05*height){

      if (b!=null) {
        stroke(250, 75, 90);

        for (int m=0; m<b.getEdgeNb(); m++) {
          eA = b.getEdgeVertexA(m);
          eB = b.getEdgeVertexB(m);

          //This part draws the blobs.

          if (eA !=null && eB !=null)
           line(
           eA.x*img.width, eA.y*img.height, 
           eB.x*img.width, eB.y*img.height 
           );

           println("eA.x: " + eA.x);
           println("eA.y: " + eA.y);
           println("eB.x: " + eB.x);
           println("eB.y: " + eB.y);
           println();

           ////////////
           //Here are my various attempts at drawing these rogue edges!
           //I commented them out

           /*      
           //Checking if vertex has a point at x=0
           if (b.getEdgeVertexA(m).x == 0 && b.getEdgeVertexB(b.getEdgeNb()).x == 0){


                 line(  b.getEdgeVertexA(0).x*img.width, b.getEdgeVertexA(0).y*img.height, 
                        b.getEdgeVertexA(m).x*img.width, b.getEdgeVertexA(m).y*img.height   );

                 println("////");
                 println("x making line (scaled 0-1): ");
                 //println(eA.x, eA.y, eB.x, eB.y);
                 println(  b.getEdgeVertexA(0).x, b.getEdgeVertexA(0).y, 
                           b.getEdgeVertexA(m).x, b.getEdgeVertexA(m).y   );

                 println("////");
           }

           //Checking if vertex has a point at y=0
           if (b.getEdgeVertexA(m).y == 0 && b.getEdgeVertexB(b.getEdgeNb()).y == 0){

             line(  b.getEdgeVertexA(0).x*img.width, b.getEdgeVertexA(0).y*img.height, 
                    b.getEdgeVertexA(m).x*img.width, b.getEdgeVertexA(m).y*img.height   );

                 println("////");
                 println("y making line (scaled 0-1): ");
                 //println(eA.x, eA.y, eB.x, eB.y);
                 println(  b.getEdgeVertexA(0).x, b.getEdgeVertexA(0).y, 
                           b.getEdgeVertexA(m).x, b.getEdgeVertexA(m).y   );

                 println("////");

           }

           if (b.getEdgeVertexA(m).x == 0 && b.getEdgeVertexB(b.getEdgeNb()).y == 0){

             line(  b.getEdgeVertexA(0).x*img.width, b.getEdgeVertexA(0).y*img.height, 0, 0   );
             println("drew to 0,0");
           }

           if (b.getEdgeVertexA(m).y == 0 && b.getEdgeVertexB(b.getEdgeNb()).x == 0){

             line(  b.getEdgeVertexA(m).x*img.width, b.getEdgeVertexA(m ).y*img.height, 0, 0   );
             println("drew to 0,0");
           }
           */
           ////////////

        }

        //Adding objects to the rings ArrayList
        rings.add(new Ring(String.valueOf(rings.size()+1), (int) i, (double) b.x*100, (double) b.y*100));
        }
    }
  }
}

现在我知道我知道我的代码中没有包含任何代码来绘制这些边缘，所以它们并没有真正丢失，但我对于从哪里开始正确绘制它们感到很遗憾。

我想过：

检查构成blob的顶点的任何坐标是否等于0（最小宽度或高度）或1（最大宽度或高度）
从斑点四肢到草图的左上角绘制一条海峡线，例如斑点与该角落重叠
许多其他条件，但很多我很困惑......

任何人都知道如何订购条件，或如何处理问题...... 非常感谢！

Answer 1

我经常用于处理以将绘图限制在窗口范围内的方法是最小和最大函数。它减少了我以前编写的语句中的不等式数。

在你的循环中尝试这个，我还没有对它进行测试，所以我希望它能为你提供所需的输出，但它应该只是沿着你的图像边缘绘制边缘。

          eA = b.getEdgeVertexA(m);
          eB = b.getEdgeVertexB(m);

          //This part draws the blobs.
        if (eA !=null && eB !=null){
          float x1 = eA.x*img.width;
          float y1 = eA.y*img.height;
          float x2 = eB.x*img.width;
          float y2 = eB.y*img.height;

          x1 = min(max(0,x1),WIDTH);
          y1 = min(max(0,y1),HEIGHT);
          x2 = min(max(0,x2),WIDTH);
          y2 = min(max(0,y2),HEIGHT);


          line(x1, y1, x2, y2);

           println("eA.x: " + eA.x + " x1: " + x1);
           println("eA.y: " + eA.y + " y1: " + y1);
           println("eB.x: " + eB.x + " x2: " + x2);
           println("eB.y: " + eB.y + " y2: " + y2);
           println();
         }

逻辑如下：min(max(0,x1),WIDTH)

首先我们找到max(0,x1)所以我们确保x1大于0，如果是负，则将其设置为0。

然后我们取上一个操作的结果并执行以下min(result,WIDTH)所以试图找到两者之间的最小数字，我们知道结果是＆gt; = 0，窗口的WIDTH是＆gt; = 1，所以如果数字大于窗口的宽度，则将其约束为宽度。

我们最终得到一个介于0和WIDTH之间的数字，如果原始值已经在这些约束范围内，则它是未经修改的。这应绘制沿边缘在窗口外部绘制的任何边。试一试，让我知道它是否有效！

Answer 2

我的一位同事偶然发现了这个问题的智能解决方案，即将原始图像的大小增加一个像素，并使这些像素变黑。因此，如果图像是100x100px，那么它将是102x102px。我们在这种情况下添加了黑色像素，但我认为最好的方法是计算决定是否绘制斑点的截止颜色，并为这些新的边框像素指定一个颜色，或略低于/高于（取决于你的需要）。

除了我们导入和修改图片的部分外，代码与我原来的问题大致相同：

PImage ref;
PImage output;
String filename = "maptest2.jpg";

// // //

//Here I skip some parts that are unchanged

// // //

void setup() {

  size(480, 360, P3D);
  surface.setResizable(true);

  ref = loadImage(filename);

  // create a copy of reference image with a black border
  output = createImage(ref.width+2, ref.height+2, RGB);

  for(int i=0; i < output.pixels.length; i++){
    output.pixels[i] = color(0);
  }

  output.updatePixels();
  output.set(1, 1, ref);

  surface.setSize(output.width, output.height);

  cam = new PeasyCam(this, output.width, output.height, 0, 1500);

生成的SVG输出，带有所需的外边框：

当我问这个问题时，这不是我期待的解决方案，但它运作得很好。它当然可以完善一点，但我在一堆其他高度地图上进行了测试，结果一直令人满意。

希望这有帮助！

在“处理”中绘制草图边缘上的Blob边

2 个答案: