CN112825079A - 一种信息展示的方法及装置 - Google Patents
一种信息展示的方法及装置 Download PDFInfo
- Publication number
- CN112825079A CN112825079A CN201911142479.1A CN201911142479A CN112825079A CN 112825079 A CN112825079 A CN 112825079A CN 201911142479 A CN201911142479 A CN 201911142479A CN 112825079 A CN112825079 A CN 112825079A
- Authority
- CN
- China
- Prior art keywords
- character
- size
- image
- characters
- text
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 34
- 238000012545 processing Methods 0.000 claims description 18
- 238000004590 computer program Methods 0.000 claims description 9
- 239000000126 substance Substances 0.000 claims description 3
- 230000000694 effects Effects 0.000 abstract description 27
- 238000010586 diagram Methods 0.000 description 20
- 230000006870 function Effects 0.000 description 8
- 238000004891 communication Methods 0.000 description 7
- 230000003287 optical effect Effects 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 230000006872 improvement Effects 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 239000000835 fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 239000003086 colorant Substances 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
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/40—Information retrieval; Database structures therefor; File system structures therefor of multimedia data, e.g. slideshows comprising image and additional audio data
- G06F16/44—Browsing; Visualisation therefor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Multimedia (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- User Interface Of Digital Computer (AREA)
- Controls And Circuits For Display Device (AREA)
Abstract
本发明公开了一种信息展示的方法及装置,涉及计算机技术领域。该方法的一具体实施方式包括:利用第一文字组件展示目标文本,并确定目标文本中的字符的尺寸;第一文字组件中嵌套有第二文字组件,第二文字组件用于展示与目标文本中的字符尺寸相同的第一预设字符;获取待展示的图像,并确定图像的尺寸;根据图像的尺寸以及目标文本中的字符的尺寸,计算第二文字组件中待展示的第一预设字符的数量,并将数量个第一预设字符填充至第二文字组件中;将图像设置于第二文字组件中,以使图像覆盖第一预设字符。该实施方式实现了目标文本中除首行以外的其余行文字的起始位置与首行中的图片的起始位置保持一致的展示效果,从而提高了信息展示效果。
Description
技术领域
本发明涉及计算机技术领域,尤其涉及一种信息展示的方法及装置。
背景技术
电商平台在展示产品时,通常采用图片与文字相结合的方式对产品信息进行展示,例如,在产品标题栏采用图片与文字相结合的方式对产品标题进行展示。
在产品信息展示时,文字信息通常具有多行,且图片位于首行文字的最前端。在产品信息展示时,一般要求除首行以外的其余行文字的起始位置与首行中的图片的起始位置保持一致,如图1所示,第二行文字的起始位置需与首行图片的起始位置保持一致,在图1中,X表征图片展示的信息,Y表征文字展示的信息。
在实现本发明过程中,发明人发现现有技术中至少存在如下问题:
在现有的ReactNative开发中,用于展示文字信息的文字组件无法嵌套其他类型的组件(如图片组件),如文字组件嵌套图片组件,则ReactNative会给出相应的报错,而不进行嵌套开发,又无法保证除首行以外的其余行文字的起始位置与首行中的图片的起始位置保持一致,降低信息的展示效果。
发明内容
有鉴于此,本发明实施例提供一种信息展示的方法及装置,能够使得展示图片与文字相结合的信息时,保证除首行以外的其余行文字的起始位置与首行中的图片的起始位置保持一致,提高信息的展示效果,便于用户查看信息,进而有利于提高用户粘度。
为实现上述目的,根据本发明实施例的一个方面,提供了一种信息展示的方法。
本发明实施例的一种信息展示的方法包括:
利用第一文字组件展示目标文本,并确定所述目标文本中的字符的尺寸;所述第一文字组件中嵌套有第二文字组件,所述第二文字组件用于展示与所述目标文本中的字符尺寸相同的第一预设字符;
获取待展示的图像,并确定所述图像的尺寸;
根据所述图像的尺寸以及所述目标文本中的字符的尺寸,计算所述第二文字组件中待展示的第一预设字符的数量,并将所述数量个所述第一预设字符填充至所述第二文字组件中,使得所述第二文字组件的尺寸与所述图像的尺寸相匹配;
将所述图像设置于所述第二文字组件中,以使所述图像覆盖所述第二文字组件中的所述第一预设字符。
可选地,
所述确定所述目标文本中的字符的尺寸,包括:
获取第三文字组件的宽度和/或高度,以确定所述目标文本中的字符的尺寸,其中,所述第三文字组件中填充有一个与所述目标文本中字符尺寸相同的第二预设字符。
可选地,
该信息展示的方法还包括:根据所述目标文本中字符的尺寸,调节所述图像的尺寸,以使尺寸调节后的所述图像的尺寸与填充有所述第一预设字符的第二文字组件的尺寸相匹配。
可选地,
所述将所述图像设置于所述第二文字组件中,包括:
以绝对布局的方式将所述图像设置于所述第二文字组件中。
可选地,
所述第一预设字符和/或所述第二预设字符为透明颜色。
为实现上述目的,根据本发明实施例的又一方面,提供了一种信息展示的装置。
本发明实施例的一种信息展示的装置包括:第一展示模块、获取模块、处理模块和第二展示模块;其中,
所述第一展示模块,用于利用第一文字组件展示目标文本,并确定所述目标文本中的字符的尺寸;所述第一文字组件中嵌套有第二文字组件,所述第二文字组件用于展示与所述目标文本中的字符尺寸相同的第一预设字符;
所述获取模块,用于获取待展示的图像,并确定所述图像的尺寸;
所述处理模块,用于根据所述图像的尺寸以及所述目标文本中的字符的尺寸,计算所述第二文字组件中待展示的第一预设字符的数量,并将所述数量个所述第一预设字符填充至所述第二文字组件中,使得所述第二文字组件的尺寸与所述图像的尺寸相匹配;
所述第二展示模块,用于将所述图像设置于所述第二文字组件中,以使所述图像覆盖所述第二文字组件中的所述第一预设字符。
可选地,
所述处理模块,用于获取第三文字组件的宽度和/或高度,以确定所述目标文本中的字符的尺寸,其中,所述第三文字组件中填充有一个与所述目标文本中字符尺寸相同的第二预设字符。
可选地,
所述处理模块,进一步用于根据所述目标文本中字符的尺寸,调节所述图像的尺寸,以使尺寸调节后的所述图像的尺寸与填充有所述第一预设字符的第二文字组件的尺寸相匹配。
为实现上述目的,根据本发明实施例的又一方面,提供了一种信息展示的电子设备。
本发明实施例的一种信息展示的电子设备包括:一个或多个处理器;存储装置,用于存储一个或多个程序,当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现本发明实施例的一种信息展示的方法。
为实现上述目的,根据本发明实施例的再一方面,提供了一种计算机可读存储介质。
本发明实施例的一种计算机可读存储介质,其上存储有计算机程序,所述程序被处理器执行时实现本发明实施例的一种信息展示的方法。
上述发明中的一个实施例具有如下优点或有益效果:通过在第一文字组件中嵌套第二文字组件的方式,其中,第一文字组件可展示目标文本,第二文字组件可展示与目标文本中的字符尺寸相同的第一预设字符,且第二文字组件中展示的第一预设字符的数量是根据待展示图像的尺寸来确定的,使得第二文字组件的尺寸与待展示的图像相匹配,由此通过相应数量个第一预设字符为待展示的图像在第一文字组件中占位,然后将待展示的图像设置于第二文字组件中,使得所述图像覆盖所述第二文字组件中的所述第一预设字符,而由于第二文字组件嵌套于第一文字组件中,则所述图像展示于所述第一文字组件中。由此,通过第一文字组件与第二文字组件嵌套的方式,利用第二文字组件为待展示的图像在第一文字组件中占位,使得待展示的图像展示于第一文字组件时,可保证目标文本中除首行以外的其余行文字的起始位置与首行中的图像的起始位置保持一致,提高信息展示效果,便于用户查看信息,进而有利于提高用户粘度。
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
附图用于更好地理解本发明,不构成对本发明的不当限定。其中:
图1是根据本发明实施例所实现的信息展示的效果示意图;
图2是根据本发明实施例的信息展示的方法的主要步骤的示意图;
图3是根据本发明实施例的第一文字组件与第二文字组件嵌套展示的示意图;
图4是根据本发明实施例的第三文字组件与第二文字组件的相对位置示意图;
图5是根据本发明实施例的第三文字组件与第二文字组件的另一种相对位置示意图;
图6是根据本发明实施例的第三文字组件与第二文字组件的又一种相对位置示意图;
图7是根据本发明实施例的第三文字组件与第二文字组件的再一种相对位置示意图;
图8是根据本发明实施例的第三文字组件与第二文字组件嵌套展示的示意图;
图9是根据本发明实施例的信息展示的装置的主要模块的示意图;
图10是本发明实施例可以应用于其中的示例性***架构图;
图11是适于用来实现本发明实施例的终端设备或服务器的计算机***的结构示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明,其中包括本发明实施例的各种细节以助于理解,应当将它们认为仅仅是示范性的。因此,本领域普通技术人员应当认识到,可以对这里描述的实施例做出各种改变和修改,而不会背离本发明的范围和精神。同样,为了清楚和简明,以下的描述中省略了对公知功能和结构的描述。
需要指出的是,在不冲突的情况下,本发明的实施例以及实施例中的技术特征可以相互结合。
图2是根据本发明实施例的信息展示的方法的主要步骤的示意图。
如图2所示,本发明实施例的信息展示的方法主要包括以下步骤:
步骤S201:利用第一文字组件展示目标文本,并确定所述目标文本中的字符的尺寸;所述第一文字组件中嵌套有第二文字组件,所述第二文字组件用于展示与所述目标文本中的字符尺寸相同的第一预设字符。
通过第一文字组件展示目标文本,目标文本可以为产品标题等内容,在利用第一文字组件展示目标文本时,可自定义设置目标文本中字符的展示样式,如字体、字号和颜色等。
第一文字组件中嵌套有第二文字组件,第二文字组件通过展示与目标文本中字符尺寸相同的第一预设字符,可为待展示的图片在第一组件中占位。
为了保证第二文字组件中展示的第一预设字符的尺寸与第一文字组件展示的目标文本中每个字符的尺寸相同,可将第一预设字符的字体和字号设置为与目标文本中的字符的字体和字号相同,则可进一步通过设置第一预设字符的数量,使得第二文字组件的尺寸与待展示的图像的尺寸相匹配,从而便于待展示的图像在第一文字组件中的展示。
可以理解的是,第二文字组件嵌套于第一文字组件,则第二文字组件位于第一文字组件的前端,也就是说,第二文字组件展示的第一预设字符位于第一文字组件的首行的最前端。
步骤S202:获取待展示的图像,并确定所述图像的尺寸。
在本发明实施方式中,可通过Image.getSize()方法预下载待展示的图像,并获得图像的宽和高,可将图像的宽记为imageWidth,将图像的高记为imageHeight。直接获取的图像的尺寸可能过大而无法与第二文字组件相匹配,因此,为了提高信息的展示效果,可根据与目标文本中字符的尺寸相同的第一预设字符的尺寸,对图像的尺寸进行调节。
可以理解的是,在同时展示图像和文字信息时,可采用如图1所示的横向展示方式,在横向展示方式中,文字按行排列,另外也可以采用纵向展示方式,在纵向展示方式中,文字按列排列。为了便于描述,下述实施例以横向展示方式为例,对图像的尺寸调节过程进行详细说明。
若图像的尺寸过大,则图像的高度可能大于第一文字组件中一行文字的高度,也就是说,过大尺寸的图像可能占据第一文字组件的多行空间,这一方面由于图像占据空间过大而浪费展示空间,另一方面也使得目标文本中除首行以外的其余行文字的起始位置与首行中的图片的起始位置无法保持一致,降低信息展示效果。
为了解决该问题,在本发明一个实施例中,当图片的高度imageHeight大于目标文本中一行文字的高度markingViewHeight时,计算图片的高度与目标文本中一行文字的高度的比例:scale=imageHeight/markingViewHeight,并根据计算出的比例scale,对图片的高度进行调节,使得图像的高度等于或小于目标文本中一行文字的高度,从而使得图像展示于第一文字组件时,仅占据首行的空间,从而实现在节省展示空间的同时提高展示效果。
可以理解的是,当采用纵向方式展示信息时,则当图像的宽度大于目标文本中一列文字的宽度时,可根据目标文本中的字符的尺寸对图像的尺寸进行调节,使得图像的宽度等于或小于目标文本中一行文字的宽度。
值得一提的是,为了保证图像的展示效果,可根据计算出的比例scale同时对图像的高度和宽度进行压缩,以保持图像的纵横比,从而保证的展示效果。
步骤S203:根据所述图像的尺寸以及所述目标文本中的字符的尺寸,计算所述第二文字组件中待展示的第一预设字符的数量,并将所述数量个所述第一预设字符填充至所述第二文字组件中,使得所述第二文字组件的尺寸与所述图像的尺寸相匹配。
在本发明一个实施方式中,由于无法直接获取到第一文字组件中单个字符的尺寸,因此,可通过获取第三文字组件的宽度和/或高度,来确定所述目标文本中的字符的尺寸,其中,所述第三文字组件中填充有一个与所述目标文本中字符尺寸相同的第二预设字符。
由于第三文字组件中仅填充有一个第二预设字符,且第二预设字符的尺寸与目标文本中字符的尺寸相同,而第三文字组件的尺寸(高度和/或宽度)由其填充的第二预设字符的尺寸决定,因此,可通过获取第三文字组件的尺寸来确定目标文本中字符的尺寸。具体地,由于第三文字组件的尺寸由其填充的第二预设字符的字号大小、字体粗细等决定,则为了保证第二预设字符的尺寸与目标文本中字符的尺寸相同,可将第二预设字符的字体和字号设置为与目标文本中字符的字体和字号相同,此第二预设字符可以为“0”或其他任意预设字符。通过在第三文字组件中填充一个与目标文本中的字符的尺寸相同的第二预设字符,然后通过onLayout()方法动态获取第三文字组件中第二预设字符的高度以及宽度,以确定目标文本中一行字符的高度和宽度,目标文本中一行字符的高度可记为markingViewHeight,目标文本中一个字符的宽度可记为preWidth。由此,通过第三文字组件动态获取第二预设字符的宽度和高度,避免在不同的移动设备上相同字体和字号对应不同字符尺寸的问题,从而提高了字符尺寸的准确性。
当横向展示信息时,可根据图片的宽度imageWith(若图片尺寸被调节过,则此处的宽度为调节后的宽度),通过图片的宽度与目标文本中字符的宽度的比值imageWith/preWidth计算得到第二文字组件中待展示的第一预设字符的数量,然后通过(new Array(第一预设字符的数量)).join(‘0’)的方法,将相应数量个第二预设字符拼接成字符串,并将字符串填充至第二文件组件中。
由于第一预设字符的数量为正数,在计算图片的宽度与目标文本中字符的宽度的比值imageWith/preWidth时,可采用Math.ceil()方法向上取整,以保证填充有相应数量个第二预设字符的第二文字组件的宽度不小于图像的宽度,从而通过第二文字组件在第一文字组件中为待展示的图像占据足够的展示空间。
可以理解的是,当采用纵向方式展示信息时,可根据图像的高度与第二预设字符的高度的比值,计算第二文字组件中待展示的第二预设字符的数量。另外,第一预设字符可以相同,也可以不同,例如,在本发明一个实施方式中,第一预设字符设置为“K”,第二预设字符设置为“L”,则第二文字组件嵌套于第一文字组件中,且第二文字组件中填充有相应数量个第一预设字符时,相应的展示效果如图3所示,在图3中,Y表征目标文本中的字符。
值得一提的是,第三文字组件的设置位置可与第二文字组件相匹配,使得第三文字组件重叠于第二文字组件。例如,当第三文字组件中填充有一个与目标文字中字符尺寸相同的第二预设字符时,第二预设字符与第二文字组件中首个第一预设字符相互重叠,如图4所示。在图4中,为了便于区分第二文字组件和第三文字组件,使得第三文字组件相对于第二文字组件向上偏移,这不代表实际的展示效果,而在实际的展示效果中,第三文字组件中的第二预设字符“L”与第二文字组件中首个第一预设字符“K”相互重叠,第三文字组件的上下边缘也分别与第二文字组件的上下边缘相互重叠。
当然,第三文字组件也可重叠于第二组件的其他位置,也就是说,第三组件中的第二预设字符可与第二组件中除首个第一预设字符以外的其他字符相重叠,如图5和图6所示。与图4相似的,在图5和图6中,第三文字组件相对于第二文字组件向上偏移,这不代表实际的展示效果,而仅为了在图中对第二文字组件和第三文字组件进行区分。
另外,第三文字组件还可不与第二文字组件相重叠,如图7所示,第三文字组件拼接于第二文字组件的末尾,此时第三文字组件中的第二预设字符与目标文本中的首个字符相互重叠,为了保证信息的展示效果,需将第二预设字符的颜色设置为透明,使得在信息展示时,用户对第二预设字符无感知,以便于用户查看信息。
另外,第三文字组件还可以嵌套于第二文字组件中,当第三文字组件嵌套于第二文字组件时,由于第三文字组件中填充有第二预设字符,第二预设字符也可为图像占位,则第二组件中填充的第一预设字符的数量为图片的宽度与目标文本中字符的宽度的比值imageWith/preWidth减1,此时第三文字组件与第二文字组件的展示示意图可如图8所示。值得一提的是,当第三文字组件未嵌套于第二文字组件时,第三文字组件可采用绝对布局的方式设置于第一文件组件中,以准确定位第三文字组件在第一组件中的位置。
由上述实施例可知,第一预设字符的主要作用是为图像占位,第二预设字符的主要作用是便于动态获取目标文本中的字符的尺寸,第一预设字符和第二预设字符均不具有实际的展示效果,因此,为了避免第一预设字符和第二预设字符影响图像的展示效果,可将所述第一预设字符和/或所述第二预设字符为透明颜色,则在信息展示时,用户无法感知第一预设字符和第二预设字符的内容,也就不影响图像的展示效果。
步骤S204:将所述图像设置于所述第二文字组件中,以使所述图像覆盖所述第二文字组件中的所述第一预设字符。
在将第二文字组件的尺寸设置为与待展示的图像(若图片尺寸被调节过,则此处指调节尺寸后的图像)相匹配的尺寸之后,可保证图像设置于第一文字组件后,第二文字组件可被图像所遮挡,也就是说,在将图像设置于第一文字组件且该图像的设置位置与第二文字组件相对应时,该图像与第二文字组件相重叠,以遮挡第二文字组件,并展示于第一文字组件中,该图像展示于第一文字组件中的示意图可如图1所示,其中,X表征图片展示的信息,图片信息可展示产品的销售渠道(自营或全球购等),Y表征文字展示的信息,文字信息可展示产品的名称等。第二文字组件中的第一预设字符以及第三文字组件中的第二预设字符重叠于所展示的图像的底层,使得用户不会感知第一预设字符和第二预设字符,提高信息的展示效果,并实现了目标文本中除首行以外的其余行文字的起始位置与首行中的图像的起始位置保持一致的展示效果,从而提高了信息的展示效果。
另外,为了准确定位图像在第二组件中的位置,可采用绝对布局的方式将图像设置于第二文字组件中,也就是说,可通过图片组件加载待展示的图像,然后根据计算好的图像的高度和宽度,以绝对布局的方式将图像设置于第二文字组件中,以同时展示图像和文字,并保证目标文本中除首行以外的其余行文字的起始位置与首行中的图片的起始位置保持一致,提高信息展示效果。
根据本发明实施例的信息展示的方法可以看出,通过在第一文字组件中嵌套第二文字组件的方式,其中,第一文字组件可展示目标文本,第二文字组件可展示与目标文本中的字符尺寸相同的第一预设字符,且第二文字组件中展示的第一预设字符的数量是根据待展示图像的尺寸来确定的,使得第二文字组件的尺寸与待展示的图像相匹配,由此通过相应数量个第一预设字符为待展示的图像在第一文字组件中占位,然后将待展示的图像设置于第二文字组件中,使得所述图像覆盖所述第二文字组件中的所述第一预设字符,而由于第二文字组件嵌套于第一文字组件中,则所述图像展示于所述第一文字组件中。由此,通过第一文字组件与第二文字组件嵌套的方式,利用第二文字组件为待展示的图像在第一文字组件中占位,使得待展示的图像展示于第一文字组件时,可保证目标文本中除首行以外的其余行文字的起始位置与首行中的图像的起始位置保持一致,提高信息展示效果,便于用户查看信息,进而有利于提高用户粘度。
图9是根据本发明实施例的信息展示的装置的主要模块的示意图。
如图9所示,本发明实施例的信息展示的装置900包括:第一展示模块901、获取模块902、处理模块903和第二展示模块904;其中,
所述第一展示模块901,用于利用第一文字组件展示目标文本,并确定所述目标文本中的字符的尺寸;所述第一文字组件中嵌套有第二文字组件,所述第二文字组件用于展示与所述目标文本中的字符尺寸相同的第一预设字符;
所述获取模块902,用于获取待展示的图像,并确定所述图像的尺寸;
所述处理模块903,用于根据所述图像的尺寸以及所述目标文本中的字符的尺寸,计算所述第二文字组件中待展示的第一预设字符的数量,并将所述数量个所述第一预设字符填充至所述第二文字组件中,使得所述第二文字组件的尺寸与所述图像的尺寸相匹配;
所述第二展示模块904,用于将所述图像设置于所述第一文字组件中,以使所述图像覆盖所述第二文字组件中的所述第一预设字符。
在本发明一个实施例中,所述处理模块903,用于获取第三文字组件的宽度和/或高度,以确定所述目标文本中的字符的尺寸,其中,所述第三文字组件中填充有一个与所述目标文本中字符尺寸相同的第二预设字符。
在本发明一个实施例中,所述处理模块903,进一步用于根据所述目标文本中字符的尺寸,调节所述图像的尺寸,以使尺寸调节后的所述图像的尺寸与填充有所述第一预设字符的第二文字组件的尺寸相匹配。
在本发明一个实施例中,所述第二展示模块904,用于以绝对布局的方式将所述图像设置于所述第二文字组件中。
根据本发明实施例的信息展示的装置可以看出,通过在第一文字组件中嵌套第二文字组件的方式,其中,第一文字组件可展示目标文本,第二文字组件可展示与目标文本中的字符尺寸相同的第一预设字符,且第二文字组件中展示的第一预设字符的数量是根据待展示图像的尺寸来确定的,使得第二文字组件的尺寸与待展示的图像相匹配,由此通过相应数量个第一预设字符为待展示的图像在第一文字组件中占位,然后将待展示的图像设置于第二文字组件中,使得所述图像覆盖所述第二文字组件中的所述第一预设字符,而由于第二文字组件嵌套于第一文字组件中,则所述图像展示于所述第一文字组件中。由此,通过第一文字组件与第二文字组件嵌套的方式,利用第二文字组件为待展示的图像在第一文字组件中占位,使得待展示的图像展示于第一文字组件时,可保证目标文本中除首行以外的其余行文字的起始位置与首行中的图像的起始位置保持一致,提高信息展示效果,便于用户查看信息,进而有利于提高用户粘度。
图10示出了可以应用本发明实施例的信息展示的方法或信息展示的装置的示例性***架构1000。
如图10所示,***架构1000可以包括终端设备1001、1002、1003,网络1004和服务器1005。网络1004用以在终端设备1001、1002、1003和服务器1005之间提供通信链路的介质。网络1004可以包括各种连接类型,例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备1001、1002、1003通过网络1004与服务器1005交互,以接收或发送消息等。终端设备1001、1002、1003上可以安装有各种通讯客户端应用,例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。
终端设备1001、1002、1003可以是具有显示屏并且支持网页浏览的各种电子设备,包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
服务器1005可以是提供各种服务的服务器,例如对用户利用终端设备1001、1002、1003所浏览的购物类网站提供支持的后台管理服务器。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理,并将处理结果(例如目标推送信息、产品信息)反馈给终端设备。
需要说明的是,本发明实施例所提供的信息展示的方法一般由服务器1005执行,相应地,信息展示的装置一般设置于服务器1005中。
应该理解,图10中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要,可以具有任意数目的终端设备、网络和服务器。
下面参考图11,其示出了适于用来实现本发明实施例的终端设备的计算机***1100的结构示意图。图11示出的终端设备仅仅是一个示例,不应对本发明实施例的功能和使用范围带来任何限制。
如图11所示,计算机***1100包括中央处理单元(CPU)1101,其可以根据存储在只读存储器(ROM)1102中的程序或者从存储部分1108加载到随机访问存储器(RAM)1103中的程序而执行各种适当的动作和处理。在RAM 1103中,还存储有***1100操作所需的各种程序和数据。CPU 1101、ROM 1102以及RAM 1103通过总线1104彼此相连。输入/输出(I/O)接口1105也连接至总线1104。
以下部件连接至I/O接口1105:包括键盘、鼠标等的输入部分1106;包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分1107;包括硬盘等的存储部分1108;以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分1109。通信部分1109经由诸如因特网的网络执行通信处理。驱动器1110也根据需要连接至I/O接口1105。可拆卸介质1111,诸如磁盘、光盘、磁光盘、半导体存储器等等,根据需要安装在驱动器1110上,以便于从其上读出的计算机程序根据需要被安装入存储部分1108。
特别地,根据本发明公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本发明公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信部分1109从网络上被下载和安装,和/或从可拆卸介质1111被安装。在该计算机程序被中央处理单元(CPU)1101执行时,执行本发明的***中限定的上述功能。
需要说明的是,本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行***、装置或者器件使用或者与其结合使用。而在本发明中,计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:无线、电线、光缆、RF等等,或者上述的任意合适的组合。
附图中的流程图和框图,图示了按照本发明各种实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图或流程图中的每个方框、以及框图或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的***来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本发明实施例中所涉及到的模块可以通过软件的方式实现,也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中,例如,可以描述为:一种处理器包括第一展示模块、获取模块、处理模块和第二展示模块。其中,这些模块的名称在某种情况下并不构成对该模块本身的限定,例如,第一展示模块还可以被描述为“展示目标文本的模块”。
作为另一方面,本发明还提供了一种计算机可读介质,该计算机可读介质可以是上述实施例中描述的设备中所包含的;也可以是单独存在,而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被一个该设备执行时,使得该设备包括:利用第一文字组件展示目标文本,并确定所述目标文本中的字符的尺寸;所述第一文字组件中嵌套有第二文字组件,所述第二文字组件用于展示与所述目标文本中的字符尺寸相同的第一预设字符;获取待展示的图像,并确定所述图像的尺寸;根据所述图像的尺寸以及所述目标文本中的字符的尺寸,计算所述第二文字组件中待展示的第一预设字符的数量,并将所述数量个所述第一预设字符填充至所述第二文字组件中,使得所述第二文字组件的尺寸与所述图像的尺寸相匹配;将所述图像设置于所述第一文字组件中,且所述图像的位置与所述第二文字组件相对应,以使所述图像以重叠于所述第二文字组件的形式展示于所述第一文字组件中。
根据本发明实施例的技术方案,通过在第一文字组件中嵌套第二文字组件的方式,其中,第一文字组件可展示目标文本,第二文字组件可展示与目标文本中的字符尺寸相同的第一预设字符,且第二文字组件中展示的第一预设字符的数量是根据待展示图像的尺寸来确定的,使得第二文字组件的尺寸与待展示的图像相匹配,由此通过相应数量个第一预设字符为待展示的图像在第一文字组件中占位,然后将待展示的图像设置于第一文字组件中,且图像的设置位置与第二文字组件相对应,使得所述图像以重叠于所述第二文字组件的形式展示于所述第一文字组件中。由此,通过第一文字组件与第二文字组件嵌套的方式,利用第二文字组件为待展示的图像在第一文字组件中占位,使得待展示的图像展示于第一文字组件时,可保证目标文本中除首行以外的其余行文字的起始位置与首行中的图像的起始位置保持一致,提高信息展示效果,便于用户查看信息,进而有利于提高用户粘度。
上述具体实施方式,并不构成对本发明保护范围的限制。本领域技术人员应该明白的是,取决于设计要求和其他因素,可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等,均应包含在本发明保护范围之内。
Claims (10)
1.一种信息展示的方法,其特征在于,包括:
利用第一文字组件展示目标文本,并确定所述目标文本中的字符的尺寸;所述第一文字组件中嵌套有第二文字组件,所述第二文字组件用于展示与所述目标文本中的字符尺寸相同的第一预设字符;
获取待展示的图像,并确定所述图像的尺寸;
根据所述图像的尺寸以及所述目标文本中的字符的尺寸,计算所述第二文字组件中待展示的第一预设字符的数量,并将所述数量个所述第一预设字符填充至所述第二文字组件中,使得所述第二文字组件的尺寸与所述图像的尺寸相匹配;
将所述图像设置于所述第二文字组件中,以使所述图像覆盖所述第二文字组件中的所述第一预设字符。
2.根据权利要求1所述的方法,其特征在于,所述确定所述目标文本中的字符的尺寸,包括:
获取第三文字组件的宽度和/或高度,以确定所述目标文本中的字符的尺寸,其中,所述第三文字组件中填充有一个与所述目标文本中字符尺寸相同的第二预设字符。
3.根据权利要求1所述的方法,其特征在于,还包括:
根据所述目标文本中字符的尺寸,调节所述图像的尺寸,以使尺寸调节后的所述图像的尺寸与填充有所述第一预设字符的第二文字组件的尺寸相匹配。
4.根据权利要求1所述的方法,其特征在于,所述将所述图像设置于所述第二文字组件中,包括:
以绝对布局的方式将所述图像设置于所述第二文字组件中。
5.根据权利要求2所述的方法,其特征在于,
所述第一预设字符和/或所述第二预设字符为透明颜色。
6.一种信息展示的装置,其特征在于,包括:第一展示模块、获取模块、处理模块和第二展示模块;其中,
所述第一展示模块,用于利用第一文字组件展示目标文本,并确定所述目标文本中的字符的尺寸;所述第一文字组件中嵌套有第二文字组件,所述第二文字组件用于展示与所述目标文本中的字符尺寸相同的第一预设字符;
所述获取模块,用于获取待展示的图像,并确定所述图像的尺寸;
所述处理模块,用于根据所述图像的尺寸以及所述目标文本中的字符的尺寸,计算所述第二文字组件中待展示的第一预设字符的数量,并将所述数量个所述第一预设字符填充至所述第二文字组件中,使得所述第二文字组件的尺寸与所述图像的尺寸相匹配;
所述第二展示模块,用于将所述图像设置于所述第二文字组件中,以使所述图像覆盖所述第二文字组件中的所述第一预设字符。
7.根据权利要求6所述的装置,其特征在于,
所述处理模块,用于获取第三文字组件的宽度和/或高度,以确定所述目标文本中的字符的尺寸,其中,所述第三文字组件中填充有一个与所述目标文本中字符尺寸相同的第二预设字符。
8.根据权利要求6所述的装置,其特征在于,
所述处理模块,进一步用于根据所述目标文本中字符的尺寸,调节所述图像的尺寸,以使尺寸调节后的所述图像的尺寸与填充有所述第一预设字符的第二文字组件的尺寸相匹配。
9.一种信息展示的电子设备,其特征在于,包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-5中任一所述的方法。
10.一种计算机可读介质,其上存储有计算机程序,其特征在于,所述程序被处理器执行时实现如权利要求1-5中任一所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201911142479.1A CN112825079B (zh) | 2019-11-20 | 2019-11-20 | 一种信息展示的方法及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201911142479.1A CN112825079B (zh) | 2019-11-20 | 2019-11-20 | 一种信息展示的方法及装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112825079A true CN112825079A (zh) | 2021-05-21 |
CN112825079B CN112825079B (zh) | 2024-04-05 |
Family
ID=75906292
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201911142479.1A Active CN112825079B (zh) | 2019-11-20 | 2019-11-20 | 一种信息展示的方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112825079B (zh) |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20130195315A1 (en) * | 2012-01-26 | 2013-08-01 | Qualcomm Incorporated | Identifying regions of text to merge in a natural image or video frame |
CN104361312A (zh) * | 2014-10-16 | 2015-02-18 | 北京捷通华声语音技术有限公司 | 一种对图像进行字符识别的方法和装置 |
CN109640148A (zh) * | 2017-10-09 | 2019-04-16 | 武汉斗鱼网络科技有限公司 | 一种通过文本框展示文本内容的方法及装置 |
CN109978972A (zh) * | 2019-03-20 | 2019-07-05 | 珠海天燕科技有限公司 | 一种图片中的文字编辑的方法及装置 |
-
2019
- 2019-11-20 CN CN201911142479.1A patent/CN112825079B/zh active Active
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20130195315A1 (en) * | 2012-01-26 | 2013-08-01 | Qualcomm Incorporated | Identifying regions of text to merge in a natural image or video frame |
CN104361312A (zh) * | 2014-10-16 | 2015-02-18 | 北京捷通华声语音技术有限公司 | 一种对图像进行字符识别的方法和装置 |
CN109640148A (zh) * | 2017-10-09 | 2019-04-16 | 武汉斗鱼网络科技有限公司 | 一种通过文本框展示文本内容的方法及装置 |
CN109978972A (zh) * | 2019-03-20 | 2019-07-05 | 珠海天燕科技有限公司 | 一种图片中的文字编辑的方法及装置 |
Also Published As
Publication number | Publication date |
---|---|
CN112825079B (zh) | 2024-04-05 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN103605502B (zh) | 表单页面显示方法及服务器 | |
CN103959281A (zh) | 用于将第三方内容与在线文档签名相关联的方法 | |
AU2016277770B2 (en) | Use of bloom filters to simplify dynamic font augmentation and subsetting | |
US10943270B1 (en) | Scalable native in-stream advertising for mobile applications and websites | |
US10628876B2 (en) | Website shopping system and shopping method thereof | |
US20190139128A1 (en) | Search machine with dynamically updated flag on graphical slider | |
US20240143898A1 (en) | Content typesetting method and apparatus, computer device, and storage medium | |
EP4379597A1 (en) | Text typesetting | |
US10268355B2 (en) | User interface design system | |
CN112486482A (zh) | 一种页面展示方法和装置 | |
CN107330087B (zh) | 页面文件生成方法和装置 | |
CN110941401A (zh) | 一种打印方法和装置 | |
CN114756228A (zh) | 页面处理方法、装置、设备及存储介质 | |
CN112825079B (zh) | 一种信息展示的方法及装置 | |
CN113282852A (zh) | 编辑网页的方法和装置 | |
US20220326901A1 (en) | Data display | |
US9767079B1 (en) | Serving expandable content items | |
CN114611031A (zh) | 数字滚动显示方法、装置、设备及介质 | |
CN113705190A (zh) | 一种文本处理方法、装置及设备 | |
CN113051477A (zh) | 内容推荐方法、装置、电子设备和介质 | |
CN113284174A (zh) | 处理图片的方法和装置 | |
CN109710355B (zh) | 基于web交互的tip显示内容处理方法、装置及电子设备 | |
CN114510311B (zh) | 页面适配显示方法、计算设备及存储介质 | |
CN109739595B (zh) | 基于web交互的tip显示内容处理方法、装置及电子设备 | |
CN112580314A (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 |