红孩儿编辑器的模块设计(1)主显示区域的滚动条的逻辑处理

红孩儿编辑器的模块设计(1)主显示区域的滚动条的逻辑处理

第一个问题是判断滚动条是否需要显示的问题,
第二个问题是如何渲染滚动条的问题
第三个问题是通知渲染滚动条,或者是取消滚动条的显示的时机问题
第四个问题是滚动条如何响应鼠标的操作的问题

第一个问题
逻辑规则如下
如果当文件的行数超过了一屏幕能够显示的最大的行数时,
需要在显示区域的右侧显示出纵向的滚动条。
如果文件的总行数改变成小于等于一屏幕能够显示的最大的行数时
需要在显示区域的右侧取消滚动条的显示。

如果当前位于屏幕上的第一页时,仅需要显示向下的箭头,
如果当前位于屏幕上的不是第一页也不是最后一页时,需要显示向上和向下的箭头
如果当前位于屏幕上的最后一页时,仅需要显示向上的箭头。

在自动换行的设置下,不需要显示横向的滚动条。
在设置不是自动换行的情况下,
如果当前的显示的页内某行或者是某些行的字数超过了一页可以显示的最大的字数,
需要在显示区域的底侧显示出横向的滚动条。
如果当前的显示的页内的所有的行的字数都变成小于等于一页可以显示的最大的字数时,
需要取消显示区域的底侧显示出的横向的滚动条。

第二个问题
需要在主显示区分划出显示滚动条的位置。调用设计好的滚动条与四个方向的箭头的
点阵的图标,进行渲染显示。

第三个问题
是在刷新编辑器的主显示时,根据是否需要显示滚动条的标记,来进行相反的渲染显示。

如果文件的第一列字显示在屏幕中时,仅需要显示向右的箭头。
如果文件的第一列字不在屏幕内,最长的行的最末尾的字没有显示在屏幕内时,
需要显示向左和向右的箭头。
如果文件的第一列字不在屏幕内,最长的行的最末尾的字显示在屏幕内时,
仅需要显示向左的箭头。

第四个问题,
根据鼠标在html5的画布中的点击事件中的响应函数中进行设计。
需要得到的参数有事件类型,是左键单击,左键双击,右键点击。
还有横纵坐标值,根据坐标值,判断点击了哪个位置,即点击了哪个组件。
再调用相应的处理函数。

小结:
有人说,界面开发很容易,那是因为他把事件想得太简单了,也许是因为框架之类的底层库
做了太多的事,只把拖控件的傻瓜式的任务放出来了而矣。这是scratch软件这样的,给孩子
们的入门的玩具而矣。为了大型的系统的开发,我们应该有能力从底层出发,把相关的问题
都自己想清楚,只有把逻辑搞清楚了,写代码才是轻松的,否则无论使用哪种计算机软件编程语言
都开发不了大规模的程序。

猜你喜欢

转载自blog.csdn.net/gggwfn1982/article/details/83903731