[go: up one dir, main page]

CN113391740A - 一种悬浮式列表的焦点弧形效果展现方法 - Google Patents

一种悬浮式列表的焦点弧形效果展现方法 Download PDF

Info

Publication number
CN113391740A
CN113391740A CN202110617640.7A CN202110617640A CN113391740A CN 113391740 A CN113391740 A CN 113391740A CN 202110617640 A CN202110617640 A CN 202110617640A CN 113391740 A CN113391740 A CN 113391740A
Authority
CN
China
Prior art keywords
list
focus
arc
circle
suspension
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
Application number
CN202110617640.7A
Other languages
English (en)
Inventor
吴进庆
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Huizhou Desay SV Automotive Co Ltd
Original Assignee
Huizhou Desay SV Automotive Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Huizhou Desay SV Automotive Co Ltd filed Critical Huizhou Desay SV Automotive Co Ltd
Priority to CN202110617640.7A priority Critical patent/CN113391740A/zh
Publication of CN113391740A publication Critical patent/CN113391740A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G06T15/10—Geometric effects
    • G06T15/20—Perspective computation
    • G06T15/205—Image-based rendering

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • Computing Systems (AREA)
  • Geometry (AREA)
  • Computer Graphics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明涉及悬浮式列表展现技术领域，尤其涉及一种悬浮式列表的焦点弧形效果展现方法，包括以下步骤：通过OpenGL shader声明悬浮式列表的基础参数类型；将设计好的列表内容传入OpenGL渲染器；在OpenGL shader中通过对应方法控制所述基础参数类型，令悬浮式列表呈现出焦点弧形效果。本发明的发明目的在于提供一种悬浮式列表的焦点弧形效果展现方法，采用本发明提供的技术方案解决了目前弧形列表焦点实现方法无法达到悬浮于其他功能界面之上的技术问题。

Description

