如何解决如何在画布内实现文本滚动
我有下面的代码,它在画布上呈现一个文本,它折射到 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 行)
如果这个答案对您有帮助,请投票或检查正确!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。