HTML5 Canvas实现自动换行和竖排文本

文章转自：https://dandelioncloud.cn/article/details/1529086574952464386/

Canvas的渣渣API不支持自动换行和竖排，找了一下没有满意的解决方案，只好自己写一个了。

方法1：根据文字尺寸计算在哪换行

1. // 画个框用来调试
2. const DEBUG = true
4. // 画文本，支持多行、自动换行、竖排文字
5. function drawText (ctx, text, x, y, width, height, hasStroke = false, isVertical = false) {
6. if (DEBUG) {
7. let [oldLineWidth, oldStrokeStyle] = [ctx.lineWidth, ctx.strokeStyle];
8. [ctx.lineWidth, ctx.strokeStyle] = [1, 'red']
9. ctx.strokeRect(x, y, width, height);
10. [ctx.lineWidth, ctx.strokeStyle] = [oldLineWidth, oldStrokeStyle]
11. }
13. if (!isVertical) {
14. drawTextHorizontal(ctx, text, x, y, width, height, hasStroke)
15. } else {
16. drawTextVertical(ctx, text, x, y, width, height, hasStroke)
17. }
18. }
20. // 画横排文本，垂直居中，可以垂直溢出
21. function drawTextHorizontal (ctx, text, x, y, width, height, hasStroke = false) {
22. let oldBaseLine = ctx.textBaseline
23. ctx.textBaseline = 'hanging'
24. let lineHeight = parseInt(ctx.font) // ctx.font必须以'XXpx'开头
26. // 计算每一行
27. let lines = []
28. let curLine = ''
29. for (let char of text) {
30. let nextLine = curLine + char
31. if (char === '\n' || ctx.measureText(nextLine).width > width) {
32. lines.push(curLine)
33. curLine = char === '\n' ? '' : char
34. } else {
35. curLine = nextLine
36. }
37. }
38. lines.push(curLine)
40. // 逐行画文本
41. let lineY = y + (height - lineHeight * lines.length) / 2
42. for (let line of lines) {
43. let lineX
44. if (ctx.textAlign === 'center') {
45. lineX = x + width / 2
46. } else if (ctx.textAlign === 'right') {
47. lineX = x + width
48. } else {
49. lineX = x
50. }
51. if (hasStroke) {
52. ctx.strokeText(line, lineX, lineY, width)
53. }
54. ctx.fillText(line, lineX, lineY, width)
55. lineY += lineHeight
56. }
58. ctx.textBaseline = oldBaseLine
59. }
61. // 画竖排文本，从右到左，水平居中，可以水平溢出
62. function drawTextVertical (ctx, text, x, y, width, height, hasStroke = false) {
63. let [oldAlign, oldBaseLine] = [ctx.textAlign, ctx.textBaseline];
64. [ctx.textAlign, ctx.textBaseline] = ['center', 'middle']
65. let lineWidth = parseInt(ctx.font) // ctx.font必须以'XXpx'开头
67. // 计算每个字符的尺寸信息
68. let charInfo = []
69. for (let char of text) {
70. let cInfo = {
71. char: char,
72. needsRotation: needsRotation(char) // 中日韩文字不用旋转
73. }
74. if (cInfo.needsRotation) {
75. [cInfo.width, cInfo.height] = [lineWidth, ctx.measureText(char).width]
76. } else {
77. [cInfo.width, cInfo.height] = [ctx.measureText(char).width, lineWidth]
78. }
79. charInfo.push(cInfo)
80. }
82. // 计算每一列
83. let lineInfo = []
84. let curLine = []
85. let curLineHeight = 0
86. for (let info of charInfo) {
87. if (info.char === '\n' || curLineHeight + info.height > height) {
88. lineInfo.push({
89. charInfo: curLine,
90. height: curLineHeight
91. })
92. curLine = info.char === '\n' ? [] : [info]
93. curLineHeight = info.height
94. } else {
95. curLine.push(info)
96. curLineHeight += info.height
97. }
98. }
99. lineInfo.push({
100. charInfo: curLine,
101. height: curLineHeight
102. })
104. // 逐字画文本
105. let lineX = x + (width + lineWidth * lineInfo.length) / 2 - lineWidth / 2 // 列中心的坐标
106. for (let lInfo of lineInfo) {
107. let charY // 字符顶端的坐标
108. if (oldAlign === 'center') {
109. charY = y + (height - lInfo.height) / 2
110. } else if (oldAlign === 'right') { // 这里右对齐视为底端对齐，左对齐视为顶端对齐
111. charY = y + height - lInfo.height
112. } else {
113. charY = y
114. }
116. // 画一列文本
117. for (let cInfo of lInfo.charInfo) {
118. ctx.translate(lineX, charY + cInfo.height / 2)
119. if (cInfo.needsRotation) {
120. ctx.rotate(90 * Math.PI / 180)
121. }
122. // 画一个字符
123. if (hasStroke) {
124. ctx.strokeText(cInfo.char, 0, 0)
125. }
126. ctx.fillText(cInfo.char, 0, 0)
127. ctx.setTransform(1, 0, 0, 1, 0, 0)
128. charY += cInfo.height
129. }
130. lineX -= lineWidth
131. }
133. [ctx.textAlign, ctx.textBaseline] = [oldAlign, oldBaseLine]
134. }
136. // 需要旋转的Unicode码范围，基本上是CJK文字
137. const NO_ROTATION_RANGE = [
138. [0x2E80, 0x2FEF],
139. [0x3040, 0x9FFF],
140. [0xAC00, 0xD7FF],
141. [0xF900, 0xFAFF],
142. [0x1D300, 0x1D35F],
143. [0x20000, 0x2FA1F]
144. ]
146. function needsRotation (char) {
147. let codePoint = char.codePointAt(0)
148. for (let [lowerBound, upperBound] of NO_ROTATION_RANGE) {
149. if (lowerBound <= codePoint && codePoint <= upperBound) {
150. return false
151. }
152. }
153. return true
154. }

