CN110310226B - 图片的拼接显示方法及系统 - Google Patents

图片的拼接显示方法及系统 Download PDF

Info

Publication number
CN110310226B
CN110310226B CN201910485624.XA CN201910485624A CN110310226B CN 110310226 B CN110310226 B CN 110310226B CN 201910485624 A CN201910485624 A CN 201910485624A CN 110310226 B CN110310226 B CN 110310226B
Authority
CN
China
Prior art keywords
font
display
file
picture
setting
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.)
Active
Application number
CN201910485624.XA
Other languages
English (en)
Other versions
CN110310226A (zh
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.)
Ctrip Travel Network Technology Shanghai Co Ltd
Original Assignee
Ctrip Travel Network Technology Shanghai 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 Ctrip Travel Network Technology Shanghai Co Ltd filed Critical Ctrip Travel Network Technology Shanghai Co Ltd
Priority to CN201910485624.XA priority Critical patent/CN110310226B/zh
Publication of CN110310226A publication Critical patent/CN110310226A/zh
Application granted granted Critical
Publication of CN110310226B publication Critical patent/CN110310226B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • 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/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
    • G06T3/4038—Image mosaicing, e.g. composing plane images from plane sub-images
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • User Interface Of Digital Computer (AREA)
  • Controls And Circuits For Display Device (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本发明公开了图片的拼接显示方法及系统，其种方法包括：利用矢量图标库将至少一可缩放的矢量图形格式的图片分别转化为字体文件，可缩放的矢量图形格式的图片由显示图片以预设规则切分生成；将字体文件保存至预设的保存地址；在前端程序中分别引用保存地址以及字体文件；在前端程序中设置每一字体文件的显示属性；在前端程序中根据预设规则分别设置每一可缩放的矢量图形格式的图片的显示位置；分别根据显示位置和显示属性显示字体文件的内容，以拼接成显示图片。本发明拼接后的显示图片占用空间小，而且字体可以根据实际应用随意改变大小，放大不失真，而且还可以随意改变颜色、产生阴影、透明效果等，提高了用户的使用舒适度。

Description

图片的拼接显示方法及系统
技术领域
本发明涉及图片显示技术领域，尤其涉及一种图片的拼接显示方法及系统。
背景技术
随着电子行业的发展，图片的应用范围也越来越广泛，目前在电子设备的显示屏上显示的图片，为丰富图片的局部显示效果，通常将图片分割成多片进行显示，但依然会出现将整体图片或者局部图片放大到一定程度时容易失真的情况，而且常用的图片格式占用的空间大，并且图片在显示时也不能随意进行特别效果显示，如改变颜色、产生阴影、透明效果等，导致在实际应用中用户感受不佳。
发明内容
本发明要解决的技术问题是为了克服现有技术中图片占用空间大、放大容易失真以及不能随意进行特别效果显示的缺陷，提供一种图片的拼接显示方法及系统。
本发明是通过下述技术方案来解决上述技术问题：
一种图片的拼接显示方法，所述图片的拼接显示方法包括：
利用矢量图标库将至少一可缩放的矢量图形格式的图片分别转化为字体文件，所述可缩放的矢量图形格式的图片由显示图片以预设规则切分生成；
将所述字体文件保存至预设的保存地址；
在前端程序中分别引用所述保存地址以及所述字体文件；
在所述前端程序中设置每一所述字体文件的显示属性；
在所述前端程序中根据所述预设规则分别设置每一所述可缩放的矢量图形格式的图片的显示位置；
分别根据所述显示位置和所述显示属性显示所述字体文件的内容，以拼接成所述显示图片。
较佳地，所述字体文件包括字体编码，所述前端程序包括CSS(层叠样式表)文件和HTML(超文本标记语言)文件；
所述在前端程序中分别引用所述保存地址以及所述字体文件的步骤包括：
在所述CSS文件中分别引用所述保存地址以及所述字体文件；
在所述CSS文件中的类样式中定义字体名，并将所述字体名指向所述字体编码；
所述在所述前端程序中设置所述字体文件的显示属性的步骤包括：
在所述CSS文件中设置所述显示属性；
所述在所述前端程序中根据所述预设规则分别设置每一所述可缩放的矢量图形格式的图片的显示位置的步骤包括：
在所述HTML文件中根据所述预设规则分别设置所述显示位置；
所述分别根据所述显示位置和所述显示属性显示所述字体文件的内容的步骤包括：
在所述HTML文件中调用所述CSS文件获得所述字体名；
在所述HTML文件中调用所述字体名获得所述字体编码，并分别根据所述显示位置和所述显示属性显示所述字体编码对应的所述字体文件的内容。
较佳地，所述显示属性包括字体颜色、字体大小、阴影和透明中的至少一种。
较佳地，所述字体文件包括svg(一种图标格式)、ttf(一种图标格式)、woff(一种图标格式)、woff2(一种图标格式)格式中的至少一种。
一种图片的拼接显示系统，所述图片的拼接显示系统包括转化模块、保存模块、引用模块、显示设置模块、位置设置模块和拼接模块；
所述转化模块用于利用矢量图标库将至少一可缩放的矢量图形格式的图片分别转化为字体文件，所述可缩放的矢量图形格式的图片由显示图片以预设规则切分生成；
所述保存模块用于将所述字体文件保存至预设的保存地址；
所述引用模块用于在前端程序中分别引用所述保存地址以及所述字体文件；
所述显示设置模块用于在所述前端程序中设置每一所述字体文件的显示属性；
所述位置设置模块用于根据所述预设规则分别设置每一所述可缩放的矢量图形格式的图片的显示位置；
所述拼接模块用于分别根据所述显示位置和所述显示属性显示所述字体文件的内容，以拼接成所述显示图片。
较佳地，所述字体文件包括字体编码，所述前端程序包括CSS文件和HTML文件；
所述引用模块用于在所述CSS文件中分别引用所述保存地址以及所述字体文件，还用于在所述CSS文件中的类样式中定义字体名，并将所述字体名指向所述字体编码；
所述显示设置模块还用于在所述CSS文件中设置所述显示属性；
所述位置设置模块还用于在所述HTML文件中根据所述预设规则分别设置所述显示位置；
所述拼接模块还用于在所述HTML文件中调用所述CSS文件获得所述字体名；以及在所述HTML文件中调用所述字体名获得所述字体编码，并分别根据所述显示位置和所述显示属性显示所述字体编码对应的所述字体文件的内容。
较佳地，所述显示属性包括字体颜色、字体大小、阴影和透明中的至少一种。
较佳地，所述字体文件包括svg、ttf、woff、woff2格式中的至少一种。
本发明的积极进步效果在于：
本发明通过利用矢量图标库将可缩放的矢量图形格式的图片分别转化为字体文件，并根据预设规则根据显示位置和显示属性分别显示字体文件的内容，以拼接成显示图片，因为字体文件的显示占用的空间小，使得拼接后的显示图片占用空间小，而且字体可以根据实际应用随意改变大小，放大不失真，而且还可以随意改变颜色、产生阴影、透明效果等，提高了用户的使用舒适度。
附图说明
图1为本发明的实施例1的图片的拼接显示方法的流程图。
图2为本发明的实施例1的图片的拼接显示方法的部分中国地图图片的字体图标显示示意图。
图3为本发明的实施例2的图片的拼接显示系统的模块示意图。
具体实施方式
下面通过实施例的方式进一步说明本发明，但并不因此将本发明限制在所述的实施例范围之中。
实施例1
本实施例提供一种图片的拼接显示方法，如图1所示，图片的拼接显示方法包括：
步骤101、利用矢量图标库将至少一可缩放的矢量图形格式的图片分别转化为字体文件，可缩放的矢量图形格式的图片由显示图片以预设规则切分生成。
步骤102、将字体文件保存至预设的保存地址。
步骤103、在前端程序中分别引用保存地址以及字体文件。
步骤104、在前端程序中设置每一字体文件的显示属性。
步骤105、在前端程序中根据预设规则分别设置每一可缩放的矢量图形格式的图片的显示位置。
步骤106、分别根据显示位置和显示属性显示字体文件的内容，以拼接成显示图片。
本实施例以部分中国地图的图片显示为例，部分中国地图由多个地区的区域图标构成，用户界面设置人员通过在illustrator(一种矢量图形设计软件)或Sketch(一种矢量图形设计软件)这类矢量图形软件中创建每个地区的区域图标之后，将每个区域图标分别保存为svg(一种可缩放的矢量图形格式)格式的图片，如图2所示，对应得到多个地区的区域图标，如区域图标21、区域图标22、区域图标23等，多个区域图标拼接可形成如图2所示的部分中国地图。
本实施例中选用的字体图标库为阿里巴巴的字体图标库，将每个地区的区域图标上传至阿里巴巴的字体图标库后，生成各自对应的字体文件，每个字体文件均包括多个文件类型的字体文件，多个文件类型的字体文件可用于兼容不同的应用系统环境，字体文件的文件类型通常包括svg、ttf、woff、woff2格式中的至少一种，生成的字体文件均包括对应的字体编码。
将所有字体文件保存至预设保存地址中，本实施例将字体文件保存至系统其他字体默认的FONT(字体)文件夹下。
本实施例中前端程序采用CSS文件和HTML文件。在CSS文件中与定义其他字体上同，在CSS文件中分别引用字体文件的保存地址以及字体文件，保存地址即为前述的FONT文件夹的保存路径。
在CSS文件中的类样式中定义字体名，并将字体名指向字体编码；
在CSS文件中设置显示属性；显示属性包括字体颜色、字体大小、阴影和透明中的至少一种。因此可以随意改变颜色、产生阴影、透明效果等。
在HTML文件中根据预设规则分别设置显示位置；在HTML文件中调用CSS文件获得字体名；在HTML文件中调用字体名获得字体编码，并分别根据显示位置和显示属性显示字体编码对应的字体文件的内容，即在预设位置依次显示多个地区的区域图标，拼接显示出如图2所示的部分中国地图图片的字体图标效果图。
本实施例的方法通过利用矢量图标库将可缩放的矢量图形格式的图片分别转化为字体文件，并根据预设规则根据显示位置和显示属性分别显示字体文件的内容，以拼接成显示图片，因为字体文件的显示占用的空间小，使得拼接后的显示图片占用空间小，而且字体可以根据实际应用随意改变大小，放大不失真，而且还可以随意改变颜色、产生阴影、透明效果等，提高了用户的使用舒适度。
实施例2
本实施例提供一种图片的拼接显示系统，如图3所示，图片的拼接显示系统包括转化模块201、保存模块202、引用模块203、显示设置模块204、位置设置模块205和拼接模块206；
转化模块201用于利用矢量图标库将至少一可缩放的矢量图形格式的图片分别转化为字体文件，可缩放的矢量图形格式的图片由显示图片以预设规则切分生成。
保存模块202用于将字体文件保存至预设的保存地址。
引用模块203用于在前端程序中分别引用保存地址以及字体文件。
显示设置模块204用于在前端程序中设置每一字体文件的显示属性。
位置设置模块205用于根据预设规则分别设置每一可缩放的矢量图形格式的图片的显示位置。
拼接模块206用于分别根据显示位置和显示属性显示字体文件的内容，以拼接成显示图片。
本实施例中以部分中国地图的图片显示为例，部分中国地图由多个地区的区域图标构成，用户界面设置人员通过在illustrator(一种矢量图形设计软件)或Sketch(一种矢量图形设计软件)这类矢量图形软件中创建每个地区的区域图标之后保存为svg(一种可缩放的矢量图形格式)格式的图片，如图2所示，对应得到多个地区的区域图标，如区域图标21、区域图标22、区域图标23等，多个区域图标拼接可形成如图2所示的部分中国地图。
本实施例中选用的字体图标库为阿里巴巴的字体图标库，将每个地区的区域图标上传至阿里巴巴的字体图标库后，生成各自对应的字体文件，每个字体文件均包括多个文件类型的字体文件，多个文件类型的字体文件可用于兼容不同的应用系统环境，字体文件的文件类型通常包括svg(一种图标格式)、ttf(一种图标格式)、woff(一种图标格式)、woff2(一种图标格式)格式中的至少一种，生成的字体文件均包括对应的字体编码。
将所有字体文件保存至预设保存地址中，本实施例将字体文件保存至系统其他字体默认的FONT(字体)文件夹下。
本实施例中前端程序采用CSS文件和HTML文件。在CSS文件中与定义其他字体上同，在CSS文件中分别引用字体文件的保存地址以及字体文件，保存地址即为前述的FONT文件夹的保存路径。
在CSS文件中的类样式中定义字体名，并将字体名指向字体编码；
在CSS文件中设置显示属性；显示属性包括字体颜色、字体大小、阴影和透明中的至少一种。可以随意改变颜色、产生阴影、透明效果等。
在HTML文件中根据预设规则分别设置显示位置；在HTML文件中调用CSS文件获得字体名；在HTML文件中调用字体名获得字体编码，并分别根据显示位置和显示属性显示字体编码对应的字体文件的内容，即在预设位置依次显示多个地区的区域图标，拼接显示出如图2所示的地图图片的字体图标效果图。
本实施例的系统通过利用矢量图标库将可缩放的矢量图形格式的图片分别转化为字体文件，并根据预设规则根据显示位置和显示属性分别显示字体文件的内容，以拼接成显示图片，因为字体文件的显示占用的空间小，使得拼接后的显示图片占用空间小，而且字体可以根据实际应用随意改变大小，放大不失真，而且还可以随意改变颜色、产生阴影、透明效果等，提高了用户的使用舒适度。
虽然以上描述了本发明的具体实施方式，但是本领域的技术人员应当理解，这仅是举例说明，本发明的保护范围是由所附权利要求书限定的。本领域的技术人员在不背离本发明的原理和实质的前提下，可以对这些实施方式做出多种变更或修改，但这些变更和修改均落入本发明的保护范围。

Claims (6)

1.一种图片的拼接显示方法，其特征在于，所述图片的拼接显示方法包括：
利用矢量图标库将至少一可缩放的矢量图形格式的图片分别转化为字体文件，所述可缩放的矢量图形格式的图片由显示图片以预设规则切分生成；
将所述字体文件保存至预设的保存地址；
在前端程序中分别引用所述保存地址以及所述字体文件；
在所述前端程序中设置每一所述字体文件的显示属性；
在所述前端程序中根据所述预设规则分别设置每一所述可缩放的矢量图形格式的图片的显示位置；
分别根据所述显示位置和所述显示属性显示所述字体文件的内容，以拼接成所述显示图片；
所述字体文件包括字体编码，所述前端程序包括CSS文件和HTML文件；
所述在前端程序中分别引用所述保存地址以及所述字体文件的步骤包括：
在所述CSS文件中分别引用所述保存地址以及所述字体文件；
在所述CSS文件中的类样式中定义字体名，并将所述字体名指向所述字体编码；
所述在所述前端程序中设置所述字体文件的显示属性的步骤包括：
在所述CSS文件中设置所述显示属性；
所述在所述前端程序中根据所述预设规则分别设置每一所述可缩放的矢量图形格式的图片的显示位置的步骤包括：
在所述HTML文件中根据所述预设规则分别设置所述显示位置；
所述分别根据所述显示位置和所述显示属性显示所述字体文件的内容的步骤包括：
在所述HTML文件中调用所述CSS文件获得所述字体名；
在所述HTML文件中调用所述字体名获得所述字体编码，并分别根据所述显示位置和所述显示属性显示所述字体编码对应的所述字体文件的内容。
2.如权利要求1所述的图片的拼接显示方法，其特征在于，所述显示属性包括字体颜色、字体大小、阴影和透明中的至少一种。
3.如权利要求1所述的图片的拼接显示方法，其特征在于，所述字体文件包括svg、ttf、woff、woff2格式中的至少一种。
4.一种图片的拼接显示系统，其特征在于，所述图片的拼接显示系统包括转化模块、保存模块、引用模块、显示设置模块、位置设置模块和拼接模块；
所述转化模块用于利用矢量图标库将至少一可缩放的矢量图形格式的图片分别转化为字体文件，所述可缩放的矢量图形格式的图片由显示图片以预设规则切分生成；
所述保存模块用于将所述字体文件保存至预设的保存地址；
所述引用模块用于在前端程序中分别引用所述保存地址以及所述字体文件；
所述显示设置模块用于在所述前端程序中设置每一所述字体文件的显示属性；
所述位置设置模块用于根据所述预设规则分别设置每一所述可缩放的矢量图形格式的图片的显示位置；
所述拼接模块用于分别根据所述显示位置和所述显示属性显示所述字体文件的内容，以拼接成所述显示图片；
所述字体文件包括字体编码，所述前端程序包括CSS文件和HTML文件；
所述引用模块用于在所述CSS文件中分别引用所述保存地址以及所述字体文件，还用于在所述CSS文件中的类样式中定义字体名，并将所述字体名指向所述字体编码；
所述显示设置模块还用于在所述CSS文件中设置所述显示属性；
所述位置设置模块还用于在所述HTML文件中根据所述预设规则分别设置所述显示位置；
所述拼接模块还用于在所述HTML文件中调用所述CSS文件获得所述字体名；以及在所述HTML文件中调用所述字体名获得所述字体编码，并分别根据所述显示位置和所述显示属性显示所述字体编码对应的所述字体文件的内容。
5.如权利要求4所述的图片的拼接显示系统，其特征在于，所述显示属性包括字体颜色、字体大小、阴影和透明中的至少一种。
6.如权利要求4所述的图片的拼接显示系统，其特征在于，所述字体文件包括svg、ttf、woff、woff2格式中的至少一种。
CN201910485624.XA 2019-06-05 2019-06-05 图片的拼接显示方法及系统 Active CN110310226B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910485624.XA CN110310226B (zh) 2019-06-05 2019-06-05 图片的拼接显示方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910485624.XA CN110310226B (zh) 2019-06-05 2019-06-05 图片的拼接显示方法及系统

Publications (2)

Publication Number Publication Date
CN110310226A CN110310226A (zh) 2019-10-08
CN110310226B true CN110310226B (zh) 2023-04-25

Family

ID=68075078

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910485624.XA Active CN110310226B (zh) 2019-06-05 2019-06-05 图片的拼接显示方法及系统

Country Status (1)

Country Link
CN (1) CN110310226B (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111026891A (zh) * 2019-12-10 2020-04-17 湖南致同工程科技有限公司 一种地图底图集成方法
CN111414107A (zh) * 2020-03-17 2020-07-14 中国银行股份有限公司 可缩放矢量图形处理方法及系统
CN112016267A (zh) * 2020-08-05 2020-12-01 北京达佳互联信息技术有限公司 一种图标字体处理方法、装置及存储介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104699833A (zh) * 2015-03-31 2015-06-10 北京奇艺世纪科技有限公司 一种图片展示和存储方法及装置
CN105631080A (zh) * 2014-11-27 2016-06-01 国网内蒙古东部电力有限公司 一种矢量电网接线图自动生成装置和方法
CN107092585A (zh) * 2017-04-11 2017-08-25 王建明 基于可缩放矢量图形的蒙古文显示方法及系统

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105631080A (zh) * 2014-11-27 2016-06-01 国网内蒙古东部电力有限公司 一种矢量电网接线图自动生成装置和方法
CN104699833A (zh) * 2015-03-31 2015-06-10 北京奇艺世纪科技有限公司 一种图片展示和存储方法及装置
CN107092585A (zh) * 2017-04-11 2017-08-25 王建明 基于可缩放矢量图形的蒙古文显示方法及系统

Also Published As

Publication number Publication date
CN110310226A (zh) 2019-10-08

Similar Documents

Publication Publication Date Title
CN110310226B (zh) 图片的拼接显示方法及系统
CN101699426B (zh) 文档格式转化系统及方法
CN101202748B (zh) 一种嵌入式设备的微浏览器浏览网页的方法及嵌入式设备的微浏览器
US8280193B2 (en) Method and apparatus for magnifying computer screen display
CN102663126A (zh) 一种在移动终端中显示网页的方法及装置
CN108573008B (zh) 一种电子地图中的海量点展示方法及装置
WO2016015564A1 (zh) 一种文档显示方法以及装置
WO2015078159A1 (zh) 网页显示方法及装置
US20040263513A1 (en) Treemap visualization engine
CN106126760A (zh) 一种web网页图片优化的方法
CN105224540A (zh) 页面排版方法及装置
CN111915705B (zh) 图片可视化编辑方法、装置、设备和介质
US8269791B2 (en) Information processing apparatus and method for processing a vector image composed of a plurality of objects described by structured document data
CN110766772A (zh) 基于Flutter跨平台海报制作方法装置介质和设备
CN111459501A (zh) 基于SVG的Web组态画面存储与展示系统和方法及介质
CN111768461A (zh) 一种基于电子价签的图片生成方法
CN105956133B (zh) 智能终端上显示文件的方法及装置
CN111190519A (zh) 一种文件及其控件的处理方法、装置、设备和存储介质
CN106776994B (zh) 一种工程符号在工程报表和网页中的应用方法及系统
CN115757272A (zh) 一种将html文件转换为ofd文件的方法及系统
JP2002007269A (ja) ページを再編集するプロキシサーバ、方法及びプログラムを記録した記録媒体
CN104424174B (zh) 文档处理系统和文档处理方法
CN115268904A (zh) 一种用户界面设计文件生成方法、装置、设备及介质
CN113515221A (zh) 基于电子文档的图片和文字对照展示方法及装置
CN102841890B (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
GR01 Patent grant
GR01 Patent grant