一种智能电视UI文本框的文字实现方法及装置制造方法及图纸

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

Text realizing method and device for smart TV UI text box

The application discloses a method and a device, to achieve a smart TV UI text box text which obtained in the first Canvas tag on the position coordinates of the cursor in the text box and the text in the text box length; when receiving a text input text into instruction or instruction, if the text in the text box the length is less than the length of the text box, the cursor position coordinate drawing input text or insert text, and each input or insert a text, the text cursor position coordinates and the length of the text box with preset character length; when receiving text delete instructions, delete the text in the position coordinate of the cursor, and each delete a text, text and cursor position in the text box length minus preset character length; when the text input, insert or delete after the cursor Draw the cursor at the position coordinate. The method provided in this application simplifies the UI architecture, does not affect the display of the UI, and is conducive to the development and maintenance.

【技术实现步骤摘要】
一种智能电视UI文本框的文字实现方法及装置
本申请涉及智能电视UI领域，尤其涉及一种智能电视UI文本框的文字实现方法及装置。
技术介绍
Canvas标签是HTML5标准中的一个新标签，它提供的绘图API(ApplicationProgrammingInterface，应用程序编程接口)能够直接调用GPU(GraphicsProcessingUnit，图形处理器)资源，实现图像绘制的硬件加速，提高网页的图像处理性能。随着HTML5标准逐渐成为主流，在智能电视UI领域，开发商开始采用基于Canvas标签的方式开发智能电视UI。用户在使用UI过程中，需要在UI上进行文字输入、删除等文字处理操作。如图1所示，图1为现有技术中文本框的实现方式示意图，在图1中，开发者在开发UI时，将UI对象绘制在Canvas层，使用input标签实现文本框的功能：创建一个input标签，并将input标签添加到DOM(DocumentObjectModel，文档对象模型)层中，控制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的维护。因此，本申请公开的方法中，在本文档来自技高网...

【技术保护点】
一种智能电视UI文本框的文字实现方法，其特征在于，包括：获取在第一Canvas标签上文本框中光标的位置坐标以及所述文本框中当前文字的长度；当接收到文字输入指令或文字插入指令后，如果所述文本框中当前文字的长度小于所述文本框的长度，则在所述光标的位置坐标处绘制输入文字或插入文字，以及每输入或插入一个文字，所述光标的位置坐标和所述文本框中文字的长度加预设字符长度；当接收到文字删除指令后，在所述光标的位置坐标处删除文字，以及每删除一个文字，所述光标的位置坐标和所述文本框中文字的长度减预设字符长度；当文字输入、插入或删除完成后，在所述光标的位置坐标处绘制所述光标。

【技术特征摘要】
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所述的方...

【专利技术属性】
技术研发人员：李蕾，
申请(专利权)人：青岛海信电器股份有限公司，
类型：发明
国别省市：山东,37