@kamilic-pkg/canvas-textbox

canvas-textbox

带自动断句换行的 canvas 文本展示框，主要解决中文文本在 canvas 上不能进行换行的问题。

Usage

npm i @kamilic-pkg/canvas-textbox;

let tb = new Ctextbox();
let canvas = document.getElementById("mycanvas");
tb.put("hello world", {
    fontFamily: "Arial",
    fontSize: 22,
    lineHeight: 1.5,
    color: "rgba(0, 255, 0, 1)",
    strokeWidth: 1,
    strokeColor: "rgba(0, 0, 255, 1)"
}).put("   - append to ", {
    fontFamily: "Arial",
    fontSize: 28,
    lineHeight: 1.5,
    strokeWidth: 1,
    backgroundColor: 'red',
    strokeColor: "rgba(0, 0, 255, 1)"
}).put("tototototo next line --------------> ", {
    fontFamily: "Arial",
    fontSize: 28,
    lineHeight: 1.5,
    strokeWidth: 1,
    backgroundColor: 'red',
    strokeColor: "rgba(0, 0, 255, 1)"
}).line("a long text a long text a long text a long text a long text a long text a long text ", {
    backgroundColor: "rgba(0, 255, 0, 1)",
}).draw(canvas, {
    top: 50,
    left: 50,
    maxWidth: 500,
    autoHeight: true
});

API

Ctextbox.put(text, conf)

插入一个文字图层。

PARAMS	TYPE	DESCRIPTIONS	required
text	String	输入文本	true
conf	TextLayerConfigure	该行文本的样式设置	true

Return

Ctextbox

Ctextbox.line(text, conf)

插入一个文字段落图层，与 put 方法相比，这个会做强制换行处理。

PARAMS	TYPE	DESCRIPTIONS	required
text	String	输入文本	true
conf	TextLayerConfigure	该行文本的样式设置	true

Return

Ctextbox

Ctextbox.draw(canvasOrCtx, conf)

插入一个文字图层。

PARAMS	TYPE	DESCRIPTIONS	required
canvasOrCtx	HTMLCanvasElement | CanvasRenderingContext2D	输入文本	true
conf	RendererConfig	该行文本的样式设置	true

Return

Ctextbox

Classes

TextLayerConfigure

type

Object

properties

PARAMS	TYPE	DESCRIPTIONS
fontSize	Number	字体大小
fontFamily	String	字体类型
lineHeight	String | Number	行高，支持倍数（数字类型）与像素（需传入形如 '12px' 的字符串)
color	String	css 支持的颜色表达字符串
strokeWidth	Number	canvas 的 strokeWidth 属性，文字边框宽度
strokeColor	String	canvas 的 strokeColor 属性，文字边框的颜色
backgroundColor	String	文字背景颜色
forceNextLine	Boolean	该图层是否强制换行

RendererConfig

type

Object

properties

PARAMS	TYPE	DESCRIPTIONS
width	Number	绘图框宽度
top	Number	绘图框所在位置
left	Number	绘图框所在位置
autoHeight	Number	根据算出来的画布高度来设定 canvas 高度

Demo

你可以查看 ./test/index.html 中的小例子