CN107256164A - 一种Mac下自定义形状进度条的优化处理算法 - Google Patents
一种Mac下自定义形状进度条的优化处理算法 Download PDFInfo
- Publication number
- CN107256164A CN107256164A CN201710639389.8A CN201710639389A CN107256164A CN 107256164 A CN107256164 A CN 107256164A CN 201710639389 A CN201710639389 A CN 201710639389A CN 107256164 A CN107256164 A CN 107256164A
- Authority
- CN
- China
- Prior art keywords
- self
- defined shape
- progress bar
- task
- layer
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- Processing Or Creating Images (AREA)
Abstract
本发明涉及一种Mac下自定义形状进度条的优化处理算法，包括如下步骤：步骤1，初始化设定：设定一画面类NSView；设定一个基于CAShapeLayer的底层图层；设定一个基于CAShapeLayer的覆盖图层；步骤2，在底层图层上，根据用户选择的自定义形状，绘制背景图像，步骤3，在覆盖图层上，根据用户选择的自定义形状，绘制进度条图像，步骤4，获取需要展现的任务的时长信息，将时长按秒计算分配到对应于进度条图像周长的具体长度数值，根据具体长度数值，结合当前已进行的任务的时长信息，绘制步骤3所设定的自定义形状。本发明，基于CAShapeLayer以及NSBezierPath重新构造进度条形状，使进度条呈现自定义形状，个性化效果强，可叠加任意想要的效果。
Description
技术领域
本发明涉及图像（图形）显示技术领域，具体说是一种Mac下自定义形状进度条的优化处理算法。所述Mac指苹果电脑（曾被译为麦金塔电脑，即Macintosh的音译），运行OS X系统（苹果公司为麦金塔电脑开发的专属操作系统）。
背景技术
现有的OS X系统中，提供了现成的进度条控件，但是系统提供的进度条控件只能绘制条状进度条（直线状进度条），而且不支持背景改变颜色。
条状进度条（直线状进度条）早已是司空见惯的进度条式样，容易给用户造成视觉疲劳，不符合个性化需求，不能让用户产生眼前一亮的感觉，因此不能满足市场竞争需要的个性化突破。
发明内容
针对现有技术中存在的缺陷，本发明的目的在于提供一种Mac下自定义形状进度条的优化处理算法，基于CAShapeLayer以及NSBezierPath重新构造进度条形状，使进度条呈现自定义形状，个性化效果强，可叠加任意想要的效果。
为达到以上目的，本发明采取的技术方案是：
一种Mac下自定义形状进度条的优化处理算法，其特征在于，包括如下步骤：
步骤1，初始化设定，具体包括：
设定一画面类NSView，用于放置底层图层和覆盖图层；
设定一个基于CAShapeLayer的底层图层，用于显示自定义形状的背景图像；
设定一个基于CAShapeLayer的覆盖图层，用于显示与自定义形状的背景图像形状相同的进度条图像；
步骤2，在底层图层上，根据用户选择的自定义形状，绘制背景图像，背景图像用于为进度条图像增加视觉效果，
步骤3，在覆盖图层上，根据用户选择的自定义形状，绘制进度条图像，进度条图像，对应着从0%到100%的完整的进度条形状，
步骤4，获取需要展现的任务的时长信息，将时长按秒计算分配到对应于进度条图像周长的具体长度数值，根据具体长度数值，结合当前已进行的任务的时长信息，在覆盖图层上绘制步骤3所设定的自定义形状，对应着从0%到当前已进行的任务的时长的进度条形状。
在上述技术方案的基础上，步骤2具体包括：
根据用户选择的自定义形状，绘制一个该自定义形状作为背景图像，
设定自定义形状的宽度数值，单位为像素，
设定自定义形状的背景颜色，
设定自定义形状的颜色，即绘制该自定义形状的笔画的颜色。
在上述技术方案的基础上，自定义形状调用NSBezierPath绘制得到。
在上述技术方案的基础上，步骤3具体包括：
根据步骤2中用户选择的自定义形状，绘制一个该自定义形状作为进度条图像，其位置位于步骤2所述背景图像的正上方以遮盖住背景图像，
设定自定义形状的宽度数值，单位为像素，
设定自定义形状的背景颜色，
设定自定义形状的颜色，即绘制该自定义形状的笔画的颜色；
设定笔画的开始位置为自定义形状所在y轴的最高点，结束位置和开始位置一样。
在上述技术方案的基础上，还包括以下步骤：
捕获鼠标操作，当鼠标拖动当前已进行的任务的时长时，获取鼠标最终停止时对应的当前已进行的任务的时长信息，
根据具体长度数值，结合鼠标最终停止时对应的当前已进行的任务的时长信息，在覆盖图层上绘制步骤3所设定的自定义形状。
在上述技术方案的基础上，还包括以下步骤：捕获鼠标操作，当鼠标点击进度条某处时，获取鼠标最终点击处对应的当前已进行的任务的时长信息，
根据具体长度数值，结合鼠标最终点击处对应的当前已进行的任务的时长信息，在覆盖图层上绘制步骤3所设定的自定义形状。
在上述技术方案的基础上，步骤2和3中，自定义形状包括但不限于：圆环图案，多边形图案，所述多边形图案的边数大于等于6。
本发明所述的Mac下自定义形状进度条的优化处理算法，基于CAShapeLayer以及NSBezierPath重新构造进度条形状，使进度条呈现自定义形状，个性化效果强，可叠加任意想要的效果。
附图说明
本发明有如下附图：
图1本发明的流程框图。
具体实施方式
以下结合附图对本发明作进一步详细说明。
如图1所示，本发明所述的Mac下自定义形状进度条的优化处理算法，包括如下步骤：
步骤1，初始化设定，具体包括：
设定一画面类NSView，用于放置底层图层和覆盖图层；
设定一个基于CAShapeLayer的底层图层，用于显示自定义形状的背景图像；
设定一个基于CAShapeLayer的覆盖图层，用于显示与自定义形状的背景图像形状相同的进度条图像；
步骤2，在底层图层上，绘制背景图像，具体包括：
根据用户选择的自定义形状，绘制一个该自定义形状作为背景图像，
设定自定义形状的宽度数值，单位为像素，例如宽度为3，
设定自定义形状的背景颜色，例如背景颜色为透明，
设定自定义形状的颜色，即绘制该自定义形状的笔画的颜色；
以自定义形状为圆环为例，具体绘制方式为：
在底层图层上，调用NSBezierPath画曲线，根据所画曲线的位置，再涂上颜色，可以画出圆环状的自定义形状；
NSBezierPath是用来绘制基本或复杂形状的函数，可绘制的形状包括但不限于圆环，具体绘制方式可按现有技术实施；
背景图像可以为进度条图像增加视觉效果，例如：增加进度条图像的立体效果，或增加进度条图像的阴影效果，或增加进度条图像的光晕效果，等等；
背景图像的大小，根据实际需要，可以大于、等于或小于进度条图像的大小；
背景图像的数量可以多于一个，但至少有一个，多于一个时，各背景图像的形状相同或不同，大小不同；
背景图像除了绘制的方式添加外，还可以直接调用本地或网络或数据库中的已有图片，将图片添加到底层图层中，作为背景图像使用；
步骤3，在覆盖图层上，绘制进度条图像，具体包括：
根据步骤2中用户选择的自定义形状，绘制一个该自定义形状作为进度条图像，其位置位于步骤2所述背景图像的正上方以遮盖住背景图像，
可以遮盖住背景图像的全部或局部，所述局部可以是背景图像的边缘，或背景图像的中间，或背景图像的上部，或背景图像的左部，
设定自定义形状的宽度数值，单位为像素，例如宽度为3，宽度同背景图像的宽度为宜，
设定自定义形状的背景颜色，例如背景颜色为透明，
设定自定义形状的颜色，即绘制该自定义形状的笔画的颜色；
设定笔画的开始位置为自定义形状所在y轴的最高点，结束位置和开始位置一样；
进度条图像，对应着从0%到100%的完整的进度条形状；
步骤4，获取需要展现的任务的时长信息，例如：获取要播放的歌曲的时长，
将时长按秒计算分配到对应于进度条图像周长（以圆环为例即是指360度圆弧的长度）的具体长度数值，即：计算出，每一秒应显示多少长度的直线或弧线才能使得任务时长结束时恰好能绘制出一个完整的自定义形状，
根据具体长度数值，结合当前已进行的任务的时长信息，在覆盖图层上绘制步骤3所设定的自定义形状，
步骤4的绘制将采用设定自定义形状的颜色，对应着从0%到当前已进行的任务的时长（当前已完成的进度）的进度条形状。
在上述技术方案的基础上，还包括以下步骤：
捕获鼠标操作，当鼠标拖动当前已进行的任务的时长时，获取鼠标最终停止时对应的当前已进行的任务的时长信息，
根据具体长度数值，结合鼠标最终停止时对应的当前已进行的任务的时长信息，在覆盖图层上绘制步骤3所设定的自定义形状。
在上述技术方案的基础上，所述鼠标拖动是指：鼠标左键点击当前已进行的任务的时长，且不释放鼠标左键时，鼠标任意方向的移动都带动当前已进行的任务的时长增加或减小。
在上述技术方案的基础上，还包括以下步骤：捕获鼠标操作，当鼠标点击进度条某处时，获取鼠标最终点击处对应的当前已进行的任务的时长信息，
根据具体长度数值，结合鼠标最终点击处对应的当前已进行的任务的时长信息，在覆盖图层上绘制步骤3所设定的自定义形状。
在上述技术方案的基础上，步骤2和3中，自定义形状的宽度为默认值，或为自定义值，单位为像素，宽度包括但不限于3。
在上述技术方案的基础上，进度条图像对应的自定义形状，自定义形状的颜色默认为亮色，所述亮色包括但不限于：黄色，橙色。
在上述技术方案的基础上，步骤2和3中，自定义形状包括但不限于：圆环图案，多边形图案，所述多边形图案的边数大于等于6。
本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。
Claims (7)
1.一种Mac下自定义形状进度条的优化处理算法，其特征在于，包括如下步骤：
步骤1，初始化设定，具体包括：
设定一画面类NSView，用于放置底层图层和覆盖图层；
设定一个基于CAShapeLayer的底层图层，用于显示自定义形状的背景图像；
设定一个基于CAShapeLayer的覆盖图层，用于显示与自定义形状的背景图像形状相同的进度条图像；
步骤2，在底层图层上，根据用户选择的自定义形状，绘制背景图像，背景图像用于为进度条图像增加视觉效果，
步骤3，在覆盖图层上，根据用户选择的自定义形状，绘制进度条图像，进度条图像，对应着从0%到100%的完整的进度条形状，
步骤4，获取需要展现的任务的时长信息，将时长按秒计算分配到对应于进度条图像周长的具体长度数值，根据具体长度数值，结合当前已进行的任务的时长信息，在覆盖图层上绘制步骤3所设定的自定义形状，对应着从0%到当前已进行的任务的时长的进度条形状。
2.如权利要求1所述的Mac下自定义形状进度条的优化处理算法，其特征在于：步骤2具体包括：
根据用户选择的自定义形状，绘制一个该自定义形状作为背景图像，
设定自定义形状的宽度数值，单位为像素，
设定自定义形状的背景颜色，
设定自定义形状的颜色，即绘制该自定义形状的笔画的颜色。
3.如权利要求2所述的Mac下自定义形状进度条的优化处理算法，其特征在于：自定义形状调用NSBezierPath绘制得到。
4.如权利要求1所述的Mac下自定义形状进度条的优化处理算法，其特征在于：步骤3具体包括：
根据步骤2中用户选择的自定义形状，绘制一个该自定义形状作为进度条图像，其位置位于步骤2所述背景图像的正上方以遮盖住背景图像，
设定自定义形状的宽度数值，单位为像素，
设定自定义形状的背景颜色，
设定自定义形状的颜色，即绘制该自定义形状的笔画的颜色；
设定笔画的开始位置为自定义形状所在y轴的最高点，结束位置和开始位置一样。
5.如权利要求1所述的Mac下自定义形状进度条的优化处理算法，其特征在于：还包括以下步骤：
捕获鼠标操作，当鼠标拖动当前已进行的任务的时长时，获取鼠标最终停止时对应的当前已进行的任务的时长信息，
根据具体长度数值，结合鼠标最终停止时对应的当前已进行的任务的时长信息，在覆盖图层上绘制步骤3所设定的自定义形状。
6.如权利要求1所述的Mac下自定义形状进度条的优化处理算法，其特征在于：还包括以下步骤：捕获鼠标操作，当鼠标点击进度条某处时，获取鼠标最终点击处对应的当前已进行的任务的时长信息，
根据具体长度数值，结合鼠标最终点击处对应的当前已进行的任务的时长信息，在覆盖图层上绘制步骤3所设定的自定义形状。
7.如权利要求1所述的Mac下自定义形状进度条的优化处理算法，其特征在于：步骤2和3中，自定义形状包括但不限于：圆环图案，多边形图案，所述多边形图案的边数大于等于6。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710639389.8A CN107256164A (zh) | 2017-07-31 | 2017-07-31 | 一种Mac下自定义形状进度条的优化处理算法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710639389.8A CN107256164A (zh) | 2017-07-31 | 2017-07-31 | 一种Mac下自定义形状进度条的优化处理算法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107256164A true CN107256164A (zh) | 2017-10-17 |
Family
ID=60025357
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710639389.8A Pending CN107256164A (zh) | 2017-07-31 | 2017-07-31 | 一种Mac下自定义形状进度条的优化处理算法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107256164A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112435308A (zh) * | 2020-11-30 | 2021-03-02 | 成都新潮传媒集团有限公司 | 环形进度条的绘制方法、装置及存储介质 |
| CN113867857A (zh) * | 2021-09-06 | 2021-12-31 | 贵阳语玩科技有限公司 | 基于Android系统的进度条展示方法、装置及设备 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120159370A1 (en) * | 2010-12-15 | 2012-06-21 | Jochen Rode | System and method to visualize measuring and dosing operations |
| CN102799678A (zh) * | 2012-07-23 | 2012-11-28 | 深圳市同洲电子股份有限公司 | 定制浏览器进度条及定制浏览器错误页面的方法 |
| CN103118293A (zh) * | 2011-11-17 | 2013-05-22 | 深圳市快播科技有限公司 | 播放进度展示方法、装置以及点播终端和点播系统 |
| CN104063149A (zh) * | 2014-06-13 | 2014-09-24 | 深圳市东信时代信息技术有限公司 | 一种可调进度条系统与方法 |
| CN104811812A (zh) * | 2014-01-24 | 2015-07-29 | 腾讯科技（北京）有限公司 | 音视频播放进度的控制方法、装置、和系统 |
| CN106484432A (zh) * | 2016-11-01 | 2017-03-08 | 武汉斗鱼网络科技有限公司 | 一种进度条定制方法、装置及进度条 |
-
2017
- 2017-07-31 CN CN201710639389.8A patent/CN107256164A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120159370A1 (en) * | 2010-12-15 | 2012-06-21 | Jochen Rode | System and method to visualize measuring and dosing operations |
| CN103118293A (zh) * | 2011-11-17 | 2013-05-22 | 深圳市快播科技有限公司 | 播放进度展示方法、装置以及点播终端和点播系统 |
| CN102799678A (zh) * | 2012-07-23 | 2012-11-28 | 深圳市同洲电子股份有限公司 | 定制浏览器进度条及定制浏览器错误页面的方法 |
| CN104811812A (zh) * | 2014-01-24 | 2015-07-29 | 腾讯科技（北京）有限公司 | 音视频播放进度的控制方法、装置、和系统 |
| CN104063149A (zh) * | 2014-06-13 | 2014-09-24 | 深圳市东信时代信息技术有限公司 | 一种可调进度条系统与方法 |
| CN106484432A (zh) * | 2016-11-01 | 2017-03-08 | 武汉斗鱼网络科技有限公司 | 一种进度条定制方法、装置及进度条 |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112435308A (zh) * | 2020-11-30 | 2021-03-02 | 成都新潮传媒集团有限公司 | 环形进度条的绘制方法、装置及存储介质 |
| CN112435308B (zh) * | 2020-11-30 | 2023-11-14 | 成都新潮传媒集团有限公司 | 环形进度条的绘制方法、装置及存储介质 |
| CN113867857A (zh) * | 2021-09-06 | 2021-12-31 | 贵阳语玩科技有限公司 | 基于Android系统的进度条展示方法、装置及设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107180446B (zh) | 人物面部模型的表情动画生成方法及装置 | |
| CN107436766A (zh) | 一种Mac下自定义形状进度条的处理算法 | |
| US20180276797A1 (en) | Complex architecture for image processing | |
| US11064784B2 (en) | Printing method and system of a nail printing apparatus, and a medium thereof | |
| US10067646B2 (en) | Color selector for desktop publishing | |
| CN106502667B (zh) | 一种渲染方法及装置 | |
| US9865181B2 (en) | Use of style sets to assist a user in digitizing GIS layers | |
| CN109572239B (zh) | 一种美甲装置的打印方法、系统、美甲设备和介质 | |
| CN107045416A (zh) | 色温调节方法、装置以及显示设备 | |
| US11004247B2 (en) | Path-constrained drawing with visual properties based on drawing tool | |
| CN105787874B (zh) | 一种对截图进行马赛克处理的方法和装置 | |
| CN107256164A (zh) | 一种Mac下自定义形状进度条的优化处理算法 | |
| CN105808035A (zh) | 图标显示方法及装置 | |
| CN107123152B (zh) | 一种编辑处理方法及装置 | |
| KR102089473B1 (ko) | 안면 모델 편집 방법 및 장치 | |
| CN108241518A (zh) | 可视化的拖拽布局及智能模板生成方法和系统 | |
| CN109782975A (zh) | 一种美甲装置图片处理方法、系统、美甲设备和介质 | |
| US9158452B2 (en) | Early drawing system and method to improve touch screen response | |
| US20180165877A1 (en) | Method and apparatus for virtual reality animation | |
| CN109189537A (zh) | 页面信息的动态显示方法、计算设备及计算机存储介质 | |
| CN109815551A (zh) | 建筑设计方法、装置、可读存储介质及混合现实设备 | |
| US10311130B1 (en) | Dynamic page transitions in electronic content | |
| CN113678099B (zh) | 软件分析辅助系统及其计算机可读记录介质 | |
| CN108805955B (zh) | 一种区域边界自动应用波打线的方法及其装置 | |
| CN110473277A (zh) | 自定义虚拟角色的面部处理方法、系统和存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20171017 |
|
| RJ01 | Rejection of invention patent application after publication |