如何使用 vis.js 时间轴获取数据集项中的最新结束日期
How to get the latest end date in DataSet Items withe vis.js Timeline
我已经使用 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 函数中,我尝试计算时间轴数据集中项目的最新日期,但计算不正确。
我应该如何获取时间轴中的最新可用日期?
添加此功能以获取最新可用日期解决了我的问题:
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");
}
我已经使用 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 函数中,我尝试计算时间轴数据集中项目的最新日期,但计算不正确。
我应该如何获取时间轴中的最新可用日期?
添加此功能以获取最新可用日期解决了我的问题:
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");
}