本發(fā)明涉及計算機(jī)技術(shù)領(lǐng)域，尤其涉及一種繪制文本的方法及裝置。

背景技術(shù)：

畫布(canvas)元素是超文本標(biāo)記語言5.0(hypertextmarkuplanguage5.0，簡稱html5)應(yīng)用中的一個新元素，它用于在網(wǎng)頁上繪制圖形。canvas元素自己沒有繪圖的能力，它是將一個繪圖的api展現(xiàn)給客戶端，使客戶端使用javascript將想要繪制的圖形內(nèi)容繪制到canvas上。另外，通過多種方法也可以將繪制字符、文本，或者將圖像等添加到canvas上。

當(dāng)在一個有限寬度的canvas上繪制文本時，通常是先設(shè)置繪制的起點坐標(biāo)，然后從起點坐標(biāo)開始由左向右將文本一次性繪制到canvas上，由于canvas本身只支持單行繪制，因此當(dāng)需要繪制的文本比較長且單行排列的總長度超過canvas的寬度時，則會根據(jù)canvas的寬度進(jìn)行適當(dāng)?shù)目s小文本以適應(yīng)canvas的寬度。但是，當(dāng)文本過長，并將其縮小到可視的范圍內(nèi)時依然不能將完整的文本繪制在canvas中時，對于超出canvas寬度的部分文本則不會在canvas上繪制，而是將超出的部分省略，而且還可能出現(xiàn)在canvas最右邊可能出現(xiàn)只顯示某個字符的一部分的情況。綜上可以看出，現(xiàn)有的在canvas上繪制文本的方法效果差。

技術(shù)實現(xiàn)要素：

鑒于上述問題，提出了本發(fā)明以便提供一種克服上述問題或者至少部分地解決上述問題的一種繪制文本的方法及裝置。

為解決上述技術(shù)問題，一方面，本發(fā)明提供了一種繪制文本的方法，該方法包括：

在畫布canvas上繪制每一個字符之前，計算當(dāng)前的剩余寬度，所述剩余寬度為canvas寬度減去前一個字符的字符終點橫坐標(biāo)的差值，所述字符終點橫坐標(biāo)為所述前一個字符的字符起點橫坐標(biāo)與所述前一個字符的字符 寬度之和；

判斷所述剩余寬度是否小于待繪制字符的字符寬度；

若所述剩余寬度不小于所述待繪制字符的字符寬度，則在所述前一個字符之后繪制所述待繪制字符；

若所述剩余寬度小于所述待繪制字符的字符寬度，則換行繪制所述待繪制字符。

另一方面，本發(fā)明還提供了一種繪制文本的裝置，該裝置包括：

計算單元，用于在畫布canvas上繪制每一個字符之前，計算當(dāng)前的剩余寬度，所述剩余寬度為canvas寬度減去前一個字符的字符終點橫坐標(biāo)的差值，所述字符終點橫坐標(biāo)為所述前一個字符的字符起點橫坐標(biāo)與所述前一個字符的字符寬度之和；

判斷單元，用于判斷所述剩余寬度是否小于待繪制字符的字符寬度；

第一繪制單元，用于若所述剩余寬度不小于所述待繪制字符的字符寬度，則在所述前一個字符之后繪制所述待繪制字符；

第二繪制單元，用于若所述剩余寬度小于所述待繪制字符的字符寬度，則換行繪制所述待繪制字符。

