日历事件的可视化.以最大宽度布局事件的算法
问题说明
我需要你的算法帮助(它将在客户端使用 javascript 开发,但没关系,我最感兴趣的是算法本身)布置日历事件,以便每个事件框都有最大宽度.请看下图:
I need your help with an algorithm (it will be developed on client side with javascript, but doesn't really matter, I'm mostly interested in the algorithm itself) laying out calendar events so that each event box has maximum width. Please see the following picture:
Y 轴是时间.因此,如果测试事件"在中午开始(例如)并且没有更多的相交,它会占用整个 100% 的宽度.《每周回顾》与《翻滚的基督教青年会》和《安娜/阿米莉亚》有交集,但后两者没有交集,所以都占满了 50%.Test3、Test4 和 Test5 都相交,因此每个的最大宽度为 33.3%.但是 Test7 是 66%,因为 Test3 是 33% 固定的(见上文),所以它占用了所有可用空间,即 66%.
Y axis is time. So if "Test event" starts at noon (for example) and nothing more intersects with it, it takes the whole 100% width. "Weekly review" intersects with "Tumbling YMCA" and "Anna/Amelia", but the latter two are not intersecting, so they all fill up 50%. Test3, Test4 and Test5 are all intersecting, so max width is 33.3% for each. But Test7 is 66% since Test3 is 33% fixed (see above) , so it takes all available space , which is 66%.
我需要一个算法来解决这个问题.
I need an algorithm how to lay this out.
提前致谢
正确答案
- 想象一个只有左边缘的无限网格.
- 每个事件都是一个单元格宽,高度和垂直位置根据开始和结束时间固定.
- 尝试将每个事件放在尽可能靠左的列中,不要与该列中任何较早的事件相交.
- 然后,当放置每个连接的事件组时,它们的实际宽度将是该组使用的最大列数的 1/n.
- 您还可以展开最左侧和最右侧的事件以使用剩余空间.
/// Pick the left and right positions of each event, such that there are no overlap.
/// Step 3 in the algorithm.
void LayoutEvents(IEnumerable<Event> events)
{
var columns = new List<List<Event>>();
DateTime? lastEventEnding = null;
foreach (var ev in events.OrderBy(ev => ev.Start).ThenBy(ev => ev.End))
{
if (ev.Start >= lastEventEnding)
{
PackEvents(columns);
columns.Clear();
lastEventEnding = null;
}
bool placed = false;
foreach (var col in columns)
{
if (!col.Last().CollidesWith(ev))
{
col.Add(ev);
placed = true;
break;
}
}
if (!placed)
{
columns.Add(new List<Event> { ev });
}
if (lastEventEnding == null || ev.End > lastEventEnding.Value)
{
lastEventEnding = ev.End;
}
}
if (columns.Count > 0)
{
PackEvents(columns);
}
}
/// Set the left and right positions for each event in the connected group.
/// Step 4 in the algorithm.
void PackEvents(List<List<Event>> columns)
{
float numColumns = columns.Count;
int iColumn = 0;
foreach (var col in columns)
{
foreach (var ev in col)
{
int colSpan = ExpandEvent(ev, iColumn, columns);
ev.Left = iColumn / numColumns;
ev.Right = (iColumn colSpan) / numColumns;
}
iColumn ;
}
}
/// Checks how many columns the event can expand into, without colliding with
/// other events.
/// Step 5 in the algorithm.
int ExpandEvent(Event ev, int iColumn, List<List<Event>> columns)
{
int colSpan = 1;
foreach (var col in columns.Skip(iColumn 1))
{
foreach (var ev1 in col)
{
if (ev1.CollidesWith(ev))
{
return colSpan;
}
}
colSpan ;
}
return colSpan;
}
现在对事件进行排序,而不是假设它们已排序.
Now sorts the events, instead of assuming they is sorted.
Edit2:如果有足够的空间,现在向右展开事件.
Now expands the events to the right, if there are enough space.
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /reply/detail/tanghfich
-
YouTube API 不能在 iOS (iPhone/iPad) 工作,但在桌面浏览器工作正常?
it1352 07-30 -
iPhone,一张图像叠加到另一张图像上以创建要保存的新图像?(水印)
it1352 07-17 -
保持在后台运行的 iPhone 应用程序完全可操作
it1352 07-25 -
使用 iPhone 进行移动设备管理
it1352 07-23 -
在android同时打开手电筒和前置摄像头
it1352 09-28 -
检查邮件是否发送成功
it1352 07-25 -
扫描 NFC 标签时是否可以启动应用程序?
it1352 08-02 -
Android微调工具-删除当前选择
it1352 06-20 -
希伯来语的空格句子标记化错误
it1352 06-22 -
Android App 和三星 Galaxy S4 不兼容
it1352 07-20