CN113486278A - 一种图片显示方法、智能终端及计算机可读存储介质 - Google Patents

一种图片显示方法、智能终端及计算机可读存储介质 Download PDF

Info

Publication number
CN113486278A
CN113486278A CN202110691747.6A CN202110691747A CN113486278A CN 113486278 A CN113486278 A CN 113486278A CN 202110691747 A CN202110691747 A CN 202110691747A CN 113486278 A CN113486278 A CN 113486278A
Authority
CN
China
Prior art keywords
picture
pictures
display method
picture display
transparent
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
CN202110691747.6A
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.)
Xi'an Zhenyou Communication Technology Co ltd
Original Assignee
Xi'an Zhenyou Communication Technology 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 Xi'an Zhenyou Communication Technology Co ltd filed Critical Xi'an Zhenyou Communication Technology Co ltd
Priority to CN202110691747.6A priority Critical patent/CN113486278A/zh
Publication of CN113486278A publication Critical patent/CN113486278A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformations in the plane of the image
    • G06T3/04—Context-preserving transformations, e.g. by using an importance map

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • General Engineering & Computer Science (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种图片显示方法、智能终端及计算机可读存储介质，所述方法包括：将引入的所有图片按顺序叠加在同一位置，将所有图片设置为透明；按照所有图片叠加的先后顺序，每相邻两张图片的一张图片从透明到显示，等待预设时间后，另一张图片从透明到显示，依次轮询交替播放，每两张图片交替显示。本发明使热力图在展示过程中，每张图片之间的过度都变得很平滑，使整个热力图的效果变得更加直观清晰。

Description

一种图片显示方法、智能终端及计算机可读存储介质
技术领域
本发明涉及图片显示技术领域，尤其涉及一种图片显示方法、智能终端及计算机可读存储介质。
背景技术
随着近几年大数据、数据分析技术的发展，可视化技术也在飞速发展。如何将数据直观、清晰、合理的呈现出来成了可视化中最重要的组成部分。而在数据可视化展现中，运用最多的是各种不同形式体现数据的图形元素和各种复杂的动画效果相互配合交互，从而将数据清晰的展现出来。所以，如何将数据合理的转换为图形元素并且流畅平滑的展示，是数据可视化展现的重中之重。
但是在实际开发中，很多效果因为浏览器的限制或者不支持，需要配合使用PNG格式的图片来进行效果的展现，例如热力图(热力图是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示，热力图可以显示不可点击区域发生的事情)中，一个完整的热力图需要使用很多PNG格式的图片循环切换来达到理想效果，但是图片在切换的过程中很难达到平滑的过度。
因此，现有技术还有待于改进和发展。
发明内容
本发明的主要目的在于提供一种图片显示方法、智能终端及计算机可读存储介质，旨在解决现有技术中图片在切换的过程中很难达到平滑的过度的问题。
为实现上述目的，本发明提供一种图片显示方法，所述图片显示方法包括如下步骤：
将引入的所有图片按顺序叠加在同一位置，将所有图片设置为透明；
按照所有图片叠加的先后顺序，每相邻两张图片的一张图片从透明到显示，等待预设时间后，另一张图片从透明到显示，依次轮询交替播放，每两张图片交替显示。
可选地，所述的图片显示方法，其中，所述图片为采用原生JS封装的热力图。
可选地，所述的图片显示方法，其中，所述预设时间为1-10秒。
可选地，所述的图片显示方法，其中，所述图片显示方法还包括：
引入热力图平滑展示方法，判断图片是否传入配置；
若是，则在页面中渲染效果，并循环播放；
若否，则使用默认配置数据，之后在页面中渲染效果，并循环播放。
可选地，所述的图片显示方法，其中，所述图片显示方法还包括：
支持在普通网页中使用CSS方式、在特殊情况下使用JS的方式来动态创建以及支持在地图中使用Canvas的方式配合mapbox来在页面上展现效果。
可选地，所述的图片显示方法，其中，所述图片显示方法还包括：
传入画布的宽高配置项，在动画创建的时，内容的图片全部自适应画布设置的大小。
此外，为实现上述目的，本发明还提供一种智能终端，其中，所述智能终端包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的图片显示程序，所述图片显示程序被所述处理器执行时实现如上所述的图片显示方法的步骤。
此外，为实现上述目的，本发明还提供一种计算机可读存储介质，其中，所述计算机可读存储介质存储有图片显示程序，所述图片显示程序被处理器执行时实现如上所述的图片显示方法的步骤。
本发明通过将引入的所有图片按顺序叠加在同一位置，将所有图片设置为透明；按照所有图片叠加的先后顺序，每相邻两张图片的一张图片从透明到显示，等待预设时间后，另一张图片从透明到显示，依次轮询交替播放，每两张图片交替显示。本发明使热力图在展示过程中，每张图片之间的过度都变得很平滑，使整个热力图的效果变得更加直观清晰。
附图说明
图1是本发明图片显示方法的较佳实施例的流程图；
图2是本发明图片显示方法的较佳实施例中图片效果展示图；
图3是本发明图片显示方法的较佳实施例中页面渲染并循环播放的流程图；
图4为本发明智能终端的较佳实施例的运行环境示意图。
具体实施方式
为使本发明的目的、技术方案及优点更加清楚、明确，以下参照附图并举实施例对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
本发明较佳实施例所述的图片显示方法，如图1所示，所述图片显示方法包括以下步骤：
步骤S10、将引入的所有图片按顺序叠加在同一位置，将所有图片设置为透明；
步骤S20、按照所有图片叠加的先后顺序，每相邻两张图片的一张图片从透明到显示，等待预设时间后，另一张图片从透明到显示，依次轮询交替播放，每两张图片交替显示。
其中，所述图片为采用原生JS封装(即JavaScript的封装，封装是面向对象的三个基本特征之一，将现实世界的事物抽象成计算机领域中的对象,对象同时具有属性和行为，这种抽象就是封装.)的热力图。所述预设时间为1-10秒。
具体地，本发明采用原生JS封装热力图的图片循环播放平滑过度的方法，实现的思路是首先将引入的所有图片按顺序叠加在同一位置，然后先将所有图片设置为透明，然后先将第一张图片从透明让它慢慢过度到出现，然后等待显示一秒后，将下一张图片从透明慢慢显示，同时将第一张图片慢慢从显示过度到透明，这样依次轮询交替播放，每两张图片交替显示，从而就达到了理想的效果，显示效果如图2所示。
进一步地，如图3所示，引入热力图平滑展示方法，判断图片是否传入配置；若是，则在页面中渲染效果，并循环播放；若否，则使用默认配置数据，之后在页面中渲染效果，并循环播放。
本发明提供CSS、JS、Canvas三种不同的方式来实现，可以满足不同情况下的各种需求，例如支持在普通网页中使用CSS方式、在某些特殊情况下使用JS的方式来动态创建以及支持在地图中使用Canvas的方式配合mapbox来在页面上展现效果。
本发明可以实现画布大小自定义，只需在调用方法的地方传入画布的宽高配置项，就可以在动画创建的时候，内容的图片全部自适应画布设置的大小，减少使用的复杂度，从而使开发者使用起来更简单便捷。
本发明可以实现过度时间自定义，使用者可以改变动画播放的时间来改变图片交替的间隔时长，从而来控制整体热力图的播放速度，由于两个图片的透明度交替变换，可以让图片直接切换变得很自然平滑。
本发明达到了使用的便捷性，本发明的方法是一个JS方法，使用者可以直接粘贴代码片段到使用的地方，调用方法来使用，或者可以直接将方法引入到需要使用的地方再调用方法来使用，初始化参数配置只有创建画布位置和创建画布大小两项，使用简单方便。
进一步地，如图4所示，基于上述图片显示方法，本发明还相应提供了一种智能终端，所述智能终端包括处理器10、存储器20及显示器30。图4仅示出了智能终端的部分组件，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。
所述存储器20在一些实施例中可以是所述智能终端的内部存储单元，例如智能终端的硬盘或内存。所述存储器20在另一些实施例中也可以是所述智能终端的外部存储设备，例如所述智能终端上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器20还可以既包括所述智能终端的内部存储单元也包括外部存储设备。所述存储器20用于存储安装于所述智能终端的应用软件及各类数据，例如所述安装智能终端的程序代码等。所述存储器20还可以用于暂时地存储已经输出或者将要输出的数据。在一实施例中，存储器20上存储有图片显示程序40，该图片显示程序40可被处理器10所执行，从而实现本申请中图片显示方法。
所述处理器10在一些实施例中可以是一中央处理器(Central Processing Unit,CPU)，微处理器或其他数据处理芯片，用于运行所述存储器20中存储的程序代码或处理数据，例如执行所述图片显示方法等。
所述显示器30在一些实施例中可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。所述显示器30用于显示在所述智能终端的信息以及用于显示可视化的用户界面。所述智能终端的部件10-30通过系统总线相互通信。
在一实施例中，当处理器10执行所述存储器20中图片显示程序40时实现以下步骤：
将引入的所有图片按顺序叠加在同一位置，将所有图片设置为透明；
按照所有图片叠加的先后顺序，每相邻两张图片的一张图片从透明到显示，等待预设时间后，另一张图片从透明到显示，依次轮询交替播放，每两张图片交替显示。
其中，所述图片为采用原生JS封装的热力图。
可选地，所述的图片显示方法，其中，所述预设时间为1-10秒。
其中，所述图片显示方法还包括：
引入热力图平滑展示方法，判断图片是否传入配置；
若是，则在页面中渲染效果，并循环播放；
若否，则使用默认配置数据，之后在页面中渲染效果，并循环播放。
其中，所述图片显示方法还包括：
支持在普通网页中使用CSS方式、在特殊情况下使用JS的方式来动态创建以及支持在地图中使用Canvas的方式配合mapbox来在页面上展现效果。
其中，所述图片显示方法还包括：
传入画布的宽高配置项，在动画创建的时，内容的图片全部自适应画布设置的大小。
本发明还提供一种计算机可读存储介质，其中，所述计算机可读存储介质存储有图片显示程序，所述图片显示程序被处理器执行时实现如上所述的图片显示方法的步骤。
综上所述，本发明提供一种图片显示方法、智能终端及计算机可读存储介质，所述方法包括：将引入的所有图片按顺序叠加在同一位置，将所有图片设置为透明；按照所有图片叠加的先后顺序，每相邻两张图片的一张图片从透明到显示，等待预设时间后，另一张图片从透明到显示，依次轮询交替播放，每两张图片交替显示。本发明使热力图在展示过程中，每张图片之间的过度都变得很平滑，使整个热力图的效果变得更加直观清晰。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
当然，本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关硬件(如处理器，控制器等)来完成，所述的程序可存储于一计算机可读取的计算机可读存储介质中，所述程序在执行时可包括如上述各方法实施例的流程。其中所述的计算机可读存储介质可为存储器、磁碟、光盘等。
应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。

Claims (8)

1.一种图片显示方法，其特征在于，所述图片显示方法包括：
将引入的所有图片按顺序叠加在同一位置，将所有图片设置为透明；
按照所有图片叠加的先后顺序，每相邻两张图片的一张图片从透明到显示，等待预设时间后，另一张图片从透明到显示，依次轮询交替播放，每两张图片交替显示。
2.根据权利要求1所述的图片显示方法，其特征在于，所述图片为采用原生JS封装的热力图。
3.根据权利要求1所述的图片显示方法，其特征在于，所述预设时间为1-10秒。
4.根据权利要求1所述的图片显示方法，其特征在于，所述图片显示方法还包括：
引入热力图平滑展示方法，判断图片是否传入配置；
若是，则在页面中渲染效果，并循环播放；
若否，则使用默认配置数据，之后在页面中渲染效果，并循环播放。
5.根据权利要求1所述的图片显示方法，其特征在于，所述图片显示方法还包括：
支持在普通网页中使用CSS方式、在特殊情况下使用JS的方式来动态创建以及支持在地图中使用Canvas的方式配合mapbox来在页面上展现效果。
6.根据权利要求1所述的图片显示方法，其特征在于，所述图片显示方法还包括：
传入画布的宽高配置项，在动画创建的时，内容的图片全部自适应画布设置的大小。
7.一种智能终端，其特征在于，所述智能终端包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的图片显示程序，所述图片显示程序被所述处理器执行时实现如权利要求1-6任一项所述的图片显示方法的步骤。
8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有图片显示程序，所述图片显示程序被处理器执行时实现如权利要求1-6任一项所述的图片显示方法的步骤。
CN202110691747.6A 2021-06-22 2021-06-22 一种图片显示方法、智能终端及计算机可读存储介质 Pending CN113486278A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110691747.6A CN113486278A (zh) 2021-06-22 2021-06-22 一种图片显示方法、智能终端及计算机可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110691747.6A CN113486278A (zh) 2021-06-22 2021-06-22 一种图片显示方法、智能终端及计算机可读存储介质

Publications (1)

Publication Number Publication Date
CN113486278A true CN113486278A (zh) 2021-10-08

Family

ID=77935769

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110691747.6A Pending CN113486278A (zh) 2021-06-22 2021-06-22 一种图片显示方法、智能终端及计算机可读存储介质

Country Status (1)

Country Link
CN (1) CN113486278A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115827144A (zh) * 2023-02-20 2023-03-21 北京集度科技有限公司 一种页面展示方法、系统、电子设备及计算机程序产品

Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104090709A (zh) * 2014-06-11 2014-10-08 小米科技有限责任公司 图片切换方法和装置
CN105741334A (zh) * 2014-12-11 2016-07-06 阿里巴巴集团控股有限公司 热力图提供方法及装置
CN105868246A (zh) * 2015-12-15 2016-08-17 乐视网信息技术（北京）股份有限公司 一种图片显示方法及装置
CN106844366A (zh) * 2015-12-03 2017-06-13 北京国双科技有限公司 地理热力图的显示方法及装置
CN108876748A (zh) * 2018-06-29 2018-11-23 掌阅科技股份有限公司 图片展示方法、计算设备及计算机存储介质
CN110083418A (zh) * 2019-04-04 2019-08-02 上海掌门科技有限公司 信息流中图片的处理方法、设备及计算机可读存储介质
CN111125592A (zh) * 2018-11-01 2020-05-08 百度在线网络技术（北京）有限公司 应用程序的热力图渲染方法及其装置
CN111258701A (zh) * 2020-02-13 2020-06-09 深圳震有科技股份有限公司 一种状态图标控制方法、智能终端及存储介质
CN112306335A (zh) * 2019-07-25 2021-02-02 阿里巴巴集团控股有限公司 图片的展示方法及装置
CN112464301A (zh) * 2020-11-25 2021-03-09 北京奇艺世纪科技有限公司 一种图像显示方法及装置
CN112825039A (zh) * 2019-11-21 2021-05-21 广州凡科互联网科技股份有限公司 一种基于Canvas实现的三维球体内容展示实现方法

Patent Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104090709A (zh) * 2014-06-11 2014-10-08 小米科技有限责任公司 图片切换方法和装置
CN105741334A (zh) * 2014-12-11 2016-07-06 阿里巴巴集团控股有限公司 热力图提供方法及装置
CN106844366A (zh) * 2015-12-03 2017-06-13 北京国双科技有限公司 地理热力图的显示方法及装置
CN105868246A (zh) * 2015-12-15 2016-08-17 乐视网信息技术（北京）股份有限公司 一种图片显示方法及装置
CN108876748A (zh) * 2018-06-29 2018-11-23 掌阅科技股份有限公司 图片展示方法、计算设备及计算机存储介质
CN111125592A (zh) * 2018-11-01 2020-05-08 百度在线网络技术（北京）有限公司 应用程序的热力图渲染方法及其装置
CN110083418A (zh) * 2019-04-04 2019-08-02 上海掌门科技有限公司 信息流中图片的处理方法、设备及计算机可读存储介质
CN112306335A (zh) * 2019-07-25 2021-02-02 阿里巴巴集团控股有限公司 图片的展示方法及装置
CN112825039A (zh) * 2019-11-21 2021-05-21 广州凡科互联网科技股份有限公司 一种基于Canvas实现的三维球体内容展示实现方法
CN111258701A (zh) * 2020-02-13 2020-06-09 深圳震有科技股份有限公司 一种状态图标控制方法、智能终端及存储介质
CN112464301A (zh) * 2020-11-25 2021-03-09 北京奇艺世纪科技有限公司 一种图像显示方法及装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
吴英宾，王琰琰: "《HTML5应用开发案例教程》", 31 January 2021, 机械工业出版社, pages: 136 - 141 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115827144A (zh) * 2023-02-20 2023-03-21 北京集度科技有限公司 一种页面展示方法、系统、电子设备及计算机程序产品

Similar Documents

Publication Publication Date Title
CN110297996B (zh) 基于h5页面的动画显示方法、装置、设备及存储介质
US10706212B1 (en) Cross-platform presentation of digital content
US9135022B2 (en) Cross window animation
CN106095437B (zh) 用户界面从右到左rtl的布局方式的实现方法及装置
CN104850388B (zh) 网页绘制方法及装置
CN106991096B (zh) 动态页面渲染方法及装置
CN108256062B (zh) 网页动画实现方法、装置、电子设备、存储介质
KR20080021081A (ko) Ｘｍｌ 표현에서 ｚ-ｏｒｄｅｒ 엘리먼트들의 정밀립 제어
CN105677658B (zh) 页面展现方法及装置
CN109445891B (zh) 画面组态及展示方法、装置、计算机可读存储介质
CN110750664B (zh) 图片的显示方法及装置
US20160070682A1 (en) Platform abstraction of graphics
CN111459501A (zh) 基于SVG的Web组态画面存储与展示系统和方法及介质
CN111367518B (zh) 页面布局方法、装置、计算设备及计算机存储介质
CN110990431A (zh) 一种实现中国地图和折线图数据同步联动轮播的方法
CN110781425B (zh) 移动端h5页面的显示方法、装置、设备及存储介质
US20150077433A1 (en) Algorithm for improved zooming in data visualization components
CN113486278A (zh) 一种图片显示方法、智能终端及计算机可读存储介质
CN111258701B (zh) 一种状态图标控制方法、智能终端及存储介质
CN103677528A (zh) 一种信息处理方法和电子设备
CN109343772A (zh) 一种基于h5页面的海报生成方法、系统、装置及存储介质
CN116010736A (zh) 矢量图标的处理方法、装置、设备以及存储介质
CN112613270B (zh) 对目标文本进行样式推荐的方法、系统、设备及存储介质
CN112367295B (zh) 插件展示方法及装置、存储介质及电子设备
Brockschmidt Programming Windows 8 Apps with HTML, CSS and Javascript

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