借由上述技術(shù)方案，本發(fā)明提供的繪制文本的方法及裝置，能夠在畫布canvas上繪制每一個字符之前，首先計算canvas的寬度減去前一個字符的字符終點橫坐標(biāo)的差值得到當(dāng)前canvas的剩余寬度，其中字符終點橫坐標(biāo)為前一個字符的字符起點橫坐標(biāo)與前一個字符的字符寬度之和；然后判斷canvas當(dāng)前剩余寬度是否小于待繪制字符的字符寬度，若剩余寬度不小于待繪制字符的字符寬度，則在前一個字符之后繪制待繪制字符，若剩余寬度小于待繪制字符的字符寬度，則另起一行繪制待繪制的字符。與現(xiàn)有技術(shù)相比，本發(fā)明能夠在canvas上通過逐個繪制字符的方式繪制文本，并在每繪制一個字符之前計算當(dāng)前canvas的剩余寬度，然后判斷剩余寬度是否小于待繪制字符的字符寬度，并根據(jù)判斷的結(jié)果來決定是否進(jìn)行換行繪制待繪制字符，實現(xiàn)了文本的分行繪制，使繪制不再受到canvas寬度的限制，即使是較長的文本也可以正常和完整的繪制到canvas中，展現(xiàn)出更好的繪制效果。

附圖說明

通過閱讀下文優(yōu)選實施方式的詳細(xì)描述，各種其他的優(yōu)點和益處對于本領(lǐng)域普通技術(shù)人員將變得清楚明了。附圖僅用于示出優(yōu)選實施方式的目的，而并不認(rèn)為是對本發(fā)明的限制。而且在整個附圖中，用相同的參考符號表示相同的部件。在附圖中：

圖1示出了本發(fā)明實施例提供的一種繪制文本的方法流程圖；

圖2示出了本發(fā)明實施例提供的另一種繪制文本的方法流程圖；

圖3示出了本發(fā)明實施例提供的一種繪制文本的裝置的組成框圖；

圖4示出了本發(fā)明實施例提供的另一種繪制文本的裝置的組成框圖。

具體實施方式

下面將參照附圖更詳細(xì)地描述本公開的示例性實施例。雖然附圖中顯示了本公開的示例性實施例，然而應(yīng)當(dāng)理解，可以以各種形式實現(xiàn)本公開而不應(yīng)被這里闡述的實施例所限制。相反，提供這些實施例是為了能夠更透徹地理解本公開，并且能夠?qū)⒈竟_的范圍完整的傳達(dá)給本領(lǐng)域的技術(shù)人員。

為解決現(xiàn)有的在canvas上繪制文本的方法效果差的問題，本發(fā)明實施例提供了一種繪制文本的方法，如圖1所示，該方法包括：

101、在canvas上繪制每一個字符之前，計算當(dāng)前的剩余寬度。

在實際canvas的應(yīng)用場景中，為了使用的便捷性，通常會設(shè)置一個通用的canvas，通用的canvas主要是對其屬性的規(guī)定和設(shè)置，包括規(guī)定canvas的寬度、繪制的起點坐標(biāo)等。因此通過javascript在通用canvas上繪制文本之前，首先需要從canvas的屬性中獲取canvas的起點坐標(biāo)，然后從canvas的起點坐標(biāo)開始繪制文本中的字符。

為了使每個字符都能夠完整的繪制到canvas中，因此在每繪制一個字符之前首先需要計算當(dāng)前canvas的剩余寬度。其中剩余寬度為canvas寬度減去前一個字符的字符終點橫坐標(biāo)的差值，且字符終點橫坐標(biāo)為前一個字符的字符起點橫坐標(biāo)與前一個字符的字符寬度之和。需要說明的是canvas寬度是從canvas的屬性中獲取的。

102、判斷剩余寬度是否小于待繪制字符的字符寬度。

在通過計算得到canvas當(dāng)前的剩余寬度之后，就可以判斷待繪制字符是否可以被完整繪制到canvas中了。具體的是通過判斷當(dāng)前剩余寬度是否小于待繪制字符的字符寬度來決定是否待繪制的字符可以被完整的繪制到canvas中。

103、若剩余寬度不小于待繪制字符的字符寬度，則在前一個字符之后繪制待繪制字符。

對于步驟102中的判斷，若判斷結(jié)果為剩余寬度不小于待繪制字符的字符寬度，則表示待繪制的字符能被完整的繪制到canvas中，因此在前一個字符之后繪制待繪制的字符。

