React Native 實現水印

一、 本博客參考react-native-WaterMark庫，因為顯示情況與要求不符，所以在原基礎上修改一下。

二、 遇到問題與解決方案：

問題： 文字旋轉后，邊角留有空白

解決： 將寬度擴大，使用transform進行旋轉移動

三、 現存問題

1. 固定定位，不能像背景圖一樣移動

四、 代碼

import React, {Component} from "react";
import PropTypes from 'prop-types';
import {Dimensions} from "react-native";
import Svg, {G,Text,}from 'react-native-svg'

let {height , width} = Dimensions.get('window')

class WaterMark extends Component {

    constructor(props) {
        super(props)
    }

    render() {
        let {canvasWid , canvasHei  , txtSpace , txtLines ,  txtOriginY , txtFont , txtColor , text} = {...this.props}
        canvasWid = canvasWid + 150; // 增大寬度，防止邊角留白
        let cos =  Math.cos( 270 * (180 / Math.PI))
        let space = (parseInt(txtSpace) +  (parseInt(txtFont) * 2))
        let beveling = space / cos
        let sideLength = canvasWid + canvasHei
        let rowNum =  Math.ceil(sideLength / beveling)
        let arr = []
        let y = txtOriginY
        for (let i = 0 ; i < rowNum; i++) {
            for (let j = 0; j < txtLines; j++){
                let   x = canvasWid - canvasWid/(txtLines-1)*j
                let svgTxt =
                    <G key={j+""+i}
                       transform= {{ rotation:-30,x:[-300,0],y:[90,0]}}   >
                        <Text
                            x = {x}
                            y={y}
                            stroke="transparent"
                            fill= {txtColor}
                            fontSize= {txtFont}
                        >{text}</Text>
                    </G>;

                arr.push(svgTxt)
            }
            y = y + txtSpace
        }
        return(
            <Svg
                pointerEvents="none"
                height={canvasHei}
                width={canvasWid}
                style={{backgroundColor: 'transparent' , position: 'absolute'}}    //畫布默認是透明的
            >
                <G>{arr}</G>
            </Svg>

        )
    }
}

WaterMark.defaultProps = {
    canvasWid:  width ,                                                           //水印畫布的寬度
    canvasHei:  height,                                                           //水印畫布的高度
    txtSpace:   100,                                                              //水印文字之間的行間距
    txtLines:   4,                                                                //水印的列數
    txtOriginY: 20,                                                               //文字距離畫布上邊界的距離
    txtFont:    11,                                                               //水印字體大小
    txtColor:   "rgba(174,174,174,0.2)",                                          //水印字體顏色
    text:       '',                                                               //水印文字內容

}

WaterMark.propTypes = {
    canvasWid:  PropTypes.oneOfType([PropTypes.string , PropTypes.number]),     //水印畫布的寬度
    canvasHei:  PropTypes.oneOfType([PropTypes.string , PropTypes.number]),     //水印畫布的高度
    txtSpace:   PropTypes.oneOfType([PropTypes.string , PropTypes.number]),     //水印文字之間的行間距
    txtLines:   PropTypes.oneOfType([PropTypes.string , PropTypes.number]),     //水印的列數
    txtOriginY: PropTypes.oneOfType([PropTypes.string , PropTypes.number]),     //文字距離畫布上邊界的距離
    txtFont:    PropTypes.oneOfType([PropTypes.string , PropTypes.number]),     //水印字體大小
    txtColor:   PropTypes.string,                                               //水印字體顏色
    text:       PropTypes.string,                                               //水印文字內容
}

export {WaterMark}

　調用方法：

   <WaterMark text={"Ayinger水印"}></WaterMark>