以 "dateless" 的方式使用 vis.js 时间轴（例如视频编辑时间轴）

Question

我想知道是否可以使用 vis.js' 时间轴图表构建一个界面，用于放置来自 <video> 元素的一些关键帧。

我发现其他一些库更接近我正在寻找的东西，例如 timeline.js, or tweentime，但它们作为动画界面更紧密，对我的需求来说太过分了。我只需要放置具有 (t,x,y) 值的关键帧并以友好的方式显示它们。

问题是 vis.js 将时间轴的 'start' 和 'end' 设置为 Date 对象，但我需要的是 dateless ，刚好从 0 到 'n' 秒。我不太清楚如何使用 Date 实现此目的，因为这是 vis.js 使用的方法。

关于如何构建这个的任何想法，或者我无法找到更接近我的方法的替代方案？

Answer 1

vis.js 的时间轴是以模块化方式构建的，因此您可以创建使用当前 TimeAxis 以外的其他轴的时间轴版本。不过，它需要深入研究代码。

Answer 2

您可以将时间轴与以下在 jsfiddle 中明确共享的配置一起使用：https://jsfiddle.net/supereye/7j02Legx/9/

它将为您提供如下界面：

您可以使用以下选项进行此设置：

var start = new Date(1970, 0, 1, 0, 0, 0, 0);
var end = new Date(1970, 0, 1, 0, 1, 0, 0);

var options = {
    width:  "500px",
    height: "100px",

    align: "box",
    groupHeightMode:'fixed',
    maxMinorChars : 2,

    zoomKey: "ctrlKey",
    horizontalScroll: true,
    verticalScroll: true,
    orientation: "top",
    moveable: true,
    zoomable : true,
    editable: true,
    min: start,
    max: end,
    start: start,
    end: end,
    zoomMax: 10000000,
    zoomMin: 1000,

    stack:false,
    multiselect: true,
    multiselectPerGroup: true,

    editable: {
        add: true,
        updateTime: true,
        updateGroup: true,
        remove: true,
        overrideItems: true
    },

    onRemove: function(item, callback) {
        callback(item);
    },

    onMove: function(item, callback) {
        callback(item);
    },
    onMoving: function(item, callback) {
        let currentItem = timeline_items.get(item.id);
        if (item.start < limit_min) item.start = limit_min;
        callback(item);
    },

    rollingMode: {
        follow: false,
        offset: 0.5
    },
};

以 "dateless" 的方式使用 vis.js 时间轴（例如视频编辑时间轴）

Use vis.js timeline in a "dateless" way (e.g. video edit timeline)

javascript

video

timeline

vis.js