104、若剩余寬度小于待繪制字符的字符寬度，則換行繪制待繪制字符。

對于步驟102中的判斷，若判斷結(jié)果為剩余寬度小于待繪制字符的字符寬度，則表示待繪制的字符不能被完整的繪制到canvas中，因此需要換行進(jìn)行繪制待繪制的字符。

按照上述步驟101到104的步驟逐個繪制文本中的字符，直到文本中所有的字符被繪制完為止。

本實施例提供的繪制文本的方法，能夠在畫布canvas上繪制每一個字符之前，首先計算canvas的寬度減去前一個字符的字符終點橫坐標(biāo)的差值得到當(dāng)前canvas的剩余寬度，其中字符終點橫坐標(biāo)為前一個字符的字符起點橫坐標(biāo)與前一個字符的字符寬度之和；然后判斷canvas當(dāng)前剩余寬度是否小于待繪制字符的字符寬度，若剩余寬度不小于待繪制字符的字符寬度，則在前一個字符之后繪制待繪制字符，若剩余寬度小于待繪制字符的字符寬度，則另起一行繪制待繪制的字符。與現(xiàn)有技術(shù)相比，本實施例能夠在canvas上通過逐個繪制字符的方式繪制文本，并在每繪制一個字符之前計算當(dāng)前canvas的剩余寬度，然后判斷剩余寬度是否小于待繪制字符的字符寬度，并根據(jù)判斷的結(jié)果來決定是否進(jìn)行換行繪制待繪制字符，實現(xiàn)了文本的分行繪制，使繪制不再受到canvas寬度的限制，即使是較長的文本也可以正常和完整的繪制到canvas中，展現(xiàn)出更好的繪制效果。

進(jìn)一步的，作為對圖1所示實施例的細(xì)化及擴(kuò)展，本發(fā)明還提供了另一實施例。如圖2所示，該實施例中繪制文本的方法包括：

201、在另一canvas上繪制待繪制字符。

在另一canvas上繪制待繪制字符是為了獲取待繪制字符的字符寬度和字符高度，因為只根據(jù)字符本身設(shè)置的大小，比如字符設(shè)置為三號黑體，不能夠精確計算出其在canvas中所占的寬度和高度。獲取待繪制字符的字符寬度和字符高度是為后面判斷待繪制字符是否需要繪制到下一行的必要準(zhǔn)備。

需要說明的是另一canvas是在html文檔的body節(jié)點中添加的一個新canvas，該canvas的寬度和高度足夠繪制下要繪制的字符。

202、通過遍歷另一canvas上所有像素點的數(shù)據(jù)，確定待繪制字符的字符寬度以及待繪制字符的字符高度。

當(dāng)在另一canvas上繪制完待繪制的字符時，遍歷另一canvas上所有像素點的數(shù)據(jù)，即所有像素點的坐標(biāo)，然后確定待繪制字符的字符寬度和待繪制字符的字符高度。具體的確定過程為：逐行地遍歷所有像素點，并在遍歷所有像素點時，將與提前設(shè)置的繪制待繪制字符的顏色相同的像素點的坐標(biāo)提取出來；然后將所有提取出的像素點的坐標(biāo)中橫坐標(biāo)的最大值確定為待繪制字符的字符寬度，將所有提取出的像素點的坐標(biāo)中縱坐標(biāo)的最大值確定為待繪制字符的高度。

203、在canvas上繪制每一個字符之前，計算當(dāng)前的剩余寬度。

剩余寬度為canvas寬度減去前一個字符的字符終點橫坐標(biāo)的差值，字符終點橫坐標(biāo)為前一個字符的字符起點橫坐標(biāo)與前一個字符的字符寬度之和。其中字符的字符寬度就是由步驟202的方法得到的，每一個字符的起點橫坐標(biāo)就是上一個字符的終點橫坐標(biāo)，而第一個字符的起點橫坐標(biāo)是canvas的起點坐標(biāo)的橫坐標(biāo)，其中canvas的起點坐標(biāo)的獲取方式與圖1步驟101中獲取canvas的起點坐標(biāo)的獲取方式是相同的。

