序文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をインストールして接続する方法と注意すべき点
目次1. ルートナビゲーション2. 履歴状態管理API (1)ハッシュチェンジイベント(2)ポップス...
今日は、ext3 や他の以前のファイル システムとの違いを含め、ext4 の歴史について説明します。...
上記のように材料を準備します(ps: hadoop-3.1.2-srcはhadoop-3.1.2に変...
QQtabBar の BEMまず、BEMとはどういう意味でしょうか? BEM は、ブロック、要素、修...
目次まず効果を見てみましょう:成し遂げる:要約:まず効果を見てみましょう: 成し遂げる: 1. ナビ...
プロジェクトで発生した不規則な絵画壁のレイアウト問題は、次のように分析されます。 1.img dis...
目次最近Reactを勉強していて、今は仕事でVueを使っています。学習の過程で、両者を比較して理解を...
MySQL 5.x と MySQL 8.0.X のいくつかの違いapplication.proper...
一般的な Dockerfile 命令の紹介命令説明するから新しいイメージが構築される基となるイメージ...
目次1. ハーバーの紹介1. ハーバーが民間倉庫を建設3. 港湾の維持管理4. Harborユーザー...
1. 仮想マシン側1. MySQLの設定ファイルを見つける:sudo vim /etc/mysql/...
目次序文sql_mode の説明最も重要なオプションすべてのオプション要約する序文前回の記事「MyS...
序文この記事はかなり詳細で、少し面倒です。他のチュートリアル ドキュメントでは多くの手順が省略されて...
序文PIPE、パイプラインと翻訳されます。 Angular パイプは、HTML コンポーネントで宣言...
目次1. テーブルを作成する1.1. テーブルを作成するための基本構文1.1.1. シンプルなテーブ...