@antmjs/vantui/es/water-mark/index.js

一套适用于Taro3及React的vantui组件库

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import { Canvas, View } from '@tarojs/components';
import { nextTick } from '@tarojs/taro';
import classNames from 'classnames';
import { useEffect, useState, useCallback } from 'react';
import { getCanvas, getWaterData } from './utils';
var classPrefix = "van-water-mark";
var cIndex = 0;

// eslint-disable-next-line import/order
import { get } from '../default-props';
import { jsx as _jsx } from "react/jsx-runtime";
export var WaterMark = function WaterMark(props) {
  var _useState = useState(get().WaterMark),
    _useState2 = _slicedToArray(_useState, 1),
    d = _useState2[0];
  var _d$props = _objectSpread(_objectSpread({}, d), props),
    _d$props$zIndex = _d$props.zIndex,
    zIndex = _d$props$zIndex === void 0 ? 2000 : _d$props$zIndex,
    _d$props$gapX = _d$props.gapX,
    gapX = _d$props$gapX === void 0 ? 24 : _d$props$gapX,
    _d$props$gapY = _d$props.gapY,
    gapY = _d$props$gapY === void 0 ? 48 : _d$props$gapY,
    _d$props$width = _d$props.width,
    width = _d$props$width === void 0 ? 120 : _d$props$width,
    _d$props$height = _d$props.height,
    height = _d$props$height === void 0 ? 64 : _d$props$height,
    _d$props$rotate = _d$props.rotate,
    rotate = _d$props$rotate === void 0 ? -22 : _d$props$rotate,
    image = _d$props.image,
    _d$props$imageWidth = _d$props.imageWidth,
    imageWidth = _d$props$imageWidth === void 0 ? 120 : _d$props$imageWidth,
    _d$props$imageHeight = _d$props.imageHeight,
    imageHeight = _d$props$imageHeight === void 0 ? 64 : _d$props$imageHeight,
    content = _d$props.content,
    _d$props$fontStyle = _d$props.fontStyle,
    fontStyle = _d$props$fontStyle === void 0 ? 'normal' : _d$props$fontStyle,
    _d$props$fontWeight = _d$props.fontWeight,
    fontWeight = _d$props$fontWeight === void 0 ? 'normal' : _d$props$fontWeight,
    _d$props$fontColor = _d$props.fontColor,
    fontColor = _d$props$fontColor === void 0 ? 'rgba(0,0,0,.15)' : _d$props$fontColor,
    _d$props$fontSize = _d$props.fontSize,
    fontSize = _d$props$fontSize === void 0 ? 14 : _d$props$fontSize,
    _d$props$fontFamily = _d$props.fontFamily,
    fontFamily = _d$props$fontFamily === void 0 ? 'sans-serif' : _d$props$fontFamily,
    _d$props$fullPage = _d$props.fullPage,
    fullPage = _d$props$fullPage === void 0 ? true : _d$props$fullPage;
  var _useState3 = useState(''),
    _useState4 = _slicedToArray(_useState3, 2),
    base64Url = _useState4[0],
    setBase64Url = _useState4[1];
  var _useState5 = useState(),
    _useState6 = _slicedToArray(_useState5, 2),
    canvasRect = _useState6[0],
    setCanvasRect = _useState6[1];
  var _useState7 = useState(cIndex++),
    _useState8 = _slicedToArray(_useState7, 1),
    compIndex = _useState8[0];
  var work = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
    var canvas, base64Url_;
    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) switch (_context.prev = _context.next) {
        case 0:
          _context.next = 2;
          return getCanvas(compIndex);
        case 2:
          canvas = _context.sent;
          _context.next = 5;
          return getWaterData({
            gapX: gapX,
            gapY: gapY,
            rotate: rotate,
            fontStyle: fontStyle,
            fontWeight: fontWeight,
            width: width,
            height: height,
            fontFamily: fontFamily,
            fontColor: fontColor,
            image: image,
            content: content,
            fontSize: fontSize,
            imageWidth: imageWidth,
            imageHeight: imageHeight,
            canvas: canvas,
            setCanvasRect: setCanvasRect
          });
        case 5:
          base64Url_ = _context.sent;
          setBase64Url(base64Url_);
          // eslint-disable-next-line react-hooks/exhaustive-deps
        case 7:
        case "end":
          return _context.stop();
      }
    }, _callee);
  })), [gapX, gapY, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize, imageWidth, imageHeight]);
  useEffect(function () {
    nextTick(function () {
      work();
    });
  }, [work]);
  return /*#__PURE__*/_jsx(View, {
    className: classNames(classPrefix, _defineProperty({}, "".concat(classPrefix, "-full-page"), fullPage)),
    style: {
      zIndex: zIndex,
      backgroundSize: "".concat(gapX + width, "px"),
      backgroundImage: "url('".concat(base64Url, "')")
    },
    children: /*#__PURE__*/_jsx(Canvas, {
      style: _objectSpread(_objectSpread({}, canvasRect), {}, {
        position: 'absolute',
        left: -500
      }),
      id: "van-water-mark".concat(compIndex),
      type: "2d"
    })
  });
};
export default WaterMark;