204、判斷剩余寬度是否小于待繪制字符的字符寬度。

本步驟的實現(xiàn)方式與圖1步驟102的實現(xiàn)方式相同，此處不再贅述。

205、若剩余寬度不小于待繪制字符的字符寬度，則在前一個字符之后繪制待繪制字符。

本步驟的實現(xiàn)方式與圖1步驟103的實現(xiàn)方式相同，此處不再贅述。

206、若剩余寬度小于待繪制字符的字符寬度，則換行繪制待繪制字符。

換行繪制待繪制字符包括：

首先，確定換行后繪制待繪制字符的起點坐標(biāo)。本實施例中是將canvas的起點坐標(biāo)的橫坐標(biāo)作為換行后繪制待繪制字符的起點坐標(biāo)的橫坐標(biāo)，即每一行的起點的橫坐標(biāo)是相同的；而換行后繪制待繪制字符的起點坐標(biāo)的縱坐標(biāo)是根據(jù)上一行中繪制的所有字符的字符高度來確定的，具體的是將上一行的起點坐標(biāo)的縱坐標(biāo)與上一行中繪制的所有字符的字符高度的最大值之和作為換行后繪制待繪制字符的起點坐標(biāo)的縱坐標(biāo)，其中第一行的起點坐標(biāo)的縱坐標(biāo)是確定的。

然后，從換行后繪制待繪制字符的起點坐標(biāo)開始，繪制待繪制字符。

進(jìn)一步的，當(dāng)字符間存在字符間隔時，圖1步驟101以及圖2步驟203中涉及到的前一個字符的字符終點橫坐標(biāo)為前一個字符的字符起點橫坐標(biāo)、前一個字符的字符寬度以及字符間隔三者之和。當(dāng)每行間存在行間距時，圖2步驟206中的換行后繪制待繪制字符的起點坐標(biāo)的縱坐標(biāo)為上一行的起點坐標(biāo)的縱坐標(biāo)、上一行中繪制的所有字符的字符高度的最大值以及行間距三者之和。另外圖2步驟206中的換行后的起點坐標(biāo)的橫坐標(biāo)也可以設(shè)置為別的值，并且canvas中每一行的起點的橫坐標(biāo)可以各不相同，在實際的應(yīng)用中可以根據(jù)實際的需要自由設(shè)定。

進(jìn)一步的，作為對上述圖1和圖2所示方法的實現(xiàn)，本發(fā)明實施例另一實施例還提供了一種繪制文本的裝置，用于對上述圖1和圖2所示的方法進(jìn)行實現(xiàn)。該裝置實施例與前述方法實施例對應(yīng)，為便于閱讀，本裝置實施例不再對前述方法實施例中的細(xì)節(jié)內(nèi)容進(jìn)行逐一贅述，但應(yīng)當(dāng)明確，本實施例中的裝置能夠?qū)?yīng)實現(xiàn)前述方法實施例中的全部內(nèi)容。如圖3所示，該裝置包括：計算單元31、判斷單元32、第一繪制單元33及第二繪制單元34。

計算單元31，用于在畫布canvas上繪制每一個字符之前，計算當(dāng)前的剩余寬度，剩余寬度為canvas寬度減去前一個字符的字符終點橫坐標(biāo)的差值，字符終點橫坐標(biāo)為前一個字符的字符起點橫坐標(biāo)與前一個字符的字符寬度之和；

判斷單元32，用于判斷剩余寬度是否小于待繪制字符的字符寬度；

第一繪制單元33，用于若剩余寬度不小于待繪制字符的字符寬度，則在前一個字符之后繪制待繪制字符；

第二繪制單元34，用于若剩余寬度小于待繪制字符的字符寬度，則換行繪制待繪制字符。

