CN107391159A - 一种智能电视ui文本框的文字实现方法及装置 - Google Patents

一种智能电视ui文本框的文字实现方法及装置 Download PDF

Info

Publication number
CN107391159A
CN107391159A CN201710675975.8A CN201710675975A CN107391159A CN 107391159 A CN107391159 A CN 107391159A CN 201710675975 A CN201710675975 A CN 201710675975A CN 107391159 A CN107391159 A CN 107391159A
Authority
CN
China
Prior art keywords
word
cursor
length
text box
canvas
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
Application number
CN201710675975.8A
Other languages
English (en)
Other versions
CN107391159B (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.)
Vidaa Netherlands International Holdings BV
Original Assignee
Qingdao Hisense Electronics 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 Qingdao Hisense Electronics Co Ltd filed Critical Qingdao Hisense Electronics Co Ltd
Priority to CN201710675975.8A priority Critical patent/CN107391159B/zh
Publication of CN107391159A publication Critical patent/CN107391159A/zh
Application granted granted Critical
Publication of CN107391159B publication Critical patent/CN107391159B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

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
    • 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/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • 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/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • 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)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • Databases & Information Systems (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Artificial Intelligence (AREA)
  • Data Mining & Analysis (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本申请公开了一种智能电视UI文本框的文字实现方法及装置，其中，方法包括：获取在第一Canvas标签上文本框中光标的位置坐标以及文本框中当前文字的长度；当接收到文字输入指令或文字插入指令后，如果文本框中当前文字的长度小于文本框的长度，则在光标的位置坐标处绘制输入文字或插入文字，以及每输入或插入一个文字，光标的位置坐标和文本框中文字的长度加预设字符长度；当接收到文字删除指令后，在光标的位置坐标处删除文字，以及每删除一个文字，光标的位置坐标和文本框中文字的长度减预设字符长度；当文字输入、插入或删除完成后，在光标的位置坐标处绘制光标。本申请提供的方法简化UI架构，不影响UI的显示，有利于开发和维护。

Description

一种智能电视UI文本框的文字实现方法及装置
技术领域
本申请涉及智能电视UI领域，尤其涉及一种智能电视UI文本框的文字实现方法及装置。
背景技术
Canvas标签是HTML5标准中的一个新标签，它提供的绘图API(ApplicationProgramming Interface，应用程序编程接口)能够直接调用GPU(Graphics ProcessingUnit，图形处理器)资源，实现图像绘制的硬件加速，提高网页的图像处理性能。随着HTML5标准逐渐成为主流，在智能电视UI领域，开发商开始采用基于Canvas标签的方式开发智能电视UI。
用户在使用UI过程中，需要在UI上进行文字输入、删除等文字处理操作。如图1所示，图1为现有技术中文本框的实现方式示意图，在图1中，开发者在开发UI时，将UI对象绘制在Canvas层，使用input标签实现文本框的功能：创建一个input标签，并将input标签添加到DOM(Document Object Model，文档对象模型)层中，控制input标签在DOM层中的位置与在Canvas层中显示的位置对应。由于DOM层显示在Canvas层的上方，因此，在智能电视的显示屏中，将Canvas层和DOM层叠加在一起后，从视觉上形成在Canvas层的UI上显示文本框。用户可在文本框中输入、删除文字，并建立文字与相应页面的链接。但是，如果打开文字链接的页面时，再次打开的页面重新绘制在Canvas层中，此时，DOM层依然在Canvas层的上方，从而导致input标签无法被覆盖，在视觉上依然可以看到一个文本框。一般情况下，可以通过隐藏input标签或者在DOM层上再增加Canvas层来解决这个问题，但是这样会使UI架构复杂，不利于开发和维护。
因此，为了简化UI架构，可以在Canvas标签上直接绘制文本框，但是，如何在Canvas标签上的文本框中实现文字输入、删除等操作，成为亟需解决的问题。
发明内容
本申请提供了一种智能电视UI文本框的文字实现方法及装置，以解决在Canvas标签上绘制文本框，在文本框实现文字操作。
第一方面，本申请提供了一种智能电视UI文本框的文字实现方法，包括：
获取在第一Canvas标签上文本框中光标的位置坐标以及所述文本框中当前文字的长度；
当接收到文字输入指令或文字插入指令后，如果所述文本框中当前文字的长度小于所述文本框的长度，则在所述光标的位置坐标处绘制输入文字或插入文字，以及每输入或插入一个文字，所述光标的位置坐标和所述文本框中文字的长度加预设字符长度；
当接收到文字删除指令后，在所述光标的位置坐标处删除文字，以及每删除一个文字，所述光标的位置坐标和所述文本框中文字的长度减预设字符长度；
当文字输入、插入或删除完成后，在所述光标的位置坐标处绘制所述光标。
第二方面，本申请还提供了一种智能电视UI文本框的文字实现装置，包括：
获取模块，用于获取在第一Canvas标签上文本框中光标的位置坐标以及所述文本框中当前文字的长度；
第一输入文字和插入文字模块，用于当接收到文字输入指令或文字插入指令后，如果所述文本框中当前文字的长度小于所述文本框的长度，则在所述光标的位置坐标处绘制输入文字或插入文字，以及每输入或插入一个文字，所述光标的位置坐标和所述文本框中文字的长度加预设字符长度；
文字删除模块，用于当接收到文字删除指令后，在所述光标的位置坐标处删除文字，以及每删除一个文字，所述光标的位置坐标和所述文本框中文字的长度减预设字符长度；
光标绘制模块，用于当文字输入、插入或删除完成后，在所述光标的位置坐标处绘制所述光标。
本申请实施例提供的智能电视UI文本框的文字实现方法及装置，包括以下有益效果：
本申请实施例提供的方法中，智能电视基于Canvas标签绘制UI，并在Canvas标签上绘制文本框，由于Canvas标签调用API接口绘制图形和文字，因此，本申请实现了在文本框中进行文字处理。文字处理包括输入文字、插入文字和删除文字，获取在第一Canvas标签上文本框中光标的位置坐标以及文本框中文字的长度；如果接收到文字输入指令或文字插入指令，则判断文本框中当前文字的长度是否小于文本框的长度。由于基于Canvas标签绘制的文本框是一个文本框图形，不具备intput标签自动实现文字动态变化的功能，因此，当文本框中的文字长度超过文本框的长度时，需要动态绘制文本框中文本的变化，所以，在输入文字和插入文字时，需要判断文本框中当前文字的长度与文本框长度的大小关系。
如果文本框中当前文字的长度小于文本框的长度，则直接在光标的位置坐标处绘制输入文字或插入文字即可，并且，没输入一个文字，光标的位置坐标和文本框中文字的长度加1。同理，如果接收到文字删除指令，则在光标的位置坐标处删除文字，以及每删除一个文字，光标的位置坐标和文本框中文字的长度减1。最后，在光标的位置坐标处绘制光标。
由上述描述可知，本申请公开的方法基于Canvas，在Canvas标签上直接绘制文本框，并在文本框中实现文字的输入、插入和删除，不需要在Canvas层上再创建DOM层实现文本框的显示和文字的输入、插入和删除，从而简化UI架构，有利于开发和维护。
附图说明
为了更清楚地说明本申请的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为现有技术中文本框的实现方式示意图；
图2为本申请实施例提供的一种智能电视UI文本框的文字实现方法；
图3为本申请实施例提供的步骤S101的详细流程示意图；
图4为本申请实施例中步骤S104的详细流程示意图；
图5为本申请实施例提供的另一种智能电视UI文本框的文字实现方法；
图6为本申请实施例提供的又一种智能电视UI文本框的文字实现方法；
图7为本申请实施例提供的一种智能电视UI文本框的文字实现装置结构示意图；
图8为本申请实施例提供的光标绘制模块结构示意图；
图9为本申请实施例提供的另一种智能电视UI文本框的文字实现装置结构示意图；
图10为本申请实施例提供的又一种智能电视UI文本框的文字实现装置结构示意图。
具体实施方式
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。
在使用input标签实现文本框中输入文字、插入文字和删除文字的操作时，使用input标签，并将input标签添加到DOM层中，使Input标签在DOM层中的位置与Canvas层中的显示位置对应。DOM层显示在Canvas层的上方，因此，从视觉上形成input标签显示在Canvas层中。但是，当打开另一个页面时，再次打开的页面中的对象重新绘制在Canvas层中，此时，DOM层依然在Canvas层的上方，导致input标签未被覆盖，所以，需要在DOM层上重新创建一个Canvas层，在该Canvas层上绘制再次打开页面的对象，从而覆盖DOM层。
然而，重新建立的Canvas层使UI的架构复杂，后期不利于UI的维护。因此，本申请公开的方法中，在基于Canvas标签开发智能电视UI时，开发者自行开发UI的结构以及所有UI对象的格式、动画等，并将其预设在智能电视的存储器中。在智能电视开机显示UI时，由Canvas标签提供的绘图API根据UI的结构以及所有UI对象的格式、动画等在Canvas标签上绘制UI对象。其中，在智能电视中预设文本框的绘制格式、尺寸等，绘制UI的过程中，在Canvas标签上绘制文本框。
下文中给出在Canvas标签上绘制的文本框中实现文字的输入、插入和删除等操作。参见图2，为本申请实施例提供的一种智能电视UI文本框的文字实现方法。
在步骤S101中，获取在第一Canvas标签上文本框中光标的位置坐标以及文本框中当前文字的长度。
当智能电视开机显示UI页面后，用户可通过遥控器控制焦点选择影视剧或功能，当遥控器将焦点移动到文本框位置时，焦点以光标形式显示，用于指示用户输入文字、插入文字或删除文字的位置。
当遥控器控制焦点移动到文本框时，在文本框中绘制光标，一般情况下，如果文本框中已经有文字，则显示在文字最后。此时，获取在第一Canvas标签上文本框中光标的位置坐标及文本框中当前文字的长度，对光标的位置坐标和文本框中文字的长度进行实施定位和计算。
具体的，参见图3，为本申请实施例提供的步骤S101的详细流程示意图。
在步骤S1011中，获取第一Canvas标签上文本框中第一个文字到光标位置的第一像素长度，以及第一个文字到最后一个文字的第二像素长度。
光标的位置坐标由文字的位置坐标计算得到，本申请实施例中，预设文本框中第一个文字的坐标为(x0,y0),或者文本框的文字的起始位置为(x0,y0)。根据光标在文本框中的位置计算光标的位置坐标，例如，当监测到焦点在文本框中第n个文字上，调用Canvas上下文内置的measureText接口，传入文字第一个字符到光标位置的字符串，从而返回文字的像素长度w。
也就是说，通过measureText接口可得到文本框中第一个文字到光标位置的第一像素长度。
在步骤S1012中，根据第一像素长度确定光标的位置坐标。
在Canvas层上，文本框的每个文字的坐标中，纵坐标不变，横坐标发生改变，因此，计算出第一个文字到光标位置的横坐标差值即为第一像素长度。第一像素长度可由measureText接口得到，因此，将第一个文字的横坐标加上第一像素长度即可得到光标的横坐标。
当通过measureText接口得到第一个文字到光标位置的第一像素长度为w时，光标的位置坐标为(x0+w，y0)。
在步骤S1013中，根据第二像素长度确定文本框中文字的长度。
在文本框中输入文字时，定义文本框中文字的长度为m，通过第一个文字到第二个文字横坐标的差值计算得到第二像素长度，那么第二像素长度即为文本框中文字的长度。在后续文字处理中，只要插入或输入文字，m值均加上预设字符长度，因此，可直接调用m值便可获取。
在获取光标的位置坐标和文本框中文字的长度时的代码由开发人员自行开发，与直接使用input标签不同，使用input标签是可调用接口直接获取input中光标的位置和文字长度。本申请实施例中，在获取到光标的位置坐标和文本框中当前文字的长度后，在后续的文字处理过程中，可实时监测文本框中文字的变化。
在步骤S102中，当接收到文字输入指令或文字插入指令后，如果文本框中当前文字的长度小于所述文本框的长度，则在所述光标的位置坐标处绘制输入文字或插入文字，以及每输入或插入一个文字，所述光标的位置坐标和所述文本框中文字的长度加预设字符长度。其中，当文本框中输入英文字母时，预设字符长度为英文字母的字符长度；当文本框中输入中文字符时，预设字符长度为中文字符长度，即两个字符长度。
当光标在文本框最后一个文字的位置时，如果监测到用户文字输入操作，此时将用户的文字输入操作转化为文字输入指令；当光标在文本框中第一个文字和最后一个文字之间时，如果监测到用户文字输入操作，则将用户的文字输入操作转化为文字插入指令。
由于基于Canvas层的绘制UI的过程中，文本框和文字均是绘制在Canvas层上，文本框的长度有限，所以，在文本框中绘制的文字长度有限。在接收到文字输入指令或文字插入指令后，判断文本框中当前文字的长度是否小于文本框的长度，如果文本框中当前文字的长度小于文本框的长度，则将输入文字或插入文字直接绘制在文本框中光标的位置坐标处，每输入或插入一个文字，则光标的位置坐标和文本框中文字的长度加预设字符长度。
在接收到下一个文字的文字输入指令或文字插入指令后，继续判断文本框中当前文字的长度是否小于文本框的长度，如果文本框中当前文字的长度小于文本框的长度，则继续将文字绘制在文本框中光标的位置坐标处。
在输入文字或插入文字时，调用context.fillText接口，传入光标的位置坐标，将文字绘制在Canvas上光标的位置坐标处。
在步骤S103中，当接收到文字删除指令后，在所述光标的位置坐标处删除文字，以及每删除一个文字，所述光标的位置坐标和所述文本框中文字的长度减预设字符长度。
在步骤S103的基础上，文本框中绘制的是长度不超过文本框长度的文字，如果在文本框中绘制文字的情况下，接收到文字删除指令，则直接在光标的位置坐标处删除文字即可。
用户按压遥控器上的删除按键时，如果监测到用户的删除操作，则将删除操作转化为删除指令，使用Array类型对象的slice接口，传当前光标的位置坐标，对文本框中的文字进行字符删除处理，从而实现文本框中的文字删除操作。每删除一个文字，则将光标的位置坐标和文本框中文字的长度减去预设字符长度。
在步骤S104中，当文字输入、插入或删除完成后，在所述光标的位置坐标处绘制所述光标。
当每次输入文字、插入文字或删除文字后，光标的位置坐标也随着改变，那么就需要重新绘制光标，由于本申请实施例中需要调用Canvas标签中的绘制接口绘制光标，并且使光标闪烁，因此，参见图4，为本申请实施例中步骤S104详细流程示意图。
在步骤S1041中，在所述光标的坐标位置处绘制初始透明度值alpha等于1的光标。
预设光标的初始透明度值alpha等于1，使光标初始绘制在Canvas上时是不透明状态，光标的形状可绘制成竖直直线，也可以根据用户需要绘制成任意形状，另外，光标的颜色也可以为任意的颜色，在此不做具体限定。
在光标的位置坐标处绘制透明度值alpha等于1的光标，如果要实现光标的闪烁，则需要不断改变光标的透明度。
在步骤S1042中，如果所述光标的透明度值alpha等于1，则将所述透明度值alpha减去预设值，直到所述透明度值alpha等于0。
当根据初始透明度值alpha绘制好光标后，判断光标的透明度值alpha，如果光标的透明度值等于1，则，将透明度值alpha减去预设值，知道光标的透明度值alpha等于0，其中，预设值优选设置为0.1。当然，该预设值的大小在此不做具体限定。
从alpha等于1开始不断减去0.1，重复执行10次之后，alpha值等于0，此时，在步骤S1043中，如果所述透明度值alpha等于0，则将所述透明度值alpha加上预设值，直到所述透明度值alpha等于1。
如果光标的透明度值alpha等于0，此时，将透明度值alpha加上预设值，也就是将透明度值alpha加上0.1，重复执行10次，直到透明度值alpha等于1。
不断重复步骤S1042和步骤S1043，使光标由不透明变为透明，再由透明变为不透明，从而实现光标的闪烁。
由上述实施例可知，基于Canvas绘制的文本框中，获取第一Canvas标签上文本框中光标的位置坐标以及文本框中当前文字的长度，并实时监测文本框中当前文字的长度与文本框的长度，如果当前文字的长度小于文本框的长度，则在接收到文字输入指令或文字插入指令后，在光标的位置坐标处直接绘制文字，同样的，在接收到文字删除指令后，在光标的位置坐标处删除文字。另外，在绘制光标过程中，通过不断调整光标的透明度，实现光标的闪烁。因此，本申请实施例中提供的文本框中文字实现方法，不需要使用input标签，也不需要创建DOM层，从而简化UI架构，有利于开发和维护。
参见图5，为本申请实施例提供的另一种智能电视UI文本框的文字实现方法。
在步骤S105中，如果所述文本框中当前文字的长度大于或等于所述文本框的长度，则创建第二Canvas标签。
本申请实施例应用于文本框中当前文字的长度大于或等于文本框的长度的情况。如果文本框中当前文字的长度大于或等于文本框的长度，如果此时继续在光标的位置坐标处绘制文字，则文字会超出文本框外，此时需要对文字进行截取，只显示文字后面的部分。
在基于Canvas绘制文字的过程中，如果直接计算并截取文字的话，文字容易发生变化，在开发过程中还需要维护全文本的字符串。另外，如果正好有半个字符需要隐藏，那么无法截取半个字符，因此，本申请中创建第二Canvas标签，第二Canvas标签起到缓存的作用，并且属于离屏画布，在后台执行绘制动作，而不显示在显示屏上。
document.createElement用于生成UI对象，第二Canvas标签在没有调用addChildNode接口加入到Dom结构之前是不会显示的。
在步骤S106中，将所述文本框中的当前文字和输入文字或插入文字按照文字顺序绘制在所述第二Canvas标签上。
将文本框中当前文字和输入文字，或者将文本框中当前文字和插入文字按照文字的顺序依次绘制在第二Canvas标签上，其中，如果接收到文字输入指令时，文本框中当前文字的长度等于或大于文本框的长度，此时，将文本框中当前文字和输入文字按照文字的顺序绘制在第二Canvas标签上；如果接收到文字插入指令时，文本框中当前文字的长度等于或大于文本框的长度，此时，将插入文字插入光标的位置坐标处后绘制在第二Canvas标签上。
第二Canvas标签的作用是在文本框中的文字超出文本框的长度时，缓存文本框中的文字，将截取超长文字的操作在第二Canvas标签上执行。
在步骤S107中，将绘制在所述第二Canvas标签上的绘制文字转化成图片。
由于Canvas对文字的绘制能力较弱，对图片的绘制能力较强，所以，将绘制在第二Canvas标签上的绘制文字转化成图片，并且，在截取文字的时候，不影响半个字符的截取。
另外，再次执行输入文字、插入文字和删除文字的操作时，也可以在第二Canvas标签中图片的基础上进行输入、插入和删除。
在步骤S108中，由所述图片的最后一个文字开始，向前截取与所述文本框长度相同的文字由所述第二Canvas标签上绘制文字的截取位置开始，截取与所述截取长度相同长度的文字。
将第二Canvas标签中的绘制文字转换成图片格式后，使用图片进行截取，能够实现半个字符的截取。图片的最后一个文字开始，向前截取与文本框长度相同的文字，即可将截取的文字绘制在第一Canvas标签的文本框中。
在步骤S109中，将截取的文字绘制在第一Canvas标签的文本框中，以及光标的位置坐标和文本框中文字的长度不变。
将截取的文字绘制在第一Canvas标签的文本框中，由于截取文字的长度与文本框的长度相同，因此，截取的文字可绘制于整个文本框中。此时，由于在位置坐标处输入或插入文字后使文本框中的文字超长，而超长部分被截取，所以光标的位置坐标不变，文本框中文字的长度依然等于文本框的长度，所以文本框中文字长度也不变。
将截取的文字绘制在第一Canvas标签的文本框中的过程，是一个复制的过程，也就是将在第二Canvas标签上截取的文字复制在第一Canvas标签的文本框中，并非剪切。
由上述实施例可知，如果文本框中文字的长度等于或大于文本框的长度时，通过创建第二Canvas标签，在第二Canvas标签上截取文字，将截取的文字绘制在第一Canvas标签的文本框中，从而实现对于超出文本框长度的文字的绘制。创建的第二Canvas标签属于离屏画布，不影响第一Canvas标签中UI的显示，当再次打开一个页面时，也不影响再次打开的页面的显示。
在上述实施例的基础上，如果再次接收到文字输入指令或文字插入指令时，参见图6，为本申请实施例提供的又一种智能电视UI文本框的文字实现方法。
在步骤S110中，如果接收到文字输入指令或文字插入指令，则根据所述光标在所述第一Canvas标签的文本框中的坐标位置，确定所述光标在所述第二Canvas标签上的坐标位置。
在上述实施例中可知，在第二Canvas标签中绘制的文字转换为图片后再截取，因此，在第一Canvas标签的文本框中的文字是图片格式，所以，在图片格式的文字中无法实现文字输入和文字插入操作。
此时，如果接收到文字输入指令或文字插入指令，则根据光标在第一Canvas标签的文本框中的坐标位置，确定光标在第二Canvas标签上的坐标位置。由于第二Canvas标签中绘制文字的坐标位置与第一Canvas标签中文本框的坐标位置对应，可通过第一Canvas标签中光标在文本框中的文字位置，确定光标在第二Canvas标签上的坐标位置。
在步骤S111中，在所述第二Canvas标签上所述光标的坐标位置处输入文字或插入文字。
例如，可计算在第一Canvas标签的文本框中，光标位置倒数第三个字的位置坐标处，因此，光标在第二Canvas标签上绘制文字的倒数第三个字的位置。如果在该位置坐标处插入文字时，在第二Canvas标签的该位置处插入文字。
此时，在第二Canvas标签上截取文字，并将截取文字重新绘制在第一Canvas标签的文本框中，从而实现在文本框中的文字是图片格式的时候，输入或插入文字。
由上述描述可知，本申请实施例中，对于文本框中的文字是图片格式的情况下，实现文字输入或插入。有效解决基于Canvas实现文本框中文字的输入和插入，简化UI架构，并且不影响第一Canvas标签上UI的显示。
与本申请智能电视UI文本框的文字实现方法相对应，本申请还提供了智能电视UI文本框的文字实现装置。
参见图7，为本申请实施例提供的一种智能电视UI文本框的文字实现装置结构示意图，包括：
获取模块，用于获取在第一Canvas标签上文本框中光标的位置坐标以及文本框中当前文字的长度；第一输入文字和插入文字模块，用于当接收到文字输入指令或文字插入指令后，如果文本框中当前文字的长度小于文本框的长度，则在光标的位置坐标处绘制输入文字或插入文字，以及每输入或插入一个文字，光标的位置坐标和文本框中文字的长度加预设字符长度；文字删除模块，用于当接收到文字删除指令后，在光标的位置坐标处删除文字，以及每删除一个文字，光标的位置坐标和文本框中文字的长度减预设字符长度；光标绘制模块，用于当文字输入、插入或删除完成后，在光标的位置坐标处绘制光标。
其中，参见图8，为本申请实施例提供的光标绘制模块结构示意图，光标绘制模块包括：初始绘制模块，用于在光标的坐标位置处绘制初始透明度值alpha等于1的光标；第一光标绘制模块，用于如果光标的透明度值alpha等于1，则将透明度值alpha减去预设值，直到透明度值alpha等于0；第二光标绘制模块，用于如果透明度值alpha等于0，则将透明度值alpha加上预设值，直到透明度值alpha等于1。
参见图9，为本申请实施例提供的另一种智能电视UI文本框的文字实现装置结构示意图，还包括：Canvas标签创建模块，用于接收判断模块的判断结果，如果文本框中当前文字的长度大于或等于文本框的长度，则创建第二Canvas标签；第一文字绘制模块，用于将文本框中的当前文字和输入文字或插入文字按照文字顺序绘制在第二Canvas标签上；图片转化模块，用于将绘制在第二Canvas标签上的绘制文字转化成图片；第一截取模块，用于由图片的最后一个文字开始，向前截取与文本框长度相同的文字；第二文字绘制模块，用于将截取的文字绘制在第一Canvas标签的文本框中，以及光标的位置坐标和文本框中文字的长度不变。
参见图10，为本申请实施例提供的再一种智能电视UI文本框的文字实现装置结构示意图，还包括：确定模块，用于如果接收到文字插入指令或文字删除指令，则根据光标在所述第一Canvas标签的文本框中的坐标位置，确定光标在所述第二Canvas标签上的坐标位置；第二插入文字和删除文字模块，用于在第二Canvas标签上光标的坐标位置处插入文字或删除文字。
由上述实施例提供的智能电视UI文本框的文字实现装置可知，本装置基于Canvas标签绘制UI，并且在实现UI的文本框中文字的输入、插入和删除时，不需要使用input标签，也不需要创建DOM层，直接在文本框中绘制文字，从而简化UI架构，有利于开发和维护。
本领域技术人员在考虑说明书及实践这里发明的公开后，将容易想到本发明的其它实施方案。本申请旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本发明未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的权利要求指出。
应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求来限制。

Claims (10)

1.一种智能电视UI文本框的文字实现方法，其特征在于，包括：
获取在第一Canvas标签上文本框中光标的位置坐标以及所述文本框中当前文字的长度；
当接收到文字输入指令或文字插入指令后，如果所述文本框中当前文字的长度小于所述文本框的长度，则在所述光标的位置坐标处绘制输入文字或插入文字，以及每输入或插入一个文字，所述光标的位置坐标和所述文本框中文字的长度加预设字符长度；
当接收到文字删除指令后，在所述光标的位置坐标处删除文字，以及每删除一个文字，所述光标的位置坐标和所述文本框中文字的长度减预设字符长度；
当文字输入、插入或删除完成后，在所述光标的位置坐标处绘制所述光标。
2.根据权利要求1所述的方法，其特征在于，所述方法还包括：
如果所述文本框中当前文字的长度大于或等于所述文本框的长度，则创建第二Canvas标签；
将所述文本框中的当前文字和输入文字或插入文字按照文字顺序绘制在所述第二Canvas标签上；
将绘制在所述第二Canvas标签上的绘制文字转化成图片；
由所述图片的最后一个文字开始，向前截取与所述文本框长度相同的文字；
将截取的文字绘制在所述第一Canvas标签的文本框中，以及所述光标的位置坐标和所述文本框中文字的长度不变。
3.根据权利要求2所述的方法，其特征在于，所述方法还包括：
如果接收到文字输入指令或文字插入指令，则根据所述光标在所述第一Canvas标签的文本框中的坐标位置，确定所述光标在所述第二Canvas标签上的坐标位置；
在所述第二Canvas标签上所述光标的坐标位置处输入文字或插入文字。
4.根据权利要求1所述的方法，其特征在于，所述在所述光标的位置坐标处绘制所述光标，包括：
在所述光标的坐标位置处绘制初始透明度值alpha等于1的光标；
如果所述光标的透明度值alpha等于1，则将所述透明度值alpha减去预设值，直到所述透明度值alpha等于0；
如果所述透明度值alpha等于0，则将所述透明度值alpha加上预设值，直到所述透明度值alpha等于1。
5.根据权利要求1所述的方法，其特征在于，所述获取光标在第一Canvas标签上文本框中的位置坐标以及所述文本框中文字的长度，包括：
获取第一Canvas标签上文本框中第一个文字到光标位置的第一像素长度，以及第一个文字到最后一个文字的第二像素长度；
根据所述第一像素长度确定所述光标的位置坐标；
根据所述第二像素长度确定所述文本框中文字的长度。
6.根据权利要求2所述的方法，其特征在于，将第二Canvas标签中的绘制文字转换成图片格式后再截取。
7.一种智能电视UI文本框的文字实现装置，其特征在于，包括：
获取模块，用于获取在第一Canvas标签上文本框中光标的位置坐标以及所述文本框中当前文字的长度；
第一输入文字和插入文字模块，用于当接收到文字输入指令或文字插入指令后，如果所述文本框中当前文字的长度小于所述文本框的长度，则在所述光标的位置坐标处绘制输入文字或插入文字，以及每输入或插入一个文字，所述光标的位置坐标和所述文本框中文字的长度加预设字符长度；
文字删除模块，用于当接收到文字删除指令后，在所述光标的位置坐标处删除文字，以及每删除一个文字，所述光标的位置坐标和所述文本框中文字的长度减预设字符长度；
光标绘制模块，用于当文字输入、插入或删除完成后，在所述光标的位置坐标处绘制所述光标。
8.根据权利要求7所述的装置，其特征在于，还包括：
Canvas标签创建模块，用于接收判断模块的判断结果，如果所述文本框中当前文字的长度大于或等于所述文本框的长度，则创建第二Canvas标签；
第一文字绘制模块，用于将所述文本框中的当前文字和输入文字或插入文字按照文字顺序绘制在所述第二Canvas标签上；
图片转化模块，用于将绘制在所述第二Canvas标签上的绘制文字转化成图片；
第一截取模块，用于由所述图片的最后一个文字开始，向前截取与所述文本框长度相同的文字；
第二文字绘制模块，用于将截取的文字绘制在所述第一Canvas标签的文本框中，以及所述光标的位置坐标和所述文本框中文字的长度不变。
9.根据权利要求8所述的装置，其特征在于，还包括：
确定模块，用于如果接收到文字插入指令或文字删除指令，则根据所述光标在所述第一Canvas标签的文本框中的坐标位置，确定所述光标在所述第二Canvas标签上的坐标位置；
第二插入文字和删除文字模块，用于在所述第二Canvas标签上所述光标的坐标位置处插入文字或删除文字。
10.根据权利要求7所述的装置，其特征在于，所述光标绘制模块，包括：
初始绘制模块，用于在所述光标的坐标位置处绘制初始透明度值alpha等于1的光标；
第一光标绘制模块，用于如果所述光标的透明度值alpha等于1，则将所述透明度值alpha减去预设值，直到所述透明度值alpha等于0；
第二光标绘制模块，用于如果所述透明度值alpha等于0，则将所述透明度值alpha加上预设值，直到所述透明度值alpha等于1。
CN201710675975.8A 2017-08-09 2017-08-09 一种智能电视ui文本框的文字实现方法及装置 Active CN107391159B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710675975.8A CN107391159B (zh) 2017-08-09 2017-08-09 一种智能电视ui文本框的文字实现方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710675975.8A CN107391159B (zh) 2017-08-09 2017-08-09 一种智能电视ui文本框的文字实现方法及装置

Publications (2)

Publication Number Publication Date
CN107391159A true CN107391159A (zh) 2017-11-24
CN107391159B CN107391159B (zh) 2020-10-23

Family

ID=60355347

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710675975.8A Active CN107391159B (zh) 2017-08-09 2017-08-09 一种智能电视ui文本框的文字实现方法及装置

Country Status (1)

Country Link
CN (1) CN107391159B (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110134808A (zh) * 2019-05-22 2019-08-16 北京旷视科技有限公司 图片检索方法、装置、电子设备及存储介质
CN111563371A (zh) * 2020-05-08 2020-08-21 海信电子科技(武汉)有限公司 一种文本生成的方法及设备

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20090259949A1 (en) * 2008-04-15 2009-10-15 Microsoft Corporation Cross-browser rich text editing via a hybrid client-side model
US20160085396A1 (en) * 2014-09-24 2016-03-24 Microsoft Corporation Interactive text preview
CN106250561A (zh) * 2016-08-17 2016-12-21 青岛海信电器股份有限公司 一种基于HTML canvas的焦点框绘制方法及装置
US20170102927A1 (en) * 2015-10-09 2017-04-13 Oracle International Corporation Automated responsive grid-based layout design system
CN107025098A (zh) * 2016-01-29 2017-08-08 北京国双科技有限公司 绘制文本的方法及装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20090259949A1 (en) * 2008-04-15 2009-10-15 Microsoft Corporation Cross-browser rich text editing via a hybrid client-side model
US20160085396A1 (en) * 2014-09-24 2016-03-24 Microsoft Corporation Interactive text preview
CN106716355A (zh) * 2014-09-24 2017-05-24 微软技术许可有限责任公司 交互式文本预览
US20170102927A1 (en) * 2015-10-09 2017-04-13 Oracle International Corporation Automated responsive grid-based layout design system
CN107025098A (zh) * 2016-01-29 2017-08-08 北京国双科技有限公司 绘制文本的方法及装置
CN106250561A (zh) * 2016-08-17 2016-12-21 青岛海信电器股份有限公司 一种基于HTML canvas的焦点框绘制方法及装置

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110134808A (zh) * 2019-05-22 2019-08-16 北京旷视科技有限公司 图片检索方法、装置、电子设备及存储介质
CN110134808B (zh) * 2019-05-22 2020-06-05 北京旷视科技有限公司 图片检索方法、装置、电子设备及存储介质
CN111563371A (zh) * 2020-05-08 2020-08-21 海信电子科技(武汉)有限公司 一种文本生成的方法及设备
CN111563371B (zh) * 2020-05-08 2023-08-11 海信电子科技(武汉)有限公司 一种文本生成的方法及设备

Also Published As

Publication number Publication date
CN107391159B (zh) 2020-10-23

Similar Documents

Publication Publication Date Title
US9477646B2 (en) Procedurally expressing graphic objects for web pages
US7055095B1 (en) Systems and methods for digital document processing
CN107832108A (zh) 3D canvas网页元素的渲染方法、装置及电子设备
CN100451956C (zh) 基于绘图引擎的屏幕显示方法
US7636097B1 (en) Methods and apparatus for tracing image data
MX2008003406A (es) Efectos visuales extensibles en contenido activo en interfaces de usuario.
KR20120054750A (ko) 선택적 디스플레이를 위한 방법 및 장치
WO2017000898A1 (zh) 软件图标显示方法和装置
KR102075111B1 (ko) Ｕｉ 기능 테스트 시스템 및 방법
US9360339B2 (en) Rendering maps with canvas elements
CN111915705A (zh) 图片可视化编辑方法、装置、设备和介质
CN107391159A (zh) 一种智能电视ui文本框的文字实现方法及装置
CN107870703A (zh) 图片全屏展示的方法、系统及终端设备
CN1924794B (zh) 数字文件处理系统、数据处理系统和外围设备
CN108829486A (zh) 一种背景设置方法、装置、设备和存储介质
CN105446676B (zh) 进行大屏显示的方法及装置
US20040107380A1 (en) Screen display processing apparatus, screen display processing method and computer program
CN107391015B (zh) 一种智能平板的控制方法、装置、设备及存储介质
CN113705156A (zh) 字符处理方法及装置
CN112686939A (zh) 景深图像的渲染方法、装置、设备及计算机可读存储介质
WO2023065961A1 (zh) 视频植入方法、装置、设备及计算机可读存储介质
CN103795925A (zh) 一种可交互的主副画面实时渲染的拍照方法
CN102841781A (zh) 基于电子白板的函数曲线的构造方法和系统
CN112001995B (zh) 渲染装置、方法、电子设备及可读存储介质
US10013406B2 (en) Flip-to-edit container

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
CB02 Change of applicant information

Address after: 266555 Qingdao economic and Technological Development Zone, Shandong, Hong Kong Road, No. 218

Applicant after: Hisense Visual Technology Co., Ltd.

Address before: 266555 Qingdao economic and Technological Development Zone, Shandong, Hong Kong Road, No. 218

Applicant before: QINGDAO HISENSE ELECTRONICS Co.,Ltd.

CB02 Change of applicant information
GR01 Patent grant
GR01 Patent grant
TR01 Transfer of patent right

Effective date of registration: 20221019

Address after: 83 Intekte Street, Devon, Netherlands

Patentee after: VIDAA (Netherlands) International Holdings Ltd.

Address before: 266555, No. 218, Bay Road, Qingdao economic and Technological Development Zone, Shandong

Patentee before: Hisense Visual Technology Co., Ltd.

TR01 Transfer of patent right