1

我已经使用带有以下选项的 vis.js 实现了时间线：

  var timeline_items = new vis.DataSet();
  var timeline_groups = new vis.DataSet();

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

  var options = {
      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,
      showCurrentTime: true,
      multiselect: true,
      multiselectPerGroup: true,
  };

时间线非常适合带有选项的视频编辑器时间线。现在，我打算在时间线中获取拖放操作的最新可用日期：

function handleDragStart(event) {
  event.target.id = event.currentTarget.id;
  event.target.addEventListener('dragend', handleDragEnd, false);
}

function handleDragEnd(event) {
  newItem_dropped = $("#" + event.target.id);
  var latest_date  = options.min;
  for (var i = 0; i < timeline_items.get().length; i++) {
    if (latest_date < timeline_items.get()[i].end) {
      latest_date = timeline_items.get()[i].end;
    }
  }

  var start = Math.round((latest_date - options.min));
  var end   = Math.round((latest_date - options.min)) + 
                $(newItem_dropped).attr('data-entity-segment-end') - 
                $(newItem_dropped).attr('data-entity-segment-start');
  var link  = $(newItem_dropped).attr('data-src');

  parsed_start = parseMillisecondsIntoReadableTime(start);
  parsed_end   = parseMillisecondsIntoReadableTime(end);

  timeline_items.add({
    id: $(newItem_dropped).attr('id'),
    group: "timeline_video_group_id", // truck,
    start: new Date(1970, 0, 1, parsed_start[0], parsed_start[1], parsed_start[2], 
                    parsed_start[3]),
    end: new Date(1970, 0, 1, parsed_end[0], parsed_end[1], parsed_end[2], 
                  parsed_end[3]),
    content: "<img src='" + link + "'></img>",
    className: 'imagecontainer'
  });
}

特别是，在 DragEnd 函数中，我尝试为时间线的 DataSet 中的项目计算最新日期，但它没有正确计算它。

我应该如何在时间线中获得最新的可用日期？

4

1 回答 1

0

添加此功能以获取可用的最新日期解决了我的问题：

function rearrange_timeline_min_max_value()
{
    console.log("timeline_get_latest_date start");
    var rearranged_timeline_date = timeline_get_latest_date();

    if (rearranged_timeline_date < new Date(1970, 0, 1, 00, 01, 00, 000)) {
        rearranged_timeline_date.setSeconds(60);
    } else if (options.max < timeline_get_latest_date()) {
        console.log("timeline_get_latest_date atest data before : " + timeline_get_latest_date());

        rearranged_timeline_date.setSeconds(
            rearranged_timeline_date.getSeconds() + 30
        );

        console.log("timeline_get_latest_date atest data after : " + timeline_get_latest_date());
    }

    timeline.setOptions({min: new Date(1970, 0, 1, 00, 00, 00, 000),
                         max: rearranged_timeline_date});
    timeline.fit();
    timeline.redraw();
    console.log("timeline_get_latest_date end");
}
于 2022-01-09T10:45:17.377 回答