Question

除了选择和文本光标的一些错误之外，我即将完成文本编辑器的文本框。我必须从头开始实现它，因为其他库不适合我的编辑器的设计需求。每当用户完成一行并在下一行开始退格时，当用户开始输入时光标和文本就不能正确定位（光标不在右侧 ）。当用户一遍又一遍地保持这种差距时，差距变得更加显着。

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

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

如果您有任何疑问，我会非常乐意回答。因为代码传输很复杂，很多代码都无法正常工作（让用户输入时光标会水平移动），但我认为它足以解决问题。

如何解决问题：

在第一行输入一些文字
点击进入
尝试退格

以下是 Processing 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;
  }
}

处理Java：关闭

1 个答案: