序文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をインストールして接続する方法と注意すべき点
Linux は一般的にサーバーとして使用され、サーバーは一般的にコンピュータルーム内に置かれます。L...
ミラーリングも Docker のコアコンポーネントの 1 つです。ミラーリングはコンテナ操作の基盤で...
TypeScript を使用する場合、TypeScript が提供する型システムを使用してコードのあ...
この記事では、ツリー構造テーブルを実現するためのElement-uiテーブルの具体的なコードを参考ま...
目次1. プロジェクト構築2: ディレクトリ構造3: コンポジションAPI 4: 基本的な使い方:最...
1. 時刻の書式設定とその他の方法moment.jsライブラリファイルの使用をお勧めします2. テン...
最近、省、市、地区のカスケード選択効果を実装する必要があります。省、市、地区のデータはすべてローカル...
MySQL データベースをバックアップするためのツールは多数あります。過去 2 日間で、C# を使用...
これは新しいバージョンではもう不可能なようで、推奨されません。そうでない場合は、ソフト リンクを直接...
Nginx ログは、ユーザーの住所の場所や行動プロファイルなどを分析するために使用できます。Elas...
理論的には、MySQL によって使用されるメモリ = グローバル共有メモリ + max_connec...
序文<router-link> タグは、Vue アプリ内のさまざまなページ間を移動するた...
目次リポジトリソースを変更する起動するvue-devtoolsを置き換える予防ボーダーレスウィンドウ...
序文決まり文句です。ここでは、フロントエンドとバックエンドの分離についての私の理解についてお話ししま...
InnoDB ストレージ エンジンの主な機能には、挿入バッファ、二重書き込み、適応ハッシュインデック...