進(jìn)一步的，如圖4所示，第二繪制單元34包括：

確定模塊341，用于確定換行后繪制待繪制字符的起點坐標(biāo)；

繪制模塊342，用于從換行后繪制待繪制字符的起點坐標(biāo)開始，繪制待繪制字符。

進(jìn)一步的，確定模塊341用于：

將canvas的起點坐標(biāo)的橫坐標(biāo)作為換行后繪制待繪制字符的起點坐標(biāo)的橫坐標(biāo)，根據(jù)上一行中繪制的所有字符的字符高度確定換行后繪制待繪制字符的起點坐標(biāo)的縱坐標(biāo)。

進(jìn)一步的，如圖4所示，裝置進(jìn)一步包括：

第三繪制單元35，用于在計算當(dāng)前的剩余寬度之前，在另一canvas上繪制待繪制字符，另一canvas是在超文本標(biāo)記語言html文檔中添加的一個新canvas；

確定單元36，用于通過遍歷另一canvas上所有像素點的數(shù)據(jù)，確定待繪制字符的字符寬度以及待繪制字符的字符高度。

進(jìn)一步的，當(dāng)字符間存在字符間隔時，計算單元31中的前一個字符的字符終點橫坐標(biāo)為前一個字符的字符起點橫坐標(biāo)、前一個字符的字符寬度以及字符間隔三者之和。

本實施例提供的繪制文本的裝置，能夠在畫布canvas上繪制每一個字符之前，首先計算canvas的寬度減去前一個字符的字符終點橫坐標(biāo)的差值得到當(dāng)前canvas的剩余寬度，其中字符終點橫坐標(biāo)為前一個字符的字符起點橫坐標(biāo)與前一個字符的字符寬度之和；然后判斷canvas當(dāng)前剩余寬度是否小于待繪制字符的字符寬度，若剩余寬度不小于待繪制字符的字符寬度，則在前一個字符之后繪制待繪制字符，若剩余寬度小于待繪制字符的字符寬度，則另起一行繪制待繪制的字符。與現(xiàn)有技術(shù)相比，本實施例能夠在 canvas上通過逐個繪制字符的方式繪制文本，并在每繪制一個字符之前計算當(dāng)前canvas的剩余寬度，然后判斷剩余寬度是否小于待繪制字符的字符寬度，并根據(jù)判斷的結(jié)果來決定是否進(jìn)行換行繪制待繪制字符，實現(xiàn)了文本的分行繪制，使繪制不再受到canvas寬度的限制，即使是較長的文本也可以正常和完整的繪制到canvas中，展現(xiàn)出更好的繪制效果。

所述繪制文本裝置包括處理器和存儲器，上述計算單元31、判斷單元32、第一繪制單元33及第二繪制單元34等均作為程序單元存儲在存儲器中，由處理器執(zhí)行存儲在存儲器中的上述程序單元來實現(xiàn)相應(yīng)的功能。

本申請還提供了一種計算機(jī)程序產(chǎn)品，當(dāng)在數(shù)據(jù)處理設(shè)備上執(zhí)行時，適于執(zhí)行初始化有如下方法步驟的程序代碼：在畫布canvas上繪制每一個字符之前，計算當(dāng)前的剩余寬度，所述剩余寬度為canvas寬度減去前一個字符的字符終點橫坐標(biāo)的差值，所述字符終點橫坐標(biāo)為所述前一個字符的字符起點橫坐標(biāo)與所述前一個字符的字符寬度之和；判斷所述剩余寬度是否小于待繪制字符的字符寬度；若所述剩余寬度不小于所述待繪制字符的字符寬度，則在所述前一個字符之后繪制所述待繪制字符；若所述剩余寬度小于所述待繪制字符的字符寬度，則換行繪制所述待繪制字符。

