Question

我的目标是获得1像素宽的文本大纲。

我想不出一个好的方法来解决这个问题所以我做了以下（伪代码）：

PImage img;

void setup() {
  size(400, 400);    
  // use text() to write on the canvas
  // initialize PImage img
  // load pixels for canvas and img
  // loop thru canvas pixels and look for contrast
  for (int x = 0; x < width; x++) {
    for (int y = 0; y < height; y++) {
      // compare canvas pixels at x-y with its neighbors
      // change respective pixel on PImage img so as not to disturb canvas
    }
  }
  // update pixels and draw img over the canvas
  img.updatePixels();
  img(img, 0, 0);
}

简而言之，我在画布上的黑色背景上写了白色文本，进行了一些边缘检测并在PImage上绘制结果，然后使用PImage存储结果。我想我可以跳过PImage阶段，但我想看看边缘检测算法产生了什么。

所以这在获得大纲方面做得不错，但存在一些问题：

轮廓有时宽1+像素。这是个问题。假设我想将轮廓（即白色像素的所有位置）存储在ArrayList中。

例如，如果使用ArrayList，我会沿着轮廓的每个点绘制一个椭圆，结果都可以。但是，如果我想要将椭圆间隔开，椭圆轮廓会变得粗糙。在我提供的小提琴中，字母'h'的左边缘是2像素宽。有时椭圆将在内部像素处绘制，有时在外部。这种事情让它看起来很难看。

ArrayList的元素可能是ArrayList中的邻居，但不是PImage上的邻居。如果我想为每个第10个ArrayList位置绘制一个圆，则结果不一定在PImage上间隔开。

以下是一个丑陋的示例：https://jsfiddle.net/Lk1ju9yw/1/

我很确定我明白为什么会这样。我只是不知道如何避免它。

我也相信p5.js中有一个解决方案（PFont方法）。我很乐意使用p5，但除非我必须（因为困难），我宁愿使用处理。我也听说过一些处理中的库可以帮助解决这个问题。部分地，我对结果感兴趣，但我也有兴趣学习我是否可以自己编写解决方案（有一些指导，即）。

Answer 1

您可以在P5.js中轻松获得文本大纲，因为文本符合填充和描边颜色。因此，如果您拨打noFill()，则不会填写文字，如果您拨打stroke(0)，则文字会显示黑色。

function setup() { 
  createCanvas(400, 200);
  noSmooth();
} 

function draw() { 
  background(220);
	
  textSize(72);
  textAlign(CENTER);
	
  noFill();
  stroke(0);
	
  text("hey", width/2, height/2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>

不幸的是，这种方法在常规Processing中不起作用，因为它只使用文本的笔触颜色。我不完全确定Processing.js，但我的猜测与Processing相同。

如果你将它绘制到缓冲区（使用createGraphics()），那么你可以遍历缓冲区以获得构成轮廓的点列表。

现在，至于按正确的顺序排列积分，你将不得不自己做。我遇到的第一种方法是对它们进行排序并按字母分组。

例如，您的算法可能是：

找到最左上角的点。将其添加到您的列表中。
你刚刚添加的是否有任何邻居？如果是，请选择一个并将其添加到列表中。重复此步骤，直到该点没有邻居。
还有什么意义吗？如果是，请找到最接近您刚刚添加的点，并将其添加到列表中。转到第2步。

这可能并不完美，但如果你想要更高级的东西，你可能不得不开始考虑处理点列表：例如，可能删除有左邻居的点。你将不得不四处寻找你正在寻找的效果。

这是一个有趣的问题。谢谢你。祝你好运，听起来像一个有趣的项目。

在处理

1 个答案: