请问下面的界面和效果怎么做出来，希望老师能帮助一下

cainiaoqter

大家好，最近做一个动画编辑器，需要做出下面的效果，如截图中所示，图后有详细的描述：


1、在动画编辑界面有很多对象，它们的名称如图中的Layer7、Layer10、Layer5，每个对象在上面的图中对应一行；
     当对象很多的时候需要垂直滚动条；
2、需要包含图中的时间轴，当前时间是图中黄线所示的位置，这个黄线需要跟随鼠标点击的位置改变，在播放动画的时候需要从左到右按时间自动移动；
3、每一个对象在右面区域的对应行都有一系列关键帧（具体显示就是图中的小白点，小白点和时间轴上某个位置对应，表示其在动画中的位置），这些小白点支持添加、拖动、右键事件（删除、复制等等），对于选定的小白点需要用特殊颜色标记出来，表示他被选中；
4、由于时间轴可能很长，所以不可能在当前屏幕完全显示，需要用图中的水平滚动条来滚动显示；
5、对时间轴支持缩放，比如现在的时间轴最小单位是1帧一个格子，缩小之后可能就是5帧一个格子，相应的下面每一行的帧也需要跟着时间轴的缩放来做缩放

想问一下实现这样的效果需要怎么做？
通过现成的空间组合可以实现吗？
画图的话是用Painter好还是用图显示图框架好？

希望大家能给点详细的设计思路，刚学QT一个月，对于设计这么复杂的UI没有任何思路。

特别感谢！

cainiaoqter

通过两三周的努力，终于做出了想要的结果，非常感谢QQ群中“傲天雪”同学的帮助，感谢他推荐yafei老师的入门教程，通过看入门教程，有了基本的设计思路，下面两幅图是我的实现效果；我上面想要的效果基本都实现了，下面我简单说一下我的思路；

1、左边的list用ViewList实现，然后将其作为一个widget放入scrollarea1；
2、右边上半部分的刻度是一部分，下面的绘点区域是一部分；
     刻度部分和绘点部分的原理相同，都是自己定义一个widget类，然后在其中定义一个pixmap，然后在pixmap中绘图，最后将pixmap绘制到widget中，最后将这个widget放入scrollarea中；
     记刻度部分的scrollarea为scrollarea2，绘点部分的为scrollarea3；
3、将右面分成两部分的原因就是，为了在拉动垂直滚动条的时候能够保证刻度一直显示在外面，就像下面第二幅图一样；
4、整个程序中有两个地方需要联动，一个是scrollarea1和scrollarea3的垂直滚动条，保证期同步，这样list中的元素就可以和右边的帧序列保持对应关系，并且能够垂直滚动；
    另一个滚动式scrollarea2和scrollarea3的水平滚动，这样就可以水平查看完整的帧序列，而且刻度还可以跟随着移动；
5、关于上面的联动，实现方法是给其中的滚动条添加响应槽函数，在其值改变的时候，设置和其关联的滚动条也处于相同的值：
     connect(manageScrollArea->verticalScrollBar(), SIGNAL(valueChanged(int)), this, SLOT(manageScrollAreaVerticalScrollBarValueChanged(int)));
6、在画图方面，我使用了双缓冲技术，其实在程序中用了更多的画布，目的就是讲我的绘图元素分层，也使得绘制更流畅，具体大家可以参考双缓冲的实现方式。
7、关于拖动其中的小圆点这个功能还没有做，但是感觉不难做，在鼠标响应事件函数中写逻辑即可；
8、关于播放动画功能，我的实现方式是，当黄线位于当前视窗中的时候直接绘制界面即可，当黄线超出当前视窗时，需要移动滚动条使得黄线显示在当前视窗中，具体的值需要计算，都是通过坐标来计算的，也很简单。

cainiaoqter

自己顶一帖，请帮忙~~~~~~~~~~~~~~~~~~~~

cainiaoqter

自己顶一帖，请帮忙~~~~~~~~~~~~~~~~~~~~

yafeilinux

你是要做Flash软件吗？

如果是公司项目，不是不能做！但是要是自己学习，还是做别的吧！

可以使用图形视图框架来做，而且必须使用，但是很复杂啊！

cainiaoqter

yafeilinux 发表于 2014-8-4 22:43
你是要做Flash软件吗？

如果是公司项目，不是不能做！但是要是自己学习，还是做别的吧！

     你好，我这是自己学习，基本是类似flash的编辑器，我目前采用画图的方式来做，效果如图1、图2、图3所示；
     目前我需要的元素基本都能绘制出来，效果应该也能实现，目前遇到的问题是：
     1、当我滑动垂直滚动条的时候，会导致时间轴隐藏，我怎样才能让时间轴刻度信息一直保持可见？
          注：滚动区域我使用的是QScrollArea控件，里面放置了一个widget；
     2、如图1所示，我的窗口只能展示0到70多帧，我怎么通过代码让第80帧显示在当前窗口，也就是怎样用代码将制定坐标对应的位置出现在窗口中？

      希望老师能指点一下，谢谢。

图1：

图2：

图3：

yafeilinux

cainiaoqter 发表于 2014-8-5 17:24
你好，我这是自己学习，基本是类似flash的编辑器，我目前采用画图的方式来做，效果如图1、图2、图3 ...

这个如果用绘图来做，思路是不对的。因为绘图会受到界面刷新的影响，而且复杂、且需要交互的界面，不适合自己绘图实现。

建议参考下图形视图框架，你后面不是还要做下面的画板区域码，怎么让画板和一个图层或者说一个帧关联上？如果通过自己绘图来控制，基本上是不可能完成的。

cainiaoqter

yafeilinux 发表于 2014-8-6 08:17
这个如果用绘图来做，思路是不对的。因为绘图会受到界面刷新的影响，而且复杂、且需要交互的界面，不适合 ...

老师好，我说的可不能不清楚，其他部分，包括渲染窗口都有现成的引擎来做，也就是画板区域不用我来做，我需要实现的就是上面的时间轴控制面板，交互逻辑也比较简单，目前遇到的困难就是上面那两个问题，要是能解决就好办了

yafeilinux

cainiaoqter 发表于 2014-8-6 09:31
老师好，我说的可不能不清楚，其他部分，包括渲染窗口都有现成的引擎来做，也就是画板区域不用我来做，我 ...

第一个问题，可以将刻度和下面分开成两部分来做，Flash软件就是这样实现的。其实，这种复杂的界面不是通过绘制来实现的，需要通过自定义类，一部分一部分来做。


第二个问题，跟第一个问题一样，需要重新整理思路。其实即便是像你那样直接绘制，后面的内容应该可以看到的啊。

cainiaoqter

yafeilinux 发表于 2014-8-8 19:54
第一个问题，可以将刻度和下面分开成两部分来做，Flash软件就是这样实现的。其实，这种复杂的界面不是 ...

明白了，我基本实现了上面的功能，后续我会把截图送上，再做简单的分享
谢谢老师

yafeilinux

cainiaoqter 发表于 2014-8-11 19:43
通过两三周的努力，终于做出了想要的结果，非常感谢QQ群中“傲天雪”同学的帮助，感谢他推荐yafei老师的入 ...

挺有毅力的，这算是一个复杂的界面了，对应初学者能做成这样相当不错了。

但是如果可以使用图形视图框架来做，也许效果会更好。

cainiaoqter

yafeilinux 发表于 2014-8-13 23:27
挺有毅力的，这算是一个复杂的界面了，对应初学者能做成这样相当不错了。

但是如果可以使用图形视图框 ...

主要是时间紧，没有多余的时间来学习图形视图框架，因此就这样来做来