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

问题描述

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

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

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

      if (fitWidth <= 0) {
        context.fillText(text,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(' '),y + (lineHeight * currentLine));
          currentLine++;
          words = words.splice(idx - 1);
          idx = 1;
        } else {
          idx++;
        }
      }

      if (idx > 0)
        context.fillText(words.join(' '),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,ratio,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,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,120,window.innerWidth / 2);

解决方法

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

    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(' '),y + (lineHeight * (currentLine - line) )); }

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

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

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

如果这个答案对您有帮助，请投票或检查正确！