Skip to main content

createRoundedTextBox()

属于 @remotion/rounded-text-box 软件包的一部分.

🌐 Part of the @remotion/rounded-text-box package.

创建一个用于渲染带圆角文本框的 SVG 路径，这一做法由 TikTok 和 Instagram 首创。

🌐 Creates a SVG path for rendering a text box with rounded corners, as pioneered by TikTok and Instagram.

上面的示例结合了 fitTextOnNLines() 和 measureText() 来获取文本测量值，然后创建了一个圆角文本框。
在这里查看源代码。

🌐 The above example combines fitTextOnNLines() and measureText() to get the text measurements, and then creates a rounded text box.
View the source code here.

使用示例​

🌐 Usage Example

Simple usage example
import {fitTextOnNLines, measureText} from '@remotion/layout-utils';
import {createRoundedTextBox} from '@remotion/rounded-text-box';

const maxLines = 3;
const fontFamily = 'Figtree';
const fontWeight = '700';
const horizontalPadding = 20;
const borderRadius = 20;
const fontSize = 36;
const lineHeight = 1.5;
const textAlign = 'center';

const lines = ['Hello World', 'This is a test', 'This is another test'];

const textMeasurements = lines.map((t) =>
  measureText({
    text: t,
    fontFamily,
    fontSize,
    additionalStyles: {
      lineHeight,
    },
    fontVariantNumeric: 'normal',
    fontWeight,
    letterSpacing: 'normal',
    textTransform: 'none',
    validateFontIsLoaded: true,
  }),
);

const {d, boundingBox} = createRoundedTextBox({
  textMeasurements,
  textAlign,
  horizontalPadding,
  borderRadius,
});

const markup = (
  <div
    style={{
      width: boundingBox.width,
      height: boundingBox.height,
    }}
  >
    <svg
      viewBox={boundingBox.viewBox}
      style={{
        position: 'absolute',
        width: boundingBox.width,
        height: boundingBox.height,
        overflow: 'visible',
      }}
    >
      <path fill="white" d={d} />
    </svg>
    <div style={{position: 'relative'}}>
      {lines.map((line, i) => (
        <div
          key={i}
          style={{
            fontSize,
            fontWeight,
            fontFamily,
            lineHeight,
            textAlign,
            paddingLeft: horizontalPadding,
            paddingRight: horizontalPadding,
            color: 'black',
          }}
        >
          {line}
        </div>
      ))}
    </div>
  </div>
);

应用编程接口​

🌐 API

对象 CreateRoundedTextBoxProps

🌐 object CreateRoundedTextBoxProps

接受具有以下属性的对象：

🌐 Accepts an object with the following properties:

textMeasurements​

数组 Dimensions[]

🌐 array Dimensions[]

一组文本测量，每个测量包含一行文本的 width 和 height。
应使用 measureText() 函数获取。

🌐 An array of text measurements, each containing the width and height of a line of text.
Should be obtained using the measureText() function.

textAlign​

字符串 TextAlign

🌐 string TextAlign

文本的对齐方式。 可以是 'left'、'center' 或 'right'。

🌐 The alignment of the text.
Can be 'left', 'center', or 'right'.

horizontalPadding​

number

文本框的水平内边距。

🌐 The horizontal padding of the text box.

borderRadius​

number

文本框的边框圆角。

🌐 The border radius of the text box.

返回值​

🌐 Return value

对象 CreateRoundedTextBoxResult

🌐 object CreateRoundedTextBoxResult

一个包含以下属性的对象：

🌐 An object containing the following properties:

d​

string

SVG 路径。

🌐 The SVG path.

boundingBox​

对象 BoundingBox

🌐 object BoundingBox

文本框的边界框。形状请参见 getBoundingBox()。

🌐 The bounding box of the text box. See getBoundingBox() for the shape.

instructions​

数组 ReducedInstruction[]

🌐 array ReducedInstruction[]

SVG 路径指令作为数组，用于 @remotion/paths 包。

🌐 The SVG path instructions as an array, for use with the @remotion/paths package.

另请参阅​

🌐 See also

Last updated on