@huntianning/components/packages/watermark/watermark.js

Custom components for HTN

/** 获取文本渲染后的尺寸
 *
 * @param text 文本
 * @param textDomOptions 相关配置
 */
function getTextSize(text = '', textDomOptions = {}) {
  const {
    fontSize = '16px',
    fontWeight = 'normal'
  } = textDomOptions || {}

  const span = document.createElement('span')
  span.innerText = text
  span.style.fontSize = fontSize
  span.style.fontWeight = fontWeight
  document.body.appendChild(span)
  const rect = span.getBoundingClientRect()
  document.body.removeChild(span)
  return rect
}

/* eslint-disable */
export default class Watermark {
    render(watermarkText = '', watermarkOption = {}) {
        watermarkOption = watermarkOption || {}
        this.watermarkOption = watermarkOption

        const {
            rotate = '-20',
            opacity = '0.1',
            fontSize = '14px',
            fontWeight = 'normal',
            padding = 12,
            space = 8,
            color = 'rgb(0,0,0)',
        } = watermarkOption

        if(this.watermarkId && document.querySelector('#'+this.watermarkId)) {
            this.removeWatermark()
        }

        const dom = document.createElement('div')
        dom.classList.add('ui-watermark__control')
        dom.id = this.createDomId()
        dom.style.width = '100%'
        dom.style.height = '100%'
        // dom.style.position = 'fixed'
        // dom.style.zIndex = '9999'
        // dom.style.left = '0'
        // dom.style.top = '0'
        dom.style.pointerEvents = 'none'

        if(typeof watermarkText === "string") {
            watermarkText = [watermarkText]
        }

        this.watermarkText = watermarkText

        let bgSetting = {
            height: 0,
            width: 0,
            text: [],
            g: {
                x: 0,
                y: 0,
                centerX: 0,
                centerY: 0,
                transform: '',
            },
            contentWidth: 0,
            contentHeight: 0,
            textStyle: '',
        }

        bgSetting = watermarkText.reduce((a, b) => {
            const rect = getTextSize(b, watermarkOption)
            a.text.push({
                x: 0,
                y: a.contentHeight + space,
                text: b,
                width: rect.width,
            })
            a.contentHeight += (rect.height + space)
            a.contentWidth = Math.max(a.contentWidth, rect.width)

            return a
        }, bgSetting)

        // 计算对角线长度
        bgSetting.width = Math.hypot(bgSetting.contentWidth + 2*padding, bgSetting.contentHeight + 2*padding)
        // 高度直接使用对角线长度
        bgSetting.height = bgSetting.width

        // 文本居中
        bgSetting.text.forEach(v => {
            v.x = (bgSetting.contentWidth - v.width) / 2
        })

        // 内容居中
        bgSetting.g.x = (bgSetting.width - bgSetting.contentWidth) / 2
        bgSetting.g.y = (bgSetting.height - bgSetting.contentHeight) / 2
        bgSetting.g.centerX = bgSetting.width/2
        bgSetting.g.centerY = bgSetting.height/2
        bgSetting.g.transform = `rotate(${rotate},${bgSetting.g.centerX},${bgSetting.g.centerY}),translate(${bgSetting.g.x},${bgSetting.g.y})`

        bgSetting.textStyle = `font-weight: ${fontWeight};font-size: ${fontSize};opacity: ${opacity};color: red;`

        const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${bgSetting.width}" height="${bgSetting.height}"><g transform="${bgSetting.g.transform}">${
            bgSetting.text.map(({x, y, text}) => {
                return `<text stroke="${color}" style="${bgSetting.textStyle}" x="${x}" y="${y}">${text}</text>`
            }).join('')
        }</g></svg>`

        dom.style.backgroundImage = `url('data:image/svg+xml;utf8,${svg}')`
        return dom
    }

    createDomId() {
        this.watermarkId = `watermark-${String(Math.random()).slice(2)}`
        return this.watermarkId
    }

    removeWatermark() {
      const dom = document.querySelector('#'+this.watermarkId)
      if(dom) {
        dom.remove()
      }
    }
}
/* eslint-enable */