今天继续介绍MiraML的视频描述能力: text(文本)。是基于米拉视频改造的FFCreator实现的。
之前的文章可以看这里：
老规矩，先举栗子🌰：
<miraml>
<canvas width="1280" height="720">
<spine></spine>
<!-- content属性支持以下2种写法 -->
<text content="a simple text" align="left" fontSize="30" x="30" y="30"></text>
<text fontSize="30" x="30" y="80" align="left">
<!-- 单独写标签主要为了换行符的处理 -->
<content>a simple text</content>
</text>
<!-- 对齐 -->
<text align="left" fontSize="30" x="80vw" y="130" backgroundColor="#333">
<content>
align left
align left left left
</content>
</text>
<text align="right" fontSize="30" x="50vw" y="130" backgroundColor="#333">
<content>
align right
align right right
</content>
</text>
<text align="center" fontSize="30" x="65vw" y="130" backgroundColor="#333">
<content>
align center
align center center
</content>
</text>
<!-- 文字、背景颜色 -->
<text content="blue text" color="#1FB0F9" align="left" fontSize="30" x="30" y="130"></text>
<text content="blue background" backgroundColor="#1FB0F9" align="left" fontSize="30" x="30" y="180"></text>
<!-- 描边 -->
<text content="blue stroke" align="left" fontSize="30" x="30" y="230">
<stroke color="#1FB0F9" size="20%"></stroke>
</text>
<!-- 阴影 -->
<text content="blue shadow" align="left" fontSize="30" x="30" y="280">
<shadow color="#1FB0F9" offset="20%" angle="45" blur="30%" alpha="0.6"></shadow>
</text>
<!-- 字间距 -->
<text content="letter spacing normal" align="left" fontSize="30" x="30" y="330"></text>
<text content="letter spacing large" letterSpacing="10%" align="left" fontSize="30" x="30" y="380"></text>
<!-- 行间距 -->
<text fontSize="30" align="right" x="50vw" y="400" backgroundColor="#333">
<content>
line1 height 150%
line2 height 150%
line3 height 150%
</content>
</text>
<text lineHeight="100%" fontSize="30" x="65vw" y="400" backgroundColor="#333">
<content>
line1 height 100%
line2 height 100%
line3 height 100%
</content>
</text>
<text lineHeight="200%" fontSize="30" align="left" x="80vw" y="400" backgroundColor="#333">
<content>
line1 height 200%
line2 height 200%
line3 height 200%
</content>
</text>
<!-- 自动换行/wrapping & padding -->
<text wrap="true" width="300" fontSize="30" padding="20" align="left" valign="top" x="50" y="450" backgroundColor="#333">
<content>because the ones who are crazy enough to think that they can change the world, are the ones who do.</content>
</text>
</canvas>
</miraml>
👁️👁️ 所有的示例都是可以直接复制到MiraPlayer的沙盒里直接预览播放的
👁️👁️ 科学上网不方便的同学，也可以在掘金的沙盒里玩：
👁️👁️ 目前只支持Chrome/Firefox/Edge，Safari会很卡顿 😈
| Key | 属性 | 说明 |
|---|---|---|
| content | 内容 | string 默认为空 |
| fontSize | 字号 | 可以是px|rpx|vw 参见:空间单位 |
| fontFamily | 字体 | 字体文件url |
| color | 文字颜色 | 默认白色 #FFF |
| backgroundColor | 背景颜色 | 默认透明 |
| padding | 边距 | 可以是px|rpx|vw|% |
| stroke | 描边 | { color: '#FFF', size: 0 } size单位px|rpx|vw|% |
| shadow | 阴影 | { color: '#FFF', angle: 45, offset: 0, alpha: 0, blur: 0 } angle默认45度，offset单位px|rpx|vw|% |
| align | 水平对齐 | left|center|right 注意: 设置水平对齐后，anchor.x也会自动调整为left:0|center:0.5|right:1，以方便布局 |
| valign | 垂直对齐 | top|center|bottom 注意: 设置垂直对齐后，anchor.y也会自动调整为top:0|center:0.5|bottom:1，以方便布局 |
| lineHeight | 行高 | 单位px|rpx|vw|%，默认150% |
| letterSpacing | 字间距 | 单位px|rpx|vw|%，默认0 |
| wrap | 换行 | true 强制换行，false 不强制换行，仅根据\n换行 |
| width | 宽度 | 仅用于wrap:true的时候强制换行，wrap:false时不会截文字 |
| height | 高度 | ！！高度暂不支持设置，会根据内容长度自适应 |
| anchor | 锚点 | ！！锚点暂不支持设置，会根据align/valign自适应 |
| x | x | 参见:布局 |
| y | y | 参见:布局 |
👁️👁️ 为了方便调整字号(fontSize)后的自适应，其他尺寸相关的属性，单位除px|rpx|vw外，还支持%百分比，即相对文字高度(fontSize)的百分比
参考：
开源项目: FFCreator
如果遇到问题也可以扫码入群：