效果

方法2：利用SVG图片的foreignObject嵌入CSS排版

这个方法不知道为什么竖排文本每列只有一个字，所以我就不用了，CSS真是玄学…

1. async function drawText (ctx, text, x, y, width, height, hasStroke = false, isVertical = false) {
2. let div = document.createElement('div')
3. div.innerText = text
4. let parentSize = DEBUG ? 'calc(100% - 2px)' : '100%'
5. div.style = `
6. word-wrap: break-word;
7. word-break: break-all;
9. font: ${ctx.font};
11. text-align: ${isVertical ? 'left' : ctx.textAlign};
12. ${isVertical ? 'height' : 'width'}: ${parentSize};
13. position: relative;
14. ${isVertical ? `right: 50%; transform: translateX(50%);` : `top: 50%; transform: translateY(-50%);`}
15. ${isVertical ? 'writing-mode: vertical-rl;' : ''}
16. ${isVertical ? 'float: right;' : ''}
18. color: ${ctx.fillStyle};
19. ${hasStroke ? `text-shadow: 0 1px ${ctx.strokeStyle}, 1px 0 ${ctx.strokeStyle}, -1px 0 ${ctx.strokeStyle}, 0 -1px ${ctx.strokeStyle};` : ''}
21. ${DEBUG ? 'border: 1px solid red;' : ''}
22. `
23. let bodyStyle = `
24. margin: 0;
25. overflow: hidden;
26. width: ${parentSize};
27. height: ${parentSize};
28. ${DEBUG ? 'border: 1px solid blue;' : ''}
29. `
30. let svg = `
31. <svg xmlns="http://www.w3.org/2000/svg">
32. <foreignObject width="${width}px" height="${height}px"> <body xmlns="http://www.w3.org/1999/xhtml" style="${bodyStyle}"> ${div.outerHTML} </body> </foreignObject> </svg> ` if (DEBUG) { console.log(svg) } return new Promise((resolve, reject) => { let img = new window.Image() img.onload = () => { ctx.drawImage(img, x, y) resolve() } img.onerror = () => { reject(new Error(`Failed to load the image: ${img.src}`)) } img.src = `data:image/svg+xml;charset=utf-8,${svg}` }) }

效果

这个我设置成了溢出部分隐藏