javascript 如何创建一个弯曲的文本与React?

mnemlml8  于 2023-03-06  发布在  Java
关注(0)|答案(1)|浏览(102)

在我的react应用程序中,我想创建一个圆形/弯曲的文本。为此,我找到了一个名为react-curved-text的包。但这个包不像我想要的那样工作。
问题是它弯曲了文本,但是它不与父文本对齐,并且当我尝试使用tailwindcss将动画应用到它时,它不起作用.它不能被添加一个类名到它.那么我怎样才能使用react创建循环文本?

<ReactCurvedText
          width={370}
          height={300}
          cx={190}
          cy={120}
          rx={80}
          ry={80}
          startOffset={0}
          reversed={true}
          text="Sanah Shop - Sanah shop - Sanah shop - Sanah shop - "
          textProps={{ style: { fontSize: 20.5, transform: "rotate(0deg)" } }}
          className="rotater absolute top-0 bottom-10"
        />

tailwind.config.js

theme: {
    extend: {
      keyframes: {
        wiggle: {
          "0%, 100%": { transform: "rotate(360deg)" },
          "50%": { transform: "rotate(0deg)" },
        },
        spinner: {
          "0%": { transform: "rotate(360deg)" },
          "100%": { transform: "rotate(0deg)" },
        },
      },
      animation: {
        rotater: "spinner 10s linear infinite",
        wiggle: "wiggle 10s linear infinite",
      },
    },
  },

最终结果应该是

pbgvytdp

pbgvytdp1#

您需要通过ReactCurvedText参数的svgProps添加className,如下所示:

svgProps={{ className: "rotater absolute top-0 bottom-10" }}

你可以看看this sandbox,它是一个使用react-curved-text库的动态弯曲文本的示例。

相关问题