Processing Java: 文本框光标位置关闭

Question

我即将完成文本编辑器的文本框，除了选择和文本光标的一些错误。我必须从头开始实现它，因为其他库不适合我的编辑器的设计需要。每次用户 完成一行并在下一行开始退格 时，当用户开始键入时，光标和文本的位置不正确（光标不在右行 )。当用户一遍又一遍地这样做时，差距会变得更大。

你可以清楚地看到光标（浅蓝色）和文本没有正确对齐。我附上了仅与此问题相关的代码。抱歉，如果文本框未处于最佳位置，因为我已将代码从我的文本编辑器转移到降级版本以解决此问题。

我认为罪魁祸首是：几个小时后，我发现光标位置取决于行和列（如标签所示）-我没有将标签附加到这个问题的例子中。 行显示2，但应该是1。当 列为 1 并且用户退格 时，该行应该减少 1，并且该列设置为上一行的长度。

如果您有任何问题，我很乐意回答。因为代码传输起来很复杂，所以很多都不能正常工作（当用户键入时光标水平移动），但我认为这足以解决问题。

如何解决问题:

在第一行输入一些文字
回车
尝试退格

这是处理中的文本框代码 Java:

// Content
String content = "";
String[] adjustedLines = {
};

// Current position
int row = 1;
int line = 1;
int column = 1;

// Cursor length
float cursorLength = 12;

// Whether line has been subtracted and readjustment to text has been completed
boolean lineSubtracted = false;

// Positions of scrollbar
float cursorX = width/5 + 55;
float cursorY = 55;

void setup()
{
  // Background and size
  background(0);
  size(1500, 700);
}

// Create set of line numbers given starting number and number of lines
void createLineNumbers(int startingNumber, int numberOfLines)
{
  textAlign(LEFT);
  String lineText = "";
  textLeading(22);

  for (int i = startingNumber; i <= startingNumber + numberOfLines; i++)
  {
    lineText += (str(i) + "\n");
  }

  fill(200);
  text(lineText, width/5 + 12.5, 75);
  textAlign(CENTER);
}

void draw()
{
  background(0);

  // Update cursor position
  cursorX = width/5 + 55;
  cursorY = 55;

  textAlign(CENTER);

  // Text Box
  fill(80);
  rect(width/5, 55, width*4/5, height-55);

  textAlign(LEFT);
  textLeading(22);
  fill(255);

  String[] contentLines = content.split("\n");
  String display = "";
  int lineDifference = 0;

  display = content;
  text(display, width/5+55, 75);

  // Line Numbers
  textAlign(CENTER);
  fill(240);

  createLineNumbers(1 + lineDifference, line + lineDifference);
  cursorY = 55 + 22 * line;

  textAlign(RIGHT);

  // Cursor
  stroke(149, 203, 250);
  strokeWeight(4);
  line(cursorX, cursorY, cursorX - cursorLength, cursorY);
  noStroke();

  textAlign(CENTER);
}

// Updates content and locations from user typing
void keyPressed()
{
  String[] allLines = content.split("(?<=\n)");
  boolean willPrint = false;

  if (key == BACKSPACE)
  {
    if (column <= 1)
    {
      if (line > 1)
      {
        line--;
        lineSubtracted = true;
        finished = false;
      }

      column = 2;

      if (lineSubtracted == true && allLines[allLines.length - 1].length() > 1 && allLines.length > 1)
      {
        column = allLines[allLines.length - 2].length();
      }
    }

    if (content.length() > 0)
    {
      content = content.substring(0, content.length() - 1);
    }

    column--;
  } else if (key == TAB)
  {
    column += 4;
    content += "    ";
  } else
  {
    if (key == ENTER)
    {
      line++;
      column = 0;
    } else if (lineSubtracted == true && finished == false && line > 1)
    {
      if (line == allLines.length)
      {
        content = content.substring(0, content.length() - 1);
      }

      finished = true;
    }

    content += key;

    column++;
  }

  column = allLines[allLines.length - 1].length();
}

Answer 1

尽管如此，您还是要经历很多困难才能显示一些可编辑的文本。这是一个让 Processing 为您完成工作的简化示例：

String text = "";
String cursor = "_";

boolean blink = true;

void setup() {
  size(500, 500);
}

void draw() {

  if(frameCount % 30 == 0){
    blink = !blink;
  }

  background(0);

  if(blink){
    text(text, 100, 100, 200, 200);
  }
  else{
    text(text+cursor, 100, 100, 200, 200);
  }
}

void keyPressed()
{
  if (key == BACKSPACE)
  {
    if (text.length() > 0) {
      text = text.substring(0, text.length()-1);
    }
  } else {
    text += key;
  }
}

Processing Java: 文本框光标位置关闭

Processing Java: Cursor position of text box off

java

processing