1

尝试制作 UI 库

您好，我正在制作一个 UI 库，因为我有一些空闲时间
我添加了一个按钮，
然后我尝试添加一个文本框，为此我需要添加一个闪烁
的光标光标动画正确但问题是光标的位置不正确
我没有更改文本的大小、字体、对齐方式或任何内容，但光标仍然呈现在它应该在的位置之前
这是渲染光标的代码
line(x + textWidth(val), y + 2, x + textWidth(val), y + textAscent() + 2);
我在某处听到填充已经包含在 textWidth 函数中...由于我没有在 x 和 w 值上添加 +2，val 是一个字符串，每次用户按下键盘上的键时都会更新
y 值现在可以正常工作.. . 也没有错误信息
我试过在网上寻找，但没有一个解决方案适合我

输入文字前 输入文字
后

4

1 回答 1

1

快速浏览一下，我的观点是 Processing 的文本工具需要一点爱，正如您可以在此处和此处看到的（以及注释代码）。渲染器F2XD似乎处理得更好一些；

查看图像，可能有一些特殊的 unicode 字符没有正确显示，并且字体是可变的。

如果您愿意在基本的概念证明上妥协，您可以通过坚持使用等宽字体（例如 Courier New）来获得一些东西：它会产生更可预测的结果（并使用FX2D帮助）：

float x = 5;
float y = 15;
String val = "Hello";

void setup(){
  size(300, 60, FX2D);
  fill(0, 192, 0);
  strokeWeight(3);
  textFont(createFont("Courier New", 16));
}

void draw(){
  background(0);
  text(val, x, y + textAscent());
  stroke(0, sin(frameCount * 0.15) * 128, 0);
  line(x + textWidth(val), y + 2, x + textWidth(val), y + textAscent() + 2);
}

void keyPressed(){
  if(keyCode == DELETE || keyCode == BACKSPACE){
    if(val.length() >= 1) val = val.substring(0, val.length() - 1);
  }
  if(key >= '0' && key <= 'z'){
    val += key;
  }
  if(key == ' '){
    val += ' ';
  }
}

另一种选择可能是主要使用 JavaFX 来手动处理文本，然后将这些文本组件呈现到 Processing 的FX2DCanvas 中。（这可能更冗长。）

于 2022-01-31T11:19:46.373 回答