CN109740141A - A method of typesetting beautification is carried out to text based on canvas - Google Patents
A method of typesetting beautification is carried out to text based on canvas Download PDFInfo
- Publication number
- CN109740141A CN109740141A CN201910024144.3A CN201910024144A CN109740141A CN 109740141 A CN109740141 A CN 109740141A CN 201910024144 A CN201910024144 A CN 201910024144A CN 109740141 A CN109740141 A CN 109740141A
- Authority
- CN
- China
- Prior art keywords
- text
- typesetting
- canvas
- length
- length value
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 21
- 238000010422 painting Methods 0.000 claims abstract description 27
- 230000015572 biosynthetic process Effects 0.000 claims description 6
- 230000001186 cumulative effect Effects 0.000 claims description 4
- 238000007689 inspection Methods 0.000 claims description 4
- 239000000203 mixture Substances 0.000 claims description 4
- 230000006798 recombination Effects 0.000 claims description 4
- 238000005215 recombination Methods 0.000 claims description 4
- 238000005516 engineering process Methods 0.000 abstract description 3
- 238000011161 development Methods 0.000 abstract description 2
- 230000000694 effects Effects 0.000 description 5
- 230000003796 beauty Effects 0.000 description 2
- 230000000052 comparative effect Effects 0.000 description 2
- 238000012827 research and development Methods 0.000 description 1
Abstract
The present invention discloses a kind of method for carrying out typesetting beautification to text based on canvas, belongs to web development technologies field, comprising steps of S1, selecting painting canvas to be processed, and to needing the text of typesetting to separate by paragraph, each bout length is calculated；The size of the length value of text one layout region in S2, each bout length value of comparison and the painting canvas, if bout length value is less than the length value of text one layout region in the painting canvas, text typesetting is carried out by the original mode of canvas, if bout length value is less than the length value of text one layout region in the painting canvas, according to changing one's profession, rule carries out text typesetting；It solves because text typesetting is limited in canvas, when causing text typesetting unreasonable, and then leading to webpage design, picture and text typesetting aesthetics is inadequate, the ropy problem of webpage design.
Description
Technical field
The present invention relates to web development technologies fields, carry out typesetting beautification to text based on canvas more particularly to one kind
Method.
Background technique
Canvas is the newly-increased component of HTML5, it, can be various in painted on top with JavaScript just as one piece of curtain
Chart, animation etc..There is no the age of Canvas, drawing can only realize that the page must not have to JavaScript by Flash plug-in unit
It is interacted with Flash.There is Canvas, we just do not need Flash again, directly draw using JavaScript completion
System.One Canvas defines the rectangle frame of a specified size, we can arbitrarily draw within this range.
When drawing picture using canvas in web research and development (such as programming automatic generation poster picture), canvas is to text
Type-setting mode it is very simple, i.e., when drawing sufficiently long text on the painting canvas of fixed length and width, canvas can from left to right will be literary
This arrangement cannot change one's profession, this will lead to text it is too long when can be shown on painting canvas without can completely beyond painting canvas.Especially
It is different from traditional office software due to carrying out picture and text arrangement in canvas for the webpage used in mobile device,
The powerful performance that platform where traditional office software can rely on it is given, can calculate the width spacing of text, in turn in real time
The position of adjustment text in real time.And arrange for the canvas picture and text on webpage, because of the limitation of webpage performance, cannot accomplish certainly
The position of the dynamic text of adjustment in real time.
There are also algorithms in the prior art to solve the problems, such as text typesetting in canvas, but there are still many not perfect
Place, such as: 1. continuous numbers and English copy mothers will not separate because of changing one's profession；2. last line number of words does not process；
3. leading punct will not will not be in wardrobe in end of line, FollowingPunct；It is unreasonable that the presence of these problems will lead to text typesetting, no
Beauty, and then when leading to webpage design, picture and text typesetting aesthetics is inadequate, and webpage design is of poor quality.Though and traditional office software
Text typesetting can be so solved the problems, such as automatically, but it cannot be used directly in webpage design.
Summary of the invention
To solve the above-mentioned problems, the present invention provides a kind of method for carrying out typesetting beautification to text based on canvas, solution
It has determined because text typesetting is limited in canvas, when causing text typesetting unreasonable, and then leading to webpage design, picture and text typesetting beauty
Sight degree is inadequate, the ropy problem of webpage design.
For this purpose, the technical solution adopted by the present invention is that:
A kind of method carrying out typesetting beautification to text based on canvas is provided, method includes the following steps:
S1, painting canvas to be processed is selected, and to needing the text of typesetting to separate by paragraph, it is long that each paragraph is calculated
Degree；
The size of the length value of text one layout region in S2, each bout length value of comparison and the painting canvas, if bout length
Value is less than the length value of text one layout region in the painting canvas, text typesetting is carried out by the original mode of canvas, if paragraph is long
Angle value is less than the length value of text one layout region in the painting canvas, and according to changing one's profession, rule carries out text typesetting.
Further, in order to enable draw text can meet normal text typesetting form, be easy to reading and browsing, and
It is more attractive.The rule of changing one's profession are as follows: at the last one position of certain a line, the leading punct symbol turns leading punct symbol
To next line；FollowingPunct symbol at first position of certain a line of non-first trip, do not change one's profession by the FollowingPunct symbol；The Chinese
Word enters a new line automatically, and English word or continuous number can only integrally change one's profession；When last line only shows one or two of character in order to prevent
Unsightly, the number of words of last line is not less than 4 Chinese character length, when less than 4 Chinese character length, is guaranteeing last line total length
In the case of length less than row second from the bottom, the text of mobile row second from the bottom a line to the end, to the last a line is not less than 4
A Chinese character length；When English word or continuous number length are more than the length of a line, automatic cutting goes to extra part, and plus province
Slightly symbol.
Further, carrying out the concrete methods of realizing of text typesetting according to the rule of changing one's profession are as follows:
S21, the text of each paragraph is divided into block: text inspection one by one, a Chinese character are one piece, English word or company
Continuous number is one piece, leading punct and one piece of block composition behind, and the block of FollowingPunct and the front forms one piece, such as:
[Chinese] [word] [314] [" Chinese] [word ,] [$ 100.] etc.
Used herein piece, an only simple quantifier, for describing different forms during splicing text.
Block can also change other quantifiers into, such as: it sticks together, heap etc..
The block formation multiline text of S22, each paragraph of recombination: add up block one by one, when the length value of cumulative block is greater than described
In painting canvas when the length value of text one layout region, the first row is formed, continuation adds up one by one from next BOB(beginning of block), the second row is formed,
And so on, until a paragraph forms multiline text.
Using the technical program the utility model has the advantages that
Compared with prior art, the method for the present invention can beautify the typesetting pattern for the text drawn on canvas, with changing one's profession
Mode shown longer word content, improve the readability for the text drawn on canvas, especially handled it is preposition,
FollowingPunct etc. keeps webpage design effect more preferable, is easy to reading and browsing.
Detailed description of the invention
Fig. 1 is the step flow chart that block is generated in the embodiment of the present invention；
Fig. 2 is the step flow chart that multiline text is generated in the embodiment of the present invention；
Fig. 3 is the effect picture of the embodiment of the present invention；
Fig. 4 is the effect picture of comparative example of the invention；
Fig. 5 is the entire Web page interfacial effect figure of the embodiment of the present invention；
Fig. 6 is the entire Web page interfacial effect figure of another embodiment of the invention.
Specific embodiment
To make the objectives, technical solutions, and advantages of the present invention clearer, right in the following with reference to the drawings and specific embodiments
The present invention is further elaborated.
Embodiment 1
In the present embodiment, as shown in Fig. 1~3 and 5, a method of typesetting beautification is carried out to text based on canvas,
Method includes the following steps:
S1, painting canvas to be processed is selected, and to needing the text of typesetting to separate by paragraph, it is long that each paragraph is calculated
Degree；
In mobile phone web pages design, the text of typesetting is needed are as follows: " The font size is selected in the
appropriate range and adapts according to the number of word.”
The size of the length value of text one layout region in S2, each bout length value of comparison and the painting canvas, if bout length
Value is less than the length value of text one layout region in the painting canvas, text typesetting is carried out by the original mode of canvas, if paragraph is long
Angle value is less than the length value of text one layout region in the painting canvas, and according to changing one's profession, rule carries out text typesetting.
The rule of changing one's profession are as follows: leading punct symbol is at the last one position of certain a line, the leading punct symbol
Go to next line；FollowingPunct symbol at first position of certain a line of non-first trip, do not change one's profession by the FollowingPunct symbol；
Chinese character enters a new line automatically, and English word or continuous number can only integrally change one's profession；The number of words of last line is not less than 4 Chinese character length,
When less than 4 Chinese character length, when guaranteeing that last line total length is less than the length of row second from the bottom, movement is second from the bottom
Capable text a line to the end, to the last a line is not less than 4 Chinese character length；English word or continuous number length are more than one
When capable length, automatic cutting goes to extra part, and adds ellipsis.
The concrete methods of realizing of text typesetting is carried out according to the rule of changing one's profession are as follows:
S21, the text of each paragraph is divided into block: text inspection one by one, a Chinese character are one piece, English word or company
Continuous number is one piece, leading punct and one piece of block composition behind, and the block of FollowingPunct and the front forms one piece；
The block formation multiline text of S22, each paragraph of recombination: add up block one by one, and when being added to N+1 block, add up block
When length value W is greater than the length value L 0 of text one layout region in the painting canvas, 1~N block forms the first row, and resetting W is 0, after
It is continuous cumulative from N+1 block, the second row is formed, and so on, until a paragraph formation multiline text, complete to change one's profession.
Embodiment 2
In the present embodiment, as shown in Fig. 1~3 and 6, a method of typesetting beautification is carried out to text based on canvas,
Method includes the following steps:
S1, painting canvas to be processed is selected, and to needing the text of typesetting to separate by paragraph, it is long that each paragraph is calculated
Degree；
In mobile phone web pages design, needing the text of typesetting is Chinese text as shown in Figure 6.
The size of the length value of text one layout region in S2, each bout length value of comparison and the painting canvas, if bout length
Value is less than the length value of text one layout region in the painting canvas, text typesetting is carried out by the original mode of canvas, if paragraph is long
Angle value is less than the length value of text one layout region in the painting canvas, and according to changing one's profession, rule carries out text typesetting.
The rule of changing one's profession are as follows: leading punct symbol is at the last one position of certain a line, the leading punct symbol
Go to next line；FollowingPunct symbol at first position of certain a line of non-first trip, do not change one's profession by the FollowingPunct symbol；
Chinese character enters a new line automatically, and English word or continuous number can only integrally change one's profession；The number of words of last line is not less than 4 Chinese character length,
When less than 4 Chinese character length, when guaranteeing that last line total length is less than the length of row second from the bottom, movement is second from the bottom
Capable text a line to the end, to the last a line is not less than 4 Chinese character length；English word or continuous number length are more than one
When capable length, automatic cutting goes to extra part, and adds ellipsis.
The concrete methods of realizing of text typesetting is carried out according to the rule of changing one's profession are as follows:
S21, the text of each paragraph is divided into block: text inspection one by one, a Chinese character are one piece, English word or company
Continuous number is one piece, leading punct and one piece of block composition behind, and the block of FollowingPunct and the front forms one piece；
The block formation multiline text of S22, each paragraph of recombination: add up block one by one, and when being added to N+1 block, add up block
When length value W is greater than the length value L 0 of text one layout region in the painting canvas, 1~N block forms the first row, and resetting W is 0, after
It is continuous cumulative from N+1 block, the second row is formed, and so on, until a paragraph formation multiline text, complete to change one's profession.
Comparative example 1:
As shown in figure 4, to the text for needing typesetting are as follows: " The font size is selected in the
Appropriate range and adapts according to the number of word. ", it is original by canvas
Mode carries out text typesetting.
The basic principles, main features and advantages of the present invention have been shown and described above.The technology of the industry
Personnel are it should be appreciated that the present invention is not limited to the above embodiments, and the above embodiments and description only describe this
The principle of invention, without departing from the spirit and scope of the present invention, various changes and improvements may be made to the invention, these changes
Change and improvement all fall within the protetion scope of the claimed invention.The claimed scope of the invention by appended claims and its
Equivalent thereof.
Claims (3)
1. a kind of method for carrying out typesetting beautification to text based on canvas, which comprises the following steps:
S1, painting canvas to be processed is selected, and to needing the text of typesetting to separate by paragraph, each bout length is calculated；
The size of the length value of text one layout region in S2, each bout length value of comparison and the painting canvas, if bout length value is small
In the length value of text one layout region in the painting canvas, text typesetting is carried out by the original mode of canvas, if bout length value
Less than the length value of text one layout region in the painting canvas, according to changing one's profession, rule carries out text typesetting.
2. the method according to claim 1, wherein the rule of changing one's profession are as follows: leading punct symbol is in certain a line
The last one position when, the leading punct symbol goes to next line；FollowingPunct symbol non-first trip certain a line
When one position, the FollowingPunct symbol is not changed one's profession；Chinese character enters a new line automatically, and English word or continuous number can only integrally turn
Row；The number of words of last line is not less than 4 Chinese character length, when less than 4 Chinese character length, is less than in guarantee last line total length
In the case of the length of row second from the bottom, the text of mobile row second from the bottom a line to the end, to the last a line is not less than 4 Chinese
Word length；When English word or continuous number length are more than the length of a line, automatic cutting goes to extra part, and adds omission mark
Number.
3. according to the method described in claim 2, it is characterized in that, carrying out the specific reality of text typesetting according to the rule of changing one's profession
Existing method are as follows:
S21, the text of each paragraph is divided into block: text inspection one by one, a Chinese character are one piece, English word or consecutive numbers
Word is one piece, and leading punct forms one piece with block behind, one piece of the block composition of FollowingPunct and the front；
The block formation multiline text of S22, each paragraph of recombination: add up block one by one, when the length value of cumulative block is greater than the painting canvas
When the length value of interior text one layout region, the first row is formed, continuation adds up one by one from next BOB(beginning of block), the second row is formed, with this
Analogize, until a paragraph forms multiline text.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910024144.3A CN109740141A (en) | 2019-01-10 | 2019-01-10 | A method of typesetting beautification is carried out to text based on canvas |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910024144.3A CN109740141A (en) | 2019-01-10 | 2019-01-10 | A method of typesetting beautification is carried out to text based on canvas |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109740141A true CN109740141A (en) | 2019-05-10 |
Family
ID=66364358
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910024144.3A Pending CN109740141A (en) | 2019-01-10 | 2019-01-10 | A method of typesetting beautification is carried out to text based on canvas |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109740141A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112307713A (en) * | 2020-10-27 | 2021-02-02 | 广州朗国电子科技有限公司 | Automatic text typesetting method and system based on Android system |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1416077A (en) * | 2002-12-05 | 2003-05-07 | 北京北大方正电子有限公司 | Method for lining up character layout by using hand-held device |
| CN102081600A (en) * | 2011-01-25 | 2011-06-01 | 珠海全志科技有限公司 | E-book typesetting method and e-book typesetting system |
| CN105260352A (en) * | 2015-09-20 | 2016-01-20 | 杭州电子科技大学 | Automatic typesetting method for streaming text |
-
2019
- 2019-01-10 CN CN201910024144.3A patent/CN109740141A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1416077A (en) * | 2002-12-05 | 2003-05-07 | 北京北大方正电子有限公司 | Method for lining up character layout by using hand-held device |
| CN102081600A (en) * | 2011-01-25 | 2011-06-01 | 珠海全志科技有限公司 | E-book typesetting method and e-book typesetting system |
| CN105260352A (en) * | 2015-09-20 | 2016-01-20 | 杭州电子科技大学 | Automatic typesetting method for streaming text |
Non-Patent Citations (1)
| Title |
|---|
| ZHANGXINXU: "canvas文本绘制自动换行、字间距、竖排等实现", 《HTTP://WWW.ZHANGXINXU.COM/WORDPRESS/?P=7362》 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112307713A (en) * | 2020-10-27 | 2021-02-02 | 广州朗国电子科技有限公司 | Automatic text typesetting method and system based on Android system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8941663B2 (en) | Method and device for rendering user interface font | |
| US10210144B2 (en) | Creation and display of a webpage with alternative layouts for different webpage widths | |
| CN105975576B (en) | Terminal content adaptive display method and device and terminal | |
| US9507520B2 (en) | Touch-based reorganization of page element | |
| US20130219263A1 (en) | Web site design system integrating dynamic layout and dynamic content | |
| CN100561415C (en) | A kind of method and device of adjusting webpage intermediate hurdles frame | |
| WO2015196822A1 (en) | Method and device for adapting webpage to screen layout | |
| CN105912336A (en) | Multi-screen adaptive method for mobile terminal front-end development | |
| CN108710601A (en) | A kind of text display method and its equipment, storage medium, electronic equipment | |
| CN104915186B (en) | A kind of method and apparatus making the page | |
| CN111309671B (en) | Method and device for exporting PDF (Portable document Format) from web report and storage medium | |
| JP2022160662A (en) | Character recognition method, device, apparatus, storage medium, smart dictionary pen, and computer program | |
| CN111694493B (en) | Webpage screenshot method, computer equipment and readable storage medium | |
| CN115988170B (en) | Method and device for clearly displaying English characters in real-time video combined screen in cloud conference | |
| CN109783810A (en) | A kind of text handling method, device and computer readable storage medium | |
| US20090119577A1 (en) | Method and Arrangement in a Display System | |
| CN106446139A (en) | Webpage content extracting method and device | |
| CN109740141A (en) | A method of typesetting beautification is carried out to text based on canvas | |
| CN109308146B (en) | Character string self-adaptive segmentation display method and system based on control attributes | |
| CN103970723A (en) | Electronic document screen display method based on image detecting and cutting | |
| EP2637109A1 (en) | Method for improving rendering speed of browser page | |
| CN106776527B (en) | Electronic book data display method and device and terminal equipment | |
| CN104536947A (en) | Layout document processing method and device | |
| CN105791524A (en) | Method and device for adjusting page font | |
| CN104778733B (en) | A kind of drafting of electric power simulation drawing based on webpage and display methods |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190510 |
|
| RJ01 | Rejection of invention patent application after publication |