برنامه نویسی

متن دست‌نویس متحرک در React با Vara.js

ek3nk4r 2023-04-30

0 39 خواندن این مطلب 2 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

فهرست مطالب

معرفی

سلام بچه ها، آیا به دنبال کتابخانه انیمیشنی هستید که بتواند متن را با ضربه متحرک کند؟ اگر چنین است، شما در جای درستی هستید. بیایید ببینیم چگونه می توانیم یک متن دست خط متحرک در ReactJs مانند تصویر زیر با کتابخانه Vara ایجاد کنیم.

متن Vara.js: وبلاگ WiseCode

برای مرجع کامل در مورد نحوه ایجاد متن دستخط متحرک در React می توانید از WiseCode Blog دیدن کنید.

چگونه از Vara برای ترسیم متن دست خط متحرک استفاده کنیم

قبل از استفاده از کتابخانه Vara، باید آن را با دستور نصب کنیم npm install vara. اگر از TypeScript استفاده می کنید، به یاد داشته باشید که نوع آن را توسط نصب کنید npm install -D @types/vara.

بیایید یک فایل جدید به نام ایجاد کنیم VaraText.tsx (یا VaraText.jsx اگر از جاوا اسکریپت استفاده می کنید src/components/.

سپس یک کامپوننت به نام ایجاد می کنیم VaraText به شرح زیر:

function VaraText({ text }: { text: string }) {
  useEffect(() => {
    var vara = new Vara(
      "#vara-container",
      "https://raw.githubusercontent.com/akzhy/Vara/master/fonts/Satisfy/SatisfySL.json",
      [
        {
          text: text,
          fontSize: 40,
          strokeWidth: 0.7,
        },
      ]
    );
  }, []);

  return <div id="vara-container" className="z-[20]"></div>;
}

من خط به خط از کد بالا توضیح خواهم داد.

ابتدا یک تابع به نام تعریف می کنیم VaraText با یک استدلال text که متنی است که می خواهیم بنویسیم.

سپس، در داخل useEffect یک کامپوننت Vara جدید ایجاد خواهیم کرد.

اولین پارامتر خواهد بود id از div تگ کنید که متن را ترسیم می کنیم.

پارامتر دوم فایل JSON فونت مورد استفاده خواهد بود. چهار فونت از پیش ساخته شده از نویسنده وجود دارد. شما می توانید هر یک از آنها را برای متن خود انتخاب کنید. به یاد داشته باشید که URL فایل فونت خام را وارد کنید.

پارامتر سوم لیستی است که شامل متون مختلفی است که می خواهید نشان دهید. می توانید متن بیشتری مانند این اضافه کنید:

var vara = new Vara(
  "#vara-container",
  "https://raw.githubusercontent.com/akzhy/Vara/master/fonts/Satisfy/SatisfySL.json",
  [
    {
      text: text,
      fontSize: 40,
      strokeWidth: 0.7,
    },
    {
      text: "Some text",
    },
    {
      text: "Some more text"
    }
  ]
);

پس از ایجاد VaraText جزء، می توانید به هر نقطه از صفحه خود بروید و آن را به آن اضافه کنید. به عنوان مثال، اجازه دهید تغییر دهید index.tsx داخل src/pages تا ببینیم کار می کند یا نه

import VaraText from "@/components/VaraText";

export default function Home() {
  return (
    <div>
      <VaraText text='WiseCode Team' />
    </div>
  );
}