Javascript 在HTML/CSS/JS中制作固定比例的时间线

对不起，这会有点长

一点背景 作为一个更大项目的一部分，我正试图制定一个项目时间表，将其包含在一个用于远程控制音乐制作程序的网页中（感兴趣的人称之为Reaper）。我试图让它显示当前播放位置、项目标记和项目区域。这些都是直接从程序的API提供的，获取信息没有问题。首先，我只是想展示项目标记，然而我已经花了一个多星期的时间试图让它工作

下面是软件内部的一个快速屏幕帽，以说明我试图模拟的内容：

通常情况下，我会使用进度条来完成类似的事情，或者是web上数千个示例中的一个，但是我无法知道项目的长度，因为软件没有限制它。结果，我又开始使用每巴10px的固定刻度。有点随意，我选择了它，因为它是以120 bpm的速度播放5分钟歌曲的最佳选择。暂时不太担心外表，我只是想让它发挥作用哈哈

我遇到的问题（代码包含在底部）是，因为我使用绝对定位标记，以便从屏幕左侧对齐所有标记，它们是从文档流中提取的，因此我不能将它们包装在父div中。最后，我打算使用滚动条将父div设置为80%的宽度，以查看其余的标记，因此显然我做错了。然而，我似乎找不到任何与我试图实现的目标类似的代码片段

这就是实际的问题： 我应该使用什么类型的显示/位置/浮动CSS来执行此操作，而不是使用

位置：绝对

和

浮动：左

？如果我需要JS来做这件事，那么我该怎么做呢

谢谢你能给我带来的任何帮助，无论是实际的代码还是仅仅是朝着正确的方向轻推

---

以下是我的（相关）代码：

index.html 关于 我们得到了一系列函数，这些函数定期轮询服务器并解析（明文）响应。典型的响应如下所示：

MARKERLIST_BEGINMARKER_LIST
MARKER \t label \t ID \t position
...
MARKER_LIST_END
TRANSPORT \t playstate \t position_seconds \t isRepeatOn \t position_string \t position_string_beats
...

---

我使用JS分割每一行，并使用switch语句来确定如何处理每一行。然后，我建立一个全局数组，其中包含项目中的所有标记以及我需要的信息。

您可以使用

div

s作为

display:inline block

，并将其宽度设置为重叠绝对时间线位置的增量百分比：

function draw_markers(marker_list) {
    var label_html = "";
    var marker_html = "";
    var total = null;
    var prev = 0;

    $.each(marker_list, function(index, obj) {
        var delta = parseFloat(obj.pos) - prev;
        obj.delta = delta;
        prev += parseFloat(obj.pos);
        total += delta;

    })

    $.each(marker_list, function(index, obj) {
        var label = obj.label;

        var offset = parseFloat(obj.delta) / (total / 100); // obj.pos is mesured in bars, not px

        label_html = label_html +
                    "<div class='label' style='width:"+offset+"%'>" +
                    label + "</div>";

        marker_html = marker_html +
                    "<div class='marker' style='width:"+offset+"%'>|</div>";
    });

    document.getElementById("labels").innerHTML = label_html;
    document.getElementById("markers").innerHTML = marker_html;
}

draw_markers(markers);

---

或者，您可以使用Javascript绘制时间线（这是我用于的web界面）。您还可以使用

GetProjectLength

API函数获取项目长度（例如，通过调用脚本将长度放入临时extstate，然后从web界面读取）

