canvas-multiline
v1.0.0
Published
为canvas ctx扩展多行文本的绘制，支持对英文单词的宽度进行的解析
Downloads
5
Maintainers
wenlunReadme
说明：canvas-multiline支持绘制文本时，按指定的最大宽度自动换行，并能解析文本中的"\n"换行符。同时，canvas-multiline支持对英文单词的宽度进行解析。
使用
- 浏览器端
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script src="../dist/canvas-multiline.min.js"></script>
</body>
</html>- npm 模块开发，请先执行命令：npm install -S canvas-multiline
import 'canvas-multiline'
...🌰例子
- 1.普通的英文短句
let ctx = canvas.getContext("2d");
ctx.font = "18px Arial";
ctx.textBaseline = "top";
let text = `Her voice was so sweet as it broke the hypnotic trance we were all caught in, "Mom, let's run through the rain." she said.`
ctx.strokeRect(0, 0, 160, 500)
ctx.fillMultilineText(text, 0, 0, 160);- 2.存在"\n"换行符的英文短句
let ctx = canvas.getContext("2d");
ctx.font = "18px Arial";
ctx.textBaseline = "top";
//文本中存在"\n"换行符
let text = `Her \nvoice \nwas so sweet as it broke the hypnotic trance we were all caught in, "Mom, let's run through the rain." she said.`
ctx.strokeRect(0, 0, 160, 500)
ctx.fillMultilineText(text, 0, 0, 160);- 3.中文短句
let ctx = canvas.getContext("2d");
ctx.font = "18px Arial";
ctx.textBaseline = "top";
//中文
let text = `生命没有意义，我来到这个世界上，只为了再一次聆听那曾被判决的声音，也许对你们来说，没有任何的意义，但对我来说，就是生命中最大的意义。`
ctx.strokeRect(0, 0, 160, 500)
ctx.fillMultilineText(text, 0, 0, 160);方法&参数
1. multilineText(type, text, x, y, maxWidth, verticalSpacing)
说明：此方法通过指定type填充或描边文本。
|参数|说明|默认值| |-|-|-| |type|可选值:'fill' | 'stroke'，fill填充文本,stroke描边文本|-| |text|要绘制的文本|-| |x|文本区域左上角x坐标|-| |y|文本区域左上角y坐标|-| |maxWidth|文本区域的最大宽度，若文本超过最大宽度，会自动换行|-| |verticalSpacingh|文字竖直方向的间距|0|
2. fillMultilineText(text, x, y, maxWidth, verticalSpacing)
说明：此方法填充一个指定最大宽度的文本
|参数|说明|默认值| |-|-|-| |text|要绘制的文本|-| |x|文本区域左上角x坐标|-| |y|文本区域左上角y坐标|-| |maxWidth|文本区域的最大宽度，若文本超过最大宽度，会自动换行|-| |verticalSpacingh|文字竖直方向的间距|0|
3. strokeMultilineText(text, x, y, maxWidth, verticalSpacing)
说明：此方法描边一个指定最大宽度的文本
|参数|说明|默认值| |-|-|-| |text|要绘制的文本|-| |x|文本区域左上角x坐标|-| |y|文本区域左上角y坐标|-| |maxWidth|文本区域的最大宽度，若文本超过最大宽度，会自动换行|-| |verticalSpacingh|文字竖直方向的间距|0|