Text

参考 SVG text，支持 Bitmap Font、MSDF、Emoji、双向文本等特性。

• 使用 Bitmap Font 绘制文本
• 使用 MSDF 绘制文本
• 绘制 Emoji
• 绘制双向文字
• 使用 HarfBuzz 绘制
• 使用 Opentype.js 绘制
• Physical Text

const text = new Text({
    x: 100,
    y: 100,
    content: 'Hello, World!',
    fontFamily: 'Arial',
    fontSize: 20,
    fontWeight: 'normal',
});

$icCanvas = call(() => {
    return document.createElement('ic-canvas');
});

text = call(() => {
    const { Canvas, Text } = Core;
    const text = new Text({
        x: 300,
        y: 100,
        content: 'Hello, World!\n你好，世界！🌞🌛',
        fontFamily: 'Arial',
        fontSize: 20,
        fontWeight: 'normal',
    });
    return text;
});

call(() => {
    const { Canvas } = Core;
    $icCanvas.parentElement.style.position = 'relative';

    const gui = new GUI({
        container: $icCanvas.parentElement,
    });
    const config = {
        fill: '#000000',
        fontSize: 20,
        fontWeight: 'normal',
        fontStyle: 'normal',
        fontVariant: 'normal',
        letterSpacing: 0,
        textAlign: 'left',
        textBaseline: 'alphabetic',
    };
    gui.addColor(config, 'fill').onChange((fill) => {
        text.fill = fill;
    });
    gui.add(config, 'fontSize', 0, 80, 1).onChange((fontSize) => {
        text.fontSize = fontSize;
    });
    gui.add(config, 'fontWeight', ['normal', 'bold']).onChange((fontWeight) => {
        text.fontWeight = fontWeight;
    });
    gui.add(config, 'fontStyle', ['normal', 'italic']).onChange((fontStyle) => {
        text.fontStyle = fontStyle;
    });
    gui.add(config, 'fontVariant', ['normal', 'small-caps']).onChange(
        (fontVariant) => {
            text.fontVariant = fontVariant;
        },
    );
    gui.add(config, 'letterSpacing', -10, 10, 0.1).onChange((letterSpacing) => {
        text.letterSpacing = letterSpacing;
    });
    gui.add(config, 'textAlign', [
        'left',
        'center',
        'right',
        'start',
        'end',
    ]).onChange((textAlign) => {
        text.textAlign = textAlign;
    });
    gui.add(config, 'textBaseline', [
        'alphabetic',
        'hanging',
        'middle',
        'ideographic',
        'bottom',
        'top',
    ]).onChange((textBaseline) => {
        text.textBaseline = textBaseline;
    });
    $icCanvas.addEventListener('ic-ready', (e) => {
        const canvas = e.detail;
        canvas.appendChild(text);
    });
});

x

文本的 X 轴坐标，参考 x。

y

文本的 Y 轴坐标，参考 y。

content

文本内容，SVG 中作为 <text> 元素的 textContent 属性。

fontFamily

文本字体，参考 fontFamily。

fontSize

文本字体大小，参考 fontSize。

fontWeight

文本字体粗细，参考 fontWeight。

fontStyle

文本字体样式，参考 fontStyle。

fontVariant

文本字体变体，参考 fontVariant。

letterSpacing

文本字间距，参考 letterSpacing。

textAlign

文本对齐方式，参考 textAlign。

type CanvasTextAlign = 'center' | 'end' | 'left' | 'right' | 'start';

textBaseline

文本基线，参考 textBaseline。

type CanvasTextBaseline =
    | 'alphabetic'
    | 'bottom'
    | 'hanging'
    | 'ideographic'
    | 'middle'
    | 'top';

lineHeight

文本行高，参考 lineHeight。

leading

文本行间距，参考 leading。

bitmapFont

文本位图字体。示例：

• 使用 Bitmap Font 绘制文本
• 使用 MSDF 绘制文本

bitmapFontKerning

文本位图字体是否启用字间距。

esdt

文本是否启用 ESDT 生成，否则使用 EDT。前者人工痕迹更少，后者性能更高。

bidiChars

获取处理后的双向文本，只读。示例：绘制双向文字

dropShadowColor

外阴影颜色。参考：CSS drop-shadow。默认值为 black。

dropShadowOffsetX

外阴影在 X 轴方向的偏移量。默认值为 0。

dropShadowOffsetY

外阴影在 Y 轴方向的偏移量。默认值为 0。

dropShadowBlurRadius

外阴影模糊半径，它的值越大，阴影就越大并越淡。默认值为 0。

physical

是否启用物理文本，参考 Physical Text。