Reactはページの透かし効果の全プロセスを実現します

序文

1. cavans ではなく svg を選択する理由は何ですか?

高解像度の画面では、cavans は devicePixelRatio に応じて幅と高さを調整する必要があるため、調整しないとぼやけてしまいます。SVG は、さまざまな解像度をネイティブにサポートするベクター画像であり、ぼやけは発生しません。

1. 使用例

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
'./index.css' をインポートします
'./components/WaterMarkContent' から WaterMarkContent をインポートします。
'./App' から App をインポートします

ReactDOM.render() は、
  <React.StrictMode>
    <ウォーターマークコンテンツ>
      <アプリ />
    </ウォーターマークコンテンツ>
  </React.StrictMode>,
  ドキュメント.getElementById('ルート')
）

2. 実施プロセス

透かし画像を作成する
透かし画像をコンテナ全体に広げる
透かしコンポーネント: サブコンポーネントコンテンツスロットをサポート

SVG透かし画像を作成する

  const { text = 'waterMark', fontSize = 16, fillOpacity = '0.2', fillColor = '#000' } = プロパティ
  定数res = `
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 幅="180px" 高さ="180px" ビューボックス="0 0 180 180">
        <text x="-100" y="-30" fill='${fillColor}' transform = "rotate(-35 220 -220)" fill-opacity='${fillOpacity}' font-size='${fontSize}'> ${text}</text>
      </svg>`

上記のコードから、SVG XML文字列を取得し、それをURLリソースに変換することができます。

 const blob = 新しいBlob([res], {
    タイプ: 'image/svg+xml',
  })

 定数 url = URL.createObjectURL(blob)

このようにして、SVGリソースアドレスを取得し、それをdivの背景画像として使用します。

    <div
      スタイル={{
        位置: '絶対'、
        幅: '100%'、
        高さ: '100%'、
        背景画像: `url(${url})`,
        上: 0,
        左: 0,
        zインデックス: 999,
        ポインタイベント: 'none'、//クリックスルー}}
    </div>

この時点で、透かしで覆われた div を簡単に取得できました。次に、コードを統合してコンポーネントにカプセル化します。

3. コンポーネントコード

'react' から React をインポートします
'react' から { ReactNode, useMemo } をインポートします。

タイプ svgPropsType = {
  テキスト?: 文字列
  フォントサイズ?: 数値
  塗りつぶしの不透明度?: 数値
  塗りつぶし色?: 文字列
}
const SvgTextBg = (props: svgPropsType) => {
  const { text = 'waterMark', fontSize = 16, fillOpacity = '0.2', fillColor = '#000' } = プロパティ
  定数res = `
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 幅="180px" 高さ="180px" ビューボックス="0 0 180 180">
        <text x="-100" y="-30" fill='${fillColor}' transform = "rotate(-35 220 -220)" fill-opacity='${fillOpacity}' font-size='${fontSize}'> ${text}</text>
      </svg>`

  const blob = 新しいBlob([res], {
    タイプ: 'image/svg+xml',
  })

  定数 url = URL.createObjectURL(blob)

  戻る （
    <div
      スタイル={{
        位置: '絶対'、
        幅: '100%'、
        高さ: '100%'、
        背景画像: `url(${url})`,
        上: 0,
        左: 0,
        zインデックス: 999,
        ポインタイベント: 'none'、//クリックスルー}}
    </div>
  ）
}

タイプ propsType = {
  子供？: ReactNode
} & 部分的<svgPropsType>

const WaterMarkContent = (props: propsType) => {
  const { テキスト、フォントサイズ、塗りつぶし不透明度、塗りつぶし色 } = プロパティ

  定数memoInfo = useMemo(
    () => ({
      文章、
      フォントサイズ、
      塗りつぶしの不透明度、
      塗りつぶし色、
    }）、
    [テキスト、フォントサイズ、塗りつぶしの不透明度、塗りつぶしの色]
  ）
  戻る （
    <div style={{ position: 'relative', width: '100%', height: ' 100%' }}>
      {props.children}
      <SvgTextBg {...メモ情報} />
    </div>
  ）
}

デフォルトの WaterMarkContent をエクスポートする

要約する

これで、React を使用してページの透かし効果を実現する方法についての記事は終了です。React を使用してページの透かし効果を実現する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: Elementのメッセージポップアップウィンドウが繰り返しポップアップする問題の解決

>>: MySQL 8.0.20でNavicatをインストールして接続する方法と注意すべき点