本領(lǐng)域內(nèi)的技術(shù)人員應(yīng)明白，本申請的實施例可提供為方法、系統(tǒng)、或計算機(jī)程序產(chǎn)品。因此，本申請可采用完全硬件實施例、完全軟件實施例、或結(jié)合軟件和硬件方面的實施例的形式。而且，本申請可采用在一個或多個其中包含有計算機(jī)可用程序代碼的計算機(jī)可用存儲介質(zhì)(包括但不限于磁盤存儲器、cd-rom、光學(xué)存儲器等)上實施的計算機(jī)程序產(chǎn)品的形式。

本申請是參照根據(jù)本申請實施例的方法、設(shè)備(系統(tǒng))、和計算機(jī)程序產(chǎn)品的流程圖和/或方框圖來描述的。應(yīng)理解可由計算機(jī)程序指令實現(xiàn)流程圖和/或方框圖中的每一流程和/或方框、以及流程圖和/或方框圖中的流程和/或方框的結(jié)合?？商峁┻@些計算機(jī)程序指令到通用計算機(jī)、專用計算機(jī)、嵌入式處理機(jī)或其他可編程數(shù)據(jù)處理設(shè)備的處理器以產(chǎn)生一個機(jī)器，使得通過計算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備的處理器執(zhí)行的指令產(chǎn)生用于實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方 框中指定的功能的裝置。

這些計算機(jī)程序指令也可存儲在能引導(dǎo)計算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備以特定方式工作的計算機(jī)可讀存儲器中，使得存儲在該計算機(jī)可讀存儲器中的指令產(chǎn)生包括指令裝置的制造品，該指令裝置實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能。

這些計算機(jī)程序指令也可裝載到計算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備上，使得在計算機(jī)或其他可編程設(shè)備上執(zhí)行一系列操作步驟以產(chǎn)生計算機(jī)實現(xiàn)的處理，從而在計算機(jī)或其他可編程設(shè)備上執(zhí)行的指令提供用于實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能的步驟。

在一個典型的配置中，計算設(shè)備包括一個或多個處理器(cpu)、輸入/輸出接口、網(wǎng)絡(luò)接口和內(nèi)存。

存儲器可能包括計算機(jī)可讀介質(zhì)中的非永久性存儲器，隨機(jī)存取存儲器(ram)和/或非易失性內(nèi)存等形式，如只讀存儲器(rom)或閃存(flashram)。存儲器是計算機(jī)可讀介質(zhì)的示例。

計算機(jī)可讀介質(zhì)包括永久性和非永久性、可移動和非可移動媒體可以由任何方法或技術(shù)來實現(xiàn)信息存儲。信息可以是計算機(jī)可讀指令、數(shù)據(jù)結(jié)構(gòu)、程序的模塊或其他數(shù)據(jù)。計算機(jī)的存儲介質(zhì)的例子包括，但不限于相變內(nèi)存(pram)、靜態(tài)隨機(jī)存取存儲器(sram)、動態(tài)隨機(jī)存取存儲器(dram)、其他類型的隨機(jī)存取存儲器(ram)、只讀存儲器(rom)、電可擦除可編程只讀存儲器(eeprom)、快閃記憶體或其他內(nèi)存技術(shù)、只讀光盤只讀存儲器(cd-rom)、數(shù)字多功能光盤(dvd)或其他光學(xué)存儲、磁盒式磁帶，磁帶磁磁盤存儲或其他磁性存儲設(shè)備或任何其他非傳輸介質(zhì)，可用于存儲可以被計算設(shè)備訪問的信息。按照本文中的界定，計算機(jī)可讀介質(zhì)不包括暫存電腦可讀媒體(transitorymedia)，如調(diào)制的數(shù)據(jù)信號和載波。

以上僅為本申請的實施例而已，并不用于限制本申請。對于本領(lǐng)域技術(shù)人員來說，本申請可以有各種更改和變化。凡在本申請的精神和原理之內(nèi)所作的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本申請的權(quán)利要求范 圍之內(nèi)。