有没有办法让文本在 P5.js 上上升，以便为更多文本腾出空间？

Question

我正在尝试为 p5.js 上的演示文稿使用打字效果。我已经拥有的是写在画布上的长文本。当文本达到高度限制时，我不太确定如何让已经写好的文本像信用胶卷一样上升并慢慢消失，或者只是在新画布上写一个全新的文本。 她

let dani = 'hola mundo...................\n..........................\n......................................\n...........................\n.............................\n.........................................................\n.................................\n.................................\n.................................\n......................................................\n...................\n..................\n....................\n....................\n......................\n..............................\n..............................\n...............................\n................................\n............................\n............................\n...........................\n...........................\n............................\n.............................\n..............................\n...............................\n...........................\n.....................................'

let index = 0
let lastMillis = 0


function setup() {
  createCanvas(800, 600);
  textAlign(LEFT, TOP)
  textSize(30)
  frameRate(20)
     
}

function draw() {
  background(220);

  stroke(0)
 text(dani.substring(0,index), 0,10, width, height + textAscent())
  scrollY = scrollY + 40
  if(millis() > lastMillis + 300){
    index = index + 1 
    //PALABRAS COMPLETAS 
    
        // while(dani.charAt(index) != ' ' &&
        //       index < dani.length){
        //  index = index + 1;
        // }
   
  
   
    lastMillis = millis()
    
  }
  
}

console.log(dani)

Answer 1

如果你能避免文字换行，那就相对容易了。您可以根据到目前为止的行数计算高度并进行翻译以防止底线离开屏幕。

如果你绝对必须有换行文字，那就更复杂了，因为你需要确定文字换行的位置来计算高度。底层的 Canvas API 支持测量文本宽度：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText 这在理论上有助于确定文本何时/何地换行，以便您可以正确确定文本的高度。

这是禁用文本换行的更简单情况的示例。

let dani = 'hola mundo...................\n..........................\n......................................\n...........................\n.............................\n.........................................................\n.................................\n.................................\n.................................\n......................................................\n...................\n..................\n....................\n....................\n......................\n..............................\n..............................\n...............................\n................................\n............................\n............................\n...........................\n...........................\n............................\n.............................\n..............................\n...............................\n...........................\n.....................................'

let index = 0
let lastMillis = 0

function setup() {
  createCanvas(400, 200);
  textAlign(LEFT, TOP)
  textSize(30)
  // frameRate(20)
}

function draw() {
  background(220);

  stroke(0)
  let str = dani.substring(0,index);
  let h = str.split('\n').length * textLeading();
  
  if (h > height - 30) {
   translate(0, - (h - (height - 30)));
  }
  
  text(str, 0, 10 /* , width, height + textAscent() */)
  scrollY = scrollY + 40
  if(millis() > lastMillis + 50){
    index = index + 1 
    //PALABRAS COMPLETAS 
    
        // while(dani.charAt(index) != ' ' &&
        //       index < dani.length){
        //  index = index + 1;
        // }
   
  
   
    lastMillis = millis()
    
  }
  
}

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