一种悬浮式列表的焦点弧形效果展现方法
技术领域
本发明涉及悬浮式列表展现技术领域，尤其涉及一种悬浮式列表的焦点弧形效果展现方法。
技术背景
在汽车娱乐系统或者人机交互界面中，出现一种悬浮式的列表菜单，并通过commander旋钮装置进行操作选择列表选项，同时列表上有当前操作的焦点指示，并且为弧形状态效果，同时悬浮在其他功能界面的上方。
其上述的悬浮式列表的焦点弧形效果，在传统的实现方法中，往往是通过图片的上下层关系进行遮挡，达到弧形列表焦点的效果，但是其实现方式不能达到悬浮在其他功能界面之上。
因此以上描述的悬浮式列表的焦点弧形效果的实现需要新型的实现技术。
发明内容
本发明的发明目的在于提供一种悬浮式列表的焦点弧形效果展现方法，采用本发明提供的技术方案解决了目前弧形列表焦点实现方法无法达到悬浮于其他功能界面之上的技术问题。
为了解决上述技术问题，本发明提供一种悬浮式列表的焦点弧形效果展现方法，包括以下步骤：
S100、通过OpenGL shader声明悬浮式列表的基础参数类型；
S200、将设计好的列表内容传入OpenGL渲染器；
S300、在OpenGL shader中通过对应方法控制所述基础参数类型，令悬浮式列表呈现出焦点弧形效果。
优选的，在步骤S100中，所述悬浮式列表的基础参数类型包括：R圆弧缩放比例系数、圆半径、圆心的X坐标、透明度过渡系数、列表的纹理和uv纹理坐标。
优选的，在步骤S200中，将设计好的列表内容传入OpenGL渲染器，传入列表的纹理和uv纹理坐标。
优选的，在步骤S300中，在OpenGL shader中通过对应方法控制所述基础参数类型，令悬浮式列表呈现出焦点弧形效果；所述对应方法包括：
通过圆弧缩放比例系数，控制圆的y轴方向的圆的大小；
圆半径和透明度过渡系数，通过平滑过渡方法对所述圆弧缩放比例系数作用的圆内的像素点进行保留，圆外的像素点进行乘积归零，圆边沿进行平滑过渡；
通过平滑过渡方法将每一个像素点进行处理，达到悬浮式列表的焦点弧形目标效果。
由上可知，应用本发明提供的技术方案，具备以下有益效果：在汽车娱乐系统或者人机交互界面中，通过传入的RatioWH(圆弧缩放比例系数)、CircleR(圆的半径)、CircleCenterX(圆心的X坐标)、BlurOffset(透明度过渡系数)等系数，灵活的控制悬浮式列表的焦点弧形的弧度和抗锯齿效果，达到该弧形列表悬浮在其他界面的功能显示效果。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对本发明实施例或现有技术的描述中所需要使用的附图作简单地介绍。显而易见地，下面描述中的附图仅仅是本发明的一部分实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为悬浮式列表的焦点弧形状态一示意图；
图2为悬浮式列表的焦点弧形状态二示意图；
图3为悬浮式列表的焦点弧形状态三示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
在车载悬浮式列表的焦点弧形效果中，传统的实现方法往往是通过图片的上下层关系进行遮挡，即通过多层图片，将列表边缘遮挡后，令其边缘达到弧形列表焦点的效果，但是其实现方式不能达到悬浮在其他功能界面之上。
为了解决上述技术问题，本实施例提供一种悬浮式列表的焦点弧形效果展现方法，使得悬浮式列表，即能实现焦点弧形效果，又能满足悬浮在其他界面之上的设计效果。
本实施例提供的展现方法，通过以下步骤实现：
S100、通过OpenGL shader声明悬浮式列表的基础参数类型。
在人机交互界面设计中，通过opengl shader编程方法对悬浮式列表的焦点弧形目标效果进行发明设计。
焦点弧形目标效果，具体可拆解为若干个元素构成，为此在本实施例中，可通过对焦点弧形目标效果拆解出来的元素进行声明。
具体包括以下基础参数类型：RatioWH(圆弧缩放比例系数)、CircleR(圆的半径)、CircleCenterX(圆心的X坐标)、BlurOffset(透明度过渡系数)、Texture0(列表的纹理)和vTexCoord(uv纹理坐标)。
S200、将设计好的列表内容传入OpenGL渲染器。
在界面设计过程中，将设计好的列表内容传入Opengl渲染器，传入内容Texture0(整个列表的纹理)和vTexCoord(uv纹理坐标)。其中列表内容可根据实际应用界面进行适用性设计，在本申请中不做赘述。
S300、在OpenGL shader中通过对应方法控制基础参数类型，令悬浮式列表呈现出焦点弧形效果。
在该步骤中，根据列表内容，在OpenGL shader中通过对应方法控制基础参数类型，令悬浮式列表呈现出焦点弧形效果。
具体对应方法包括：
在opengl shader编程中，通过RatioWH圆弧缩放比例系数，控制圆的y轴方向的圆的大小，以灵活达到不同的弧度。
在opengl shader编程中，CircleR(圆的半径)和BlurOffset(透明度过渡系数)通过smoothstep平滑过渡方法对RatioWH缩放系数作用的圆内的像素点进行保留，圆外的像素点进行乘积归零，圆边沿进行平滑过渡，达到列表圆弧效果和抗锯齿效果。
在opengl着色器渲染中，通过smoothstep平滑过渡方法将每一个像素点进行处理，达到悬浮式列表的焦点弧形目标效果。
请参见图1-3，通过上述方法，对步骤S100中声明的6个变量完成控制，最终即可令悬浮式列表呈现出焦点弧形效果。
为此，通过本申请提供的技术方案，在汽车娱乐系统或者人机交互界面中，通过传入的RatioWH(圆弧缩放比例系数)、CircleR(圆的半径)、CircleCenterX(圆心的X坐标)、BlurOffset(透明度过渡系数)等系数，灵活的控制悬浮式列表的焦点弧形的弧度和抗锯齿效果，达到该弧形列表悬浮在其他界面的功能显示效果。
以上所述的实施方式，并不构成对该技术方案保护范围的限定。任何在上述实施方式的精神和原则之内所作的修改、等同替换和改进等，均应包含在该技术方案的保护范围之内。

Claims (4)

1.一种悬浮式列表的焦点弧形效果展现方法，其特征在于，包括以下步骤：
S100、通过OpenGL shader声明悬浮式列表的基础参数类型；
S200、将设计好的列表内容传入OpenGL渲染器；
S300、在OpenGL shader中通过对应方法控制所述基础参数类型，令悬浮式列表呈现出焦点弧形效果。
2.根据权利要求1所述的焦点弧形效果展现方法，其特征在于：在步骤S100中，所述悬浮式列表的基础参数类型包括：R圆弧缩放比例系数、圆半径、圆心的X坐标、透明度过渡系数、列表的纹理和uv纹理坐标。
3.根据权利要求2所述的焦点弧形效果展现方法，其特征在于：在步骤S200中，将设计好的列表内容传入OpenGL渲染器，传入列表的纹理和uv纹理坐标。
4.根据权利要求3所述的焦点弧形效果展现方法，其特征在于：在步骤S300中，在OpenGL shader中通过对应方法控制所述基础参数类型，令悬浮式列表呈现出焦点弧形效果；所述对应方法包括：
通过圆弧缩放比例系数，控制圆的y轴方向的圆的大小；
圆半径和透明度过渡系数，通过平滑过渡方法对所述圆弧缩放比例系数作用的圆内的像素点进行保留，圆外的像素点进行乘积归零，圆边沿进行平滑过渡；
通过平滑过渡方法将每一个像素点进行处理，达到悬浮式列表的焦点弧形目标效果。
CN202110617640.7A 2021-06-03 2021-06-03 一种悬浮式列表的焦点弧形效果展现方法 Pending CN113391740A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110617640.7A CN113391740A (zh) 2021-06-03 2021-06-03 一种悬浮式列表的焦点弧形效果展现方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110617640.7A CN113391740A (zh) 2021-06-03 2021-06-03 一种悬浮式列表的焦点弧形效果展现方法

