TextLayer

TextLayer可以帮助你在 Framer 中更加方便地进行文字排版。你可以使用一个字符串来定义文字内容，并使用它的一些特有属性来渲染它的样式。几乎所有的文字图层属性都能在 CSS 中找到，你可以改变字体、改变样式、调整行高、添加内边距或阴影等等。

A TextLayer allows you to work with type in Framer. Define text within a string, and use its unique properties to style it. Almost all property names match the CSS text styles. You can change the typeface, change the style, adjust the line height, add padding, shadows and much more.

text.text <string>

文本图层的文字内容，默认情况下它的颜色是 #888。

The text content. By default, the color is set to #888.

  1. # 创建一个文字图层
  2. title = new TextLayer
  3.     text: "Title"

text.template <object>

设置模板插值（模板内的被标记变量替换值）的值，模板插值是指使用 {} 包裹的变量。

Set values for template tags in text. Template tags are wrapped in {}.

  1. # 创建一个带模板插值的文本图层
  2. layerA = new TextLayer
  3.     text: "{speed}KM/h"
  5. # 设置模板插值 speed 为 50
  6. layerA.template =
  7.     speed: 50
  9. # 你可以像这样简写，它会替换掉第一个标记变量
  10. layerA.template = 50
  11. # 这两种写法文本图层的结果都是 "50KM/h".

text.templateFormatter <object>

格式化模板插值。

Format template values to inject into template tags.

  1. # 创建带模板插值的文本图层
  2. layerA = new TextLayer
  3.     text: "{speed}{unit}/h"
  5. # 格式化模板插值，使其只保留两位小数
  6. layerA.templateFormatter = 
  7.     speed: (value) ->
  8.         Utils.round(value, 2)
  10. # 使用动画形式让它的值从 0 变化到 100
  11. layerA.animate
  12.     template: 
  13.         speed: 100
  14.         unit: "KM"

使用这种简写方式来格式化第一个模板插值。

Here’s a shorthand way to format the first template tag only.

  1. # 格式化第一个模板插值，使其只保留两位小数
  2. layerA.templateFormatter = (value) ->
  3.     Utils.round(value, 2)

text.textReplace(from, to)

查找文本图层中的某一段并替换。

Finds and replaces a piece of text.

  1. # 将 0:00 替换为 45:00 
  2. layerA = new TextLayer
  3.     text: "Total time: 0:00"
  5. layerA.textReplace("0:00", "45:00")

text.fontSize <number>

设置文本图层的字号，默认是 40 像素。

The size of the text. By default, it’s set to 40.

  1. # 设置字号为64px 
  2. title = new TextLayer
  3.     fontSize: 64

text.fontFamily <string>

设置当前字体。默认情况下，它会使用你预览设备的系统字体。

The current typeface of the text. By default, it’s set to use the system typeface of the device you’re currently previewing on.

  • Apple设备 : SF UI.
  • Google设备 : Roboto.
  • Microsoft设备 : Segoe UI.
  1. # 创建一个文字图层 
  2. title = new TextLayer
  3.     fontFamily: "-apple-system"

text.fontWeight <number>

字体的粗细，默认是 400 。

The weight of the text. By default, it’s set to 400.

  1. # 创建一个文字图层 
  2. title = new TextLayer
  3.     fontWeight: 400

text.fontStyle <string>

设置字体的风格。

The style of the text.

  1. # 设置字体为斜体风格
  2. title = new TextLayer
  3.     fontStyle: "italic"

你可以选择italic、bold和oblique。

You can choose between italic, bold and oblique.

  • italic 会显示一个斜体的字体样式。
  • bold 会显示一个加粗的字体样式。
  • oblique 会显示一个倾斜的字体样式。
  1. # 设置字体为加粗风格
  2. title = new TextLayer
  3.     fontStyle: "bold"

text.font <string>

在一行内定义字体的所有属性。你可以站照这样的顺序写：”fontStyle fontWeight fontSize/lineHeight fontFamily”。

A shorthand to define all font styles using a single line. These properties can be set (in order): “fontStyle fontWeight fontSize/lineHeight fontFamily”.

  1. # 在一行内设置字体样式属性
  2. title = new TextLayer
  3.     font: "300 64px/1 -apple-system, Helvetica Neue"

需要注意的是fontSize和fontFamily是必须要写的。

Note that the fontSize and fontFamily properties are required.

  1. # 设置字号和字体
  2. title = new TextLayer
  3.     font: "64px -apple-system"

text.padding <object>

文字图层内边距，默认是 0 。

The padding of the text. By default, it’s set to 0.

  1. # 设置内边距
  2. title = new TextLayer
  3.     padding: 40

你也可以给每个方向独立设置不同的内边距。

You can also define padding of each side individually.

  1. # 给每个方向设置内边距
  2. title = new TextLayer
  3.     padding:
  4.         top: 40
  5.         left: 20
  6.         bottom: 40
  7.         right: 20

当然你也可以使用简写方式：用horizontal设置左右内边距，用vertical设置上下内边距。

Left and right padding can be defined by using the horizontal shorthand. Top and bottom padding can also be defined using the vertical shorthand.

  1. # 设置左右和上下内边距
  2. title = new TextLayer
  3.     padding:
  4.         horizontal: 40
  5.         vertical: 80

text.lineHeight <number>

文字图层的行高，默认情况下是 1.25 倍。也就是说，当你设置字号为 40px 时，行高就是 50px 。