功能时间线（画布）{
this.canvas=画布；
this.ctx=canvas.getContext（'2d'）；
这个长度=0；
this.markers=[]；
}
Timeline.prototype.resize=函数（）{
this.canvas.width=this.canvas.clientWidth；
this.canvas.height=this.canvas.clientHeight；
this.scale=this.length/this.canvas.width；
}
Timeline.prototype.update=函数（）{
这是resize（）；
this.ctx.fillStyle='#414141'；
this.ctx.fillRect（0，0，this.canvas.width，this.canvas.height）；
this.ctx.textBaseline='挂起'；
for（此.markers的变量标记）
这个。绘图标记（标记）；
}
Timeline.prototype.drawMarker=函数（标记）{
常数标记_宽度=2；
常量字体大小=14；
常量填充=标记宽度*2；
var xpos=this.timeToPx（marker.pos）；
this.ctx.strokeStyle=this.ctx.fillStyle='red'；
this.ctx.lineWidth=标记宽度；
this.ctx.beginPath（）；
this.ctx.moveTo（xpos，0）；
this.ctx.lineTo（xpos，this.canvas.height）；
这个.ctx.stroke（）；
如果（marker.name.length>0）{
this.ctx.font=`bold${font_SIZE}px sans serif`；
var-boxWidth=this.ctx.measureText（marker.name）.width+PADDING；
this.ctx.fillRect（xpos，0，boxWidth，字体大小+填充）；
this.ctx.fillStyle='white'；
this.ctx.fillText（marker.name，xpos+marker_WIDTH，PADDING）；
}
}
Timeline.prototype.timeToPx=函数（时间）{
返回时间/这个刻度；
}
var timeline=新的时间线（document.getElementById（'timeline'）；
timeline.length=30；//TODO:使用GetProjectLength获取
timeline.markers=[
{pos:3，name:“Hello”}，
{pos:15，name:“World！”}，
{pos:29，姓名：”“}，
];
timeline.update（）；
window.addEventListener（'resize'，timeline.update.bind（timeline））
#时间线{
高度：50px；
线高：50px；
图像渲染：像素化；
宽度：100%；
}
阅读相对定位，它会让您更好地控制绝对定位的项目。然后，当你调整你的时间线时，你可以调整标记的x值，等等。这可能是值得一看的好主意，但是我可以想到一些问题。首先，事实是我的标记数组没有任何顺序，所以这会把规模搞得一团糟，其次，事实是我（未来）的游戏头可以（而且肯定会）越过最后一个标记，所以在这里，我相信它会戳出父div的末端。我正在考虑使用画布来完成所有的绘图，而不是使用CSS定位。如果我不明白的话，我以后可能会再讨论这个问题，谢谢！哇，那正是我想要的，谢谢。真不敢相信我没有在收割者论坛上找到你的项目，我花了足够长的时间寻找东西！我不知道如何从网络上访问
GetProjectLength
函数，但我必须做一些挖掘。谢谢你！
    html, body {
    background: #eeeeee;
}

#timeline {
    height: 4em;
    width: 100%;
    background-color: #9E9E9E;
}

#labels {
    border-bottom: 1px solid black;
    height: 50%;
    width: 100%;
}

#markers {
    height: 50%;
    width: 100%;
}

.label {
    position: absolute;
    float: left;
}
.marker {
    position: absolute;
    float: left;
}

MARKERLIST_BEGINMARKER_LIST
MARKER \t label \t ID \t position
...
MARKER_LIST_END
TRANSPORT \t playstate \t position_seconds \t isRepeatOn \t position_string \t position_string_beats
...

function draw_markers(marker_list) {
    var label_html = "";
    var marker_html = "";
    var total = null;
    var prev = 0;

    $.each(marker_list, function(index, obj) {
        var delta = parseFloat(obj.pos) - prev;
        obj.delta = delta;
        prev += parseFloat(obj.pos);
        total += delta;

    })

    $.each(marker_list, function(index, obj) {
        var label = obj.label;

        var offset = parseFloat(obj.delta) / (total / 100); // obj.pos is mesured in bars, not px

        label_html = label_html +
                    "<div class='label' style='width:"+offset+"%'>" +
                    label + "</div>";

        marker_html = marker_html +
                    "<div class='marker' style='width:"+offset+"%'>|</div>";
    });

    document.getElementById("labels").innerHTML = label_html;
    document.getElementById("markers").innerHTML = marker_html;
}

draw_markers(markers);

html, body {
    background: #eeeeee;
}

#timeline {
    height: 4em;
    width: 100%;
    background-color: #9E9E9E;
}

#labels {
    border-bottom: 1px solid black;
    height: 50%;
    width: 100%;
}

#markers {
    height: 50%;
    width: 100%;
}

.label {
    position: relative;
    display: inline-block;
}
.marker {
    position: relative;
    display: inline-block;
}