Skip to main content

<Pie />

属于 @remotion/shapes 软件包的一部分.

🌐 Part of the @remotion/shapes package.

渲染一个绘制饼图部分的 SVG 元素。

🌐 Renders an SVG element drawing a pie piece.

探险者​

🌐 Explorer

示例​

🌐 Example

src/Pie.tsx
import { Pie } from "@remotion/shapes";
import { AbsoluteFill } from "remotion";

export const MyComposition = () => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: "white",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Pie
        radius={100}
        progress={0.5}
        fill="green"
        stroke="red"
        strokeWidth={1}
      />
    </AbsoluteFill>
  );
};

属性​

🌐 Props

radius

number

The radius of the circle.

progress

number

The percentage of the circle that is filled. 0 means fully empty, 1 means fully filled.

counterClockwise

boolean

If set, the circle gets filled counterclockwise instead of clockwise. Default false.

closePath

boolean

If set to false, no path to the middle of the circle will be drawn, leading to an open arc. Default true.

rotation

number

Add rotation to the path. 0 means no rotation, Math.PI * 2 means 1 full clockwise rotation

fill

string

The color of the shape.

stroke

string

The color of the stroke. Should be used together with strokeWidth.

strokeWidth

string

The width of the stroke. Should be used together with stroke.

style

string

CSS properties that will be applied to the <svg> tag. Default style: overflow: 'visible'

pathStyle

string

CSS properties that will be applied to the <path> tag. Default style: transform-box: 'fill-box' and a dynamically calculated transform-origin which is the center of the shape, so that the shape rotates around its center by default.

strokeDasharray

string

Allows to animate a path. See evolvePath() for an example.

strokeDashoffset

string

Allows to animate a path. See evolvePath() for an example.

Other props

All other props that can be passed to a <path> are accepted and will be forwarded.

另请参阅​

🌐 See also

Last updated on