The line height of the text. By default, it’s set to 1.25. This means that if you’ve set the fontSize to 40, the line-height will effectively be 50px.

  1. # 设置行高
  2. title = new TextLayer
  3.     lineHeight: 1.5

text.letterSpacing <number>

设置字间距，默认是 0 。

The letter spacing of the text in pixels. Set to 0 by default.

  1. # 设置字间距
  2. title = new TextLayer
  3.     letterSpacing: 2&gt;

text.wordSpacing <number>

设置词间距，默认是 0 。

The letter spacing of the words in pixels. Set to 0 by default.

  1. # 设置词间距
  2. title = new TextLayer
  3.     wordSpacing: 10

text.textAlign <string>

设置文字对齐方式。

The alignment of the text.

  1. # 居中对齐文字 
  2. title = new TextLayer
  3.     textAlign: "center"

你可以选择的对齐方式有left、right和center。

You can choose between left, right and center.

  1. # 多种对齐方式
  2. title.textAlign = "left"
  3. title.textAlign = "right"
  4. title.textAlign = "center"

当然，你也可以使用Align对象。

Alternatively, you can also use the Align class.

  1. # 居中对齐文字
  2. title = new TextLayer
  3.     textAlign: Align.center

text.textTransform <string>

设置字母大小写。

The capitalization of the text.

  1. # 大写所有字母 
  2. title = new TextLayer
  3.     textTransform: "uppercase"

你可以设置为uppercase、lowercase或capitalize。

You can choose between uppercase, lowercase and capitalize.

  1. # 多种字母大小写形式
  2. title.textTransform = "uppercase"
  3. title.textTransform = "lowercase"
  4. title.textTransform = "capitalize"

text.textDecoration <string>

设置文字的修饰。

The decoration of the text.

  1. # 给文字添加下划线
  2. title = new TextLayer
  3.     textDecoration: "underline"

你可设置为underline、overline或line-through。

You can choose between underline, overline and line-through.

  1. # 给文字添加上划线 
  2. title = new TextLayer
  3.     textDecoration: "overline"

text.textIndent <number>

设置首字缩进。

The indentation of the first paragraph of text in pixels.

  1. # 首字缩进20像素
  2. title = new TextLayer
  3.     textIndent: 20

text.textOverflow <string>

给溢出的文字添加省略号。

Add an ellipsis to overflowing text content.

  1. # 单行截取
  2. paragraph = new TextLayer
  3.     textOverflow: "ellipsis"
  4.     text:
  5.         """
  6.         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  7.         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  8.         """

如果你设置了文字图层的高度，就可以给多行文字溢出的部分添加省略号。

If you set the height, you’ll be able to add an ellipsis to multiple lines.

  1. # 多行截取
  2. paragraph = new TextLayer
  3.     textOverflow: "ellipsis"
  4.     height: 100
  5.     text:
  6.         """
  7.         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  8.         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  9.         """

text.direction <string>

文字方向，默认是从左向右。

The direction of the text. The direction of the text. Set to left-to-right by default.

  1. # 设置文字方向
  2. title = new TextLayer
  3.     direction: "right-to-left"

你可以设置为right-to-left (rtl)或left-to-right (ltr)。

You can choose between right-to-left (rtl) and left-to-right (ltr).

  1. # 设置文字方向
  2. title = new TextLayer
  3.     direction: "rtl"

text.truncate <boolean>

设置文字溢出显示省略号的简写。

A shorthand of setting textOverflow to “ellipsis”.

  1. # 单行截取
  2. paragraph = new TextLayer
  3.     truncate: true
  4.     text:
  5.         """
  6.         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  7.         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  8.         """

如果你设置了文字图层的高度，就可以给多行文字溢出的部分添加省略号。

If you set the height, you’ll be able to add an ellipsis to multiple lines.

  1. #多行截取
  2. paragraph = new TextLayer
  3.     truncate: true
  4.     height: 100
  5.     text:
  6.         """
  7.         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  8.         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  9.         """

text.shadowX <number>

设置文字阴影在 x 轴方向的偏移，正值将会产生一个从右边缘伸出来的阴影，负值将会产生一个从左边缘伸出的阴影。

Defines the shadow direction on the x-axis. A positive value will produce a shadow from the right edge of a layer, whereas a negative value will produce a shadow from the left edge.

  1. # 设置横向文字阴影。
  2. title = new TextLayer
  3.     shadowX: 10

text.shadowY <number>

设置文字阴影在 y 轴方向的偏移，正值将会产生一个从下边缘伸出来的阴影，负值将会产生一个从上边缘伸出的阴影。

Defines the shadow direction on the y-axis. A positive value will produce a shadow from the bottom edge of a layer, whereas a negative value will produce a shadow from the top edge.

  1. # 设置纵向文字阴影
  2. title = new TextLayer
  3.     shadowY: 10

text.shadowBlur <number>

给文字阴影设置高斯模糊，它的只是一个数字，默认为 0 。

Adds a gaussian blur to the shadowX or shadowY property. shadowBlur is defined with a number. The default value is 0.

  1. # 设置文字阴影 
  2. title = new TextLayer
  3.     shadowY: 1
  4.     shadowBlur: 4

text.shadowColor <string>

给文字阴影设置颜色，使用 CSS 颜色格式。

Sets the color of a layers shadow. The color is expressed as a string in the CSS color format.

  1. # 设置文字阴影颜色
  2. title = new TextLayer
  3.     shadowY: 10
  4.     shadowColor: "rgba(0,0,0,0.2)"