Publications (1)

Publication Number Publication Date
CN113391740A true CN113391740A (zh) 2021-09-14

Family

ID=77619818

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110617640.7A Pending CN113391740A (zh) 2021-06-03 2021-06-03 一种悬浮式列表的焦点弧形效果展现方法

Country Status (1)

Country Link
CN (1) CN113391740A (zh)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130097539A1 (en) * 2011-10-18 2013-04-18 Research In Motion Limited Method of modifying rendered attributes of list elements in a user interface
CN105630501A (zh) * 2015-12-25 2016-06-01 深圳市航盛电子股份有限公司 一种基于QML+OpenGL的车载图形界面系统
CN105701037A (zh) * 2015-12-30 2016-06-22 惠州市德赛西威汽车电子股份有限公司 车载娱乐系统中weston与DRM同时访问显示控制器的系统及方法
CN109358852A (zh) * 2018-08-31 2019-02-19 惠州市德赛西威汽车电子股份有限公司 一种使用shader实现车载GUI换肤的方法
CN109388309A (zh) * 2018-09-27 2019-02-26 Oppo广东移动通信有限公司 菜单的显示方法、装置、终端及存储介质
CN110515512A (zh) * 2019-08-23 2019-11-29 同辉佳视（北京）信息技术股份有限公司 一种会议平板交互方法、交互装置和会议平板

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130097539A1 (en) * 2011-10-18 2013-04-18 Research In Motion Limited Method of modifying rendered attributes of list elements in a user interface
CN105630501A (zh) * 2015-12-25 2016-06-01 深圳市航盛电子股份有限公司 一种基于QML+OpenGL的车载图形界面系统
CN105701037A (zh) * 2015-12-30 2016-06-22 惠州市德赛西威汽车电子股份有限公司 车载娱乐系统中weston与DRM同时访问显示控制器的系统及方法
CN109358852A (zh) * 2018-08-31 2019-02-19 惠州市德赛西威汽车电子股份有限公司 一种使用shader实现车载GUI换肤的方法
CN109388309A (zh) * 2018-09-27 2019-02-26 Oppo广东移动通信有限公司 菜单的显示方法、装置、终端及存储介质
CN110515512A (zh) * 2019-08-23 2019-11-29 同辉佳视（北京）信息技术股份有限公司 一种会议平板交互方法、交互装置和会议平板

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
AUGUSDI: "OpenGL: OpenGL中的平面圆绘制与贴图", 《HTTPS://BLOG.CSDN.NET/AUGUSDI/ARTICLE/DETAILS/38045789》 *

Similar Documents

Publication Publication Date Title
KR101922482B1 (ko) 다수의 렌더 타겟들 내에서 활성 컬러 샘플 카운트를 변경함으로써 스크린 위치에 의한 변화하는 유효 분해능
JP6947352B2 (ja) グラフィックス処理システム、グラフィックスプロセッサ及び該システム又はプロセッサを動作させる方法
EP2793127B1 (en) Method for displaying a 3D scene graph on a screen
JP6392370B2 (ja) 様々なレンダリング及びラスタライゼーション・パラメータ下でビューポートを変化させるための、オブジェクトの効率的再レンダリング方法
US7170510B2 (en) Method and apparatus for indicating a usage context of a computational resource through visual effects
US6931601B2 (en) Noisy operating system user interface
CA2865731C (en) Method for indicating annotations associated with a particular display view of a three-dimensional model independent of any display view
CN101911125B (zh) 图形处理系统中对离屏表面的多重缓冲支持
US20130127858A1 (en) Interception of Graphics API Calls for Optimization of Rendering
JPH11505644A (ja) 画像生成及び操作用装置
EP1212745A1 (en) Control of depth movement for visual display with layered screens
CN107154063A (zh) 图像展示区域的形状设置方法及装置
EP2997547B1 (en) Primitive-based composition
EP2929512A1 (en) Method for forming an optimized polygon based shell mesh
CN115393505A (zh) 渲染方法、引擎、电子设备及存储介质
CN108140233A (zh) 具有像素块级别粒度的图形处理单元抢占
GB2574661A (en) Multipage display on a computing device
CN108010120A (zh) 静态阴影的显示方法、装置、存储介质、处理器及终端
CN113391740A (zh) 一种悬浮式列表的焦点弧形效果展现方法
US11302054B2 (en) Varying effective resolution by screen location by changing active color sample count within multiple render targets
US5265198A (en) Method and processor for drawing `polygon with edge`-type primitives in a computer graphics display system
CN109189537A (zh) 页面信息的动态显示方法、计算设备及计算机存储介质
CN116670719A (zh) 一种图形处理方法、装置及电子设备
US11127188B1 (en) Suspending and resuming operations in graphics processing systems
CN113450435B (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
RJ01 Rejection of invention patent application after publication

Application publication date: 20210914