如何在画布内实现文本滚动

Posted 2023-03-25

【中文标题】如何在画布内实现文本滚动

【英文标题】：How do you achieve text scrolling inside a canvas

【发布时间】：2021-05-19 20:30:12

【问题描述】：

我有下面的代码，它在画布上呈现文本，折射到 3D 对象，我想使用鼠标滚轮使文本滚动，或者使用翻译但似乎无法使其绑定，有没有办法实现那个？

我已经使用 lineheight 进行了自动换行，并使不同功能的高清显示器上的字体文本不模糊，但似乎无法仅实现滚动，非常感谢您的帮助。

function printAtWordWrap(context, text, x, y, lineHeight, fitWidth) 
      fitWidth = fitWidth || 0;

      if (fitWidth <= 0) 
        context.fillText(text, x, y);
        return;
      
      var words = text.split(' ');
      var currentLine = 0;
      var idx = 1;
      while (words.length > 0 && idx <= words.length) 
        var str = words.slice(0, idx).join(' ');
        var w = context.measureText(str).width;
        if (w > fitWidth) 
          if (idx == 1) 
            idx = 2;
          
          context.fillText(words.slice(0, idx - 1).join(' '), x, y + (lineHeight * currentLine));
          currentLine++;
          words = words.splice(idx - 1);
          idx = 1;
         else 
          idx++;
        
      

      if (idx > 0)
        context.fillText(words.join(' '), x, y + (lineHeight * currentLine));
    

    var PIXEL_RATIO = (function() 
      var ctx = document.createElement("canvas").getContext("2d"),
        dpr = window.devicePixelRatio || 1,
        bsr = ctx.webkitBackingStorePixelRatio ||
        ctx.mozBackingStorePixelRatio ||
        ctx.msBackingStorePixelRatio ||
        ctx.oBackingStorePixelRatio ||
        ctx.backingStorePixelRatio || 1;

      return dpr / bsr;
    )();
    let can;

    function createHiDPICanvas(w, h, ratio) 
      if (!ratio) 
        ratio = PIXEL_RATIO;
      
      can = document.createElement('canvas');
      can.width = w * ratio;
      can.height = h * ratio;
      can.style.width = w + "px";
      can.style.height = h + "px";
      can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
      return can;
    

    //Create canvas with a custom resolution.
    if (window.devicePixelRatio > 1) 
      var myCanvas = createHiDPICanvas(window.innerWidth, window.innerHeight, 4);
     else 
      var myCanvas = createHiDPICanvas(window.innerWidth, window.innerHeight, 2);
    

    var ctx = myCanvas.getContext('2d', 
      alpha: false,
      antialias: false
    );

    let x = window.innerWidth / 2;
    var y = window.innerHeight / 2;
    ctx.translate(0, 200);

    const font = new FontFace("MyCanvasFont", "url(https://use.typekit.net/af/2759ad/00000000000000007735a2d2/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3)");
    document.fonts.add(font);
    ctx.font = '300 150px "MyCanvasFont"';
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    var txt = 'CONNECTING BRANDS TO HUMANS THROUGH CULTURE, DESIGN AND TECHNOLOGY';

    printAtWordWrap(ctx, txt, x, y, 120, window.innerWidth / 2);

【参考方案1】：

要点是：你需要知道第一行如何显示。您可以使用参数来控制它。

    function printAtWordWrap(context, text, x, y, lineHeight, fitWidth, line)

控制可以显示的行：

    if(currentLine >= line)
        //remove line value of currentline
        context.fillText(words.slice(0, idx - 1).join(' '), x, y + (lineHeight * (currentLine - line) )); 

注意 ai 将 currentLin 的行值移除到画布位置。

看看我的项目：https://codepen.io/Luis4raujo/pen/xxRrmoE

如果可以向上行代替隐藏，则需要删除 if 语句（第 24 行）

如果此答案对您有帮助，请投票或检查是否正确！

【讨论】：

非常感谢 Luis，是的，它确实帮助了我！