Element Text

绘制单行文本

new Painter(canvasContext).draw({
  /** 元素(锚点)的垂直位置 */
  top: 10,
  /** 元素(锚点)的水平位置 */
  left: 30,
  /** 绘制文本元素 */
  type: "text",
  /** 文本颜色 */
  color: "#000",
  /** 字体 */
  fontFamily: "serial",
  /** 字号为 30 rpx */
  fontSize: 30,
  /** 字重 normal 或 bold */
  fontWeight: "normal",
  /** 字型 normal 或 italic */
  fontStyle: "normal",
  /** 文字装饰 none 或 line-through */
  textDecoration: "none",
  /** 锚点水平位置, "left" 表示锚点在文字内容的左边  */
  align: "left",
  /** 锚点垂直位置, "top" 表示锚点位于文字内容的上边 */
  baseline: "top",
  /** 元素的宽度, 水平排布时影响后一个元素的位置，为 null 时根据文字实际占用的宽度计算 */
  width: null,
  /** 文本内容 */
  content: "Hello"
});

示例

• site
• code

tips:

• 文本不会换行
• 注意 align / baseline 与 css 中的 text-align/vertical-align 不同，代表的是锚点位置
• 如果内容中包含换行符，绘制时会被去除