vantui-edit/es/signature/index.js

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["canvasId", "lineWidth", "strokeStyle", "className"];

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; }

/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
import Taro from '@tarojs/taro';
import { View, Canvas } from '@tarojs/components';
import { requestAnimationFrame } from '../common/utils';
import { jsx as _jsx } from "react/jsx-runtime";
var defaultProps = {
  canvasId: 'spcanvas',
  type: 'png',
  lineWidth: 2,
  strokeStyle: '#000',
  className: ''
};
var componentIndex = 0;
var Signature = /*#__PURE__*/forwardRef(function Signature(props, ref) {
  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
    canvasId = _defaultProps$props.canvasId,
    lineWidth = _defaultProps$props.lineWidth,
    strokeStyle = _defaultProps$props.strokeStyle,
    className = _defaultProps$props.className,
    rest = _objectWithoutProperties(_defaultProps$props, _excluded);

  var canvasRef = useRef(null);
  var wrapRef = useRef(null);

  var _useState = useState(0),
    _useState2 = _slicedToArray(_useState, 2),
    canvasHeight = _useState2[0],
    setCanvasHeight = _useState2[1];

  var _useState3 = useState(0),
    _useState4 = _slicedToArray(_useState3, 2),
    canvasWidth = _useState4[0],
    setCanvasWidth = _useState4[1];

  var ctx = useRef(null);

  var _useState5 = useState(componentIndex++),
    _useState6 = _slicedToArray(_useState5, 1),
    compIndex = _useState6[0];

  var startEventHandler = function startEventHandler() {
    if (ctx.current) {
      ctx.current.beginPath();
      ctx.current.lineWidth = lineWidth;
      ctx.current.strokeStyle = strokeStyle;
    }
  };

  var moveEventHandler = function moveEventHandler(event) {
    if (ctx.current) {
      requestAnimationFrame(function () {
        var _ctx$current, _ctx$current2;

        var evt = event.changedTouches[0];
        var mouseX = evt.x || evt.clientX;
        var mouseY = evt.y || evt.clientY;

        if (Taro.getEnv() === 'WEB' && canvasRef.current) {
          var coverPos = canvasRef.current.getBoundingClientRect();
          mouseX = evt.clientX - coverPos.left;
          mouseY = evt.clientY - coverPos.top;
        }

        (_ctx$current = ctx.current) === null || _ctx$current === void 0 ? void 0 : _ctx$current.lineTo(mouseX, mouseY);
        (_ctx$current2 = ctx.current) === null || _ctx$current2 === void 0 ? void 0 : _ctx$current2.stroke();
      });
    }
  };

  var endEventHandler = function endEventHandler() { };

  var handleClear = function handleClear() {
    if (ctx.current) {
      ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
      ctx.current.closePath();
    }
  };

  var getImage = function getImage() {
    return new Promise(function (resolve, reject) {
      var _ctx$current3, _ctx$current3$canvas;

      var base64 = (_ctx$current3 = ctx.current) === null || _ctx$current3 === void 0 ? void 0 : (_ctx$current3$canvas = _ctx$current3.canvas) === null || _ctx$current3$canvas === void 0 ? void 0 : _ctx$current3$canvas.toDataURL("image/".concat(props.type), 0.8);
      Taro.createSelectorQuery().select("#".concat(canvasId).concat(compIndex)).fields({
        node: true,
        size: true
      }).exec(function (res) {
        if (process.env.NODE_ENV === 'development' && ['alipay', 'tt', 'swan', 'kwai', 'dd'].includes(process.env.TARO_ENV)) {
          console.warn("@anmjs/vantui: signature\u7EC4\u4EF6\u8C03\u7528\u4E86canvasToTempFilePath\uFF0C \u5F53\u524DIDE\u4E0D\u652F\u6301\u8C03\u8BD5\uFF0C\u987B\u5728\u771F\u673A\u4E0A\u8C03\u8BD5");
        }
        const rNode = res[0].node;
        if (rNode.hasOwnProperty('current'))
          delete rNode.current;
        Taro.canvasToTempFilePath({
          // canvas: res[0].node,
          canvas: rNode,
          fileType: props.type,
          canvasId: "".concat(canvasId).concat(compIndex),
          success: function success(res) {
            var _ctx$current4;

            resolve({
              tempFilePath: res.tempFilePath,
              base64: base64,
              canvas: (_ctx$current4 = ctx.current) === null || _ctx$current4 === void 0 ? void 0 : _ctx$current4.canvas
            });
          },
          fail: function fail(err) {
            console.error("@anmjs/vantui: signature \u8F6C\u6362\u56FE\u7247\u5931\u8D25:", err);
            reject(err);
          }
        });
      });
    });
  };

  var canvasSetting = function canvasSetting(canvasDom, width, height) {
    if (canvasDom) {
      var canvas = canvasDom;
      canvas.current = canvas;
      ctx.current = canvas.getContext('2d');
      setCanvasWidth(width);
      setCanvasHeight(height);
      canvas.width = width;
      canvas.height = height;

      if (ctx.current) {
        ctx.current.clearRect(0, 0, width, height);
        ctx.current.beginPath();
        ctx.current.lineWidth = lineWidth;
        ctx.current.strokeStyle = strokeStyle;
      }
    }
  };

  var initCanvas = function initCanvas() {
    Taro.nextTick(function () {
      setTimeout(function () {
        if (process.env.TARO_ENV !== 'h5') {
          Taro.createSelectorQuery().select("#".concat(canvasId).concat(compIndex)).fields({
            node: true,
            size: true
          }, function (res) {
            var node = res.node,
              width = res.width,
              height = res.height;
            canvasSetting(node, width, height);
          }).exec();
        } else {
          var canvasDom = document.getElementById("".concat(canvasId).concat(compIndex));
          var canvas = canvasDom;

          if ((canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.tagName) !== 'CANVAS') {
            canvas = canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.getElementsByTagName('canvas')[0];
          }

          canvasSetting(canvas, canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.offsetWidth, canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.offsetHeight);
        }
      }, 1000);
    });
  };

  useEffect(function () {
    initCanvas(); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  useImperativeHandle(ref, function () {
    return {
      getImage: getImage,
      clear: handleClear
    };
  });
  return /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({
    className: "van-signature ".concat(className)
  }, rest), {}, {
    children: /*#__PURE__*/_jsx(View, {
      className: "van-signature__inner spcanvas_WEAPP",
      ref: wrapRef,
      children: /*#__PURE__*/_jsx(Canvas, {
        className: "van-signature-canvas",
        id: "".concat(canvasId).concat(compIndex),
        ref: canvasRef,
        canvasId: "".concat(canvasId).concat(compIndex),
        disableScroll: true,
        type: "2d",
        onTouchStart: startEventHandler,
        onTouchMove: moveEventHandler,
        onTouchEnd: endEventHandler
      })
    })
  }));
});
export { Signature };
export default Signature;