让这个逆向计算的扫描线摇滚。在 div 中扫描多行很难答案

【问题标题】：Make this retrocomputing scanline rock. Scan multiple lines in div is hard让这个逆向计算的扫描线摇滚。在 div 中扫描多行很难
【发布时间】：2013-03-11 11:59:01
【问题描述】：

工作小提琴在这里： http://jsfiddle.net/WyXLB/1/

当一个 HTML 元素包含多行文本时，我想扫描每一行。目前，我只是扫描整个元素的边界矩形。

一些代码是：

function run_scan(el,mask,callback) {
    // we need to go over each line of text in here
    // or somewhere
    var el_font_size = $(el).css('font');
    $('body').append(sizer);
    sizer.css({
        'position': 'absolute',
        'font' : el_font_size,
        'white-space' : 'pre' } );
    var real_box = window.getComputedStyle(sizer[0]);
    var real_width = parseFloat(real_box.width);
    var real_height = parseFloat(real_box.height);
    var lines = Math.round($(el).height()/real_height);
    var mask_offset = $(mask).offset();
    var origin_left = mask_offset.left;
    var duration = parseFloat($(mask).width())/2.0;
    $(mask).animate( {
        'left':origin_left+$(mask).width()
        },
        {
            duration:duration,
            complete:callback
        } );
}

如何打破整个边界矩形上的动画，以扫描每一行。我尝试在上述函数中放置一个动画->回调递归，每次调用将掩码降低一个 real_height，但出现不可预测/混乱的行为。

【问题讨论】：

感谢点赞的好心人
不错的编码 :) 如果涉及换行符，您可以检查它们。或者您可以尝试使用 jQuery 将每一行放在 <span> 标记之间？这样您就不必编辑扫描功能。
您将需要有 2 个掩码，一个带有边框的线条，第二个用于需要隐藏的线条，并且掩码的高度需要是一行的大小。您将需要在循环中运行动画以获取行数，当第一行完成时运行下一行。
@Brainfeeder 我喜欢你的建议。好主意！
@jcubic 是的！你明白。我目前正在尝试研究如何运行这个循环动画模式。

标签： javascript jquery css scanline retro-computing

【解决方案1】：

如果您只需要循环，那么它应该如下所示（在run_scan 内）

    var i = 0;
    function loop() {
        if (++i < lines) {
            $(mask).animate({
                'left':origin_left+$(mask).width()
            },{
                duration:duration,
                complete:loop
            });
        } else {
            // last line
            callback();
        }
    }

【讨论】：