@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
188 lines • 8.21 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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 { get } from '../default-props';
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 _useState = useState(get().Signature),
_useState2 = _slicedToArray(_useState, 1),
d = _useState2[0];
var _defaultProps$d$props = _objectSpread(_objectSpread(_objectSpread({}, defaultProps), d), props),
canvasId = _defaultProps$d$props.canvasId,
lineWidth = _defaultProps$d$props.lineWidth,
strokeStyle = _defaultProps$d$props.strokeStyle,
className = _defaultProps$d$props.className,
rest = _objectWithoutProperties(_defaultProps$d$props, _excluded);
var canvasRef = useRef(null);
var wrapRef = useRef(null);
var _useState3 = useState(0),
_useState4 = _slicedToArray(_useState3, 2),
canvasHeight = _useState4[0],
setCanvasHeight = _useState4[1];
var _useState5 = useState(0),
_useState6 = _slicedToArray(_useState5, 2),
canvasWidth = _useState6[0],
setCanvasWidth = _useState6[1];
var ctx = useRef(null);
var _useState7 = useState(componentIndex++),
_useState8 = _slicedToArray(_useState7, 1),
compIndex = _useState8[0];
var startEventHandler = function startEventHandler() {
if (ctx.current) {
ctx.current.beginPath();
ctx.current.lineWidth = lineWidth;
ctx.current.strokeStyle = strokeStyle;
}
};
var moveEventHandler = function moveEventHandler(event) {
event.preventDefault();
event.stopPropagation();
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);
base64ToFile(base64).then(function (filePath) {
var _ctx$current4;
resolve({
tempFilePath: filePath,
base64: base64,
canvas: (_ctx$current4 = ctx.current) === null || _ctx$current4 === void 0 ? void 0 : _ctx$current4.canvas
});
}).catch(function (err) {
console.error("@anmjs/vantui: signature \u8F6C\u6362\u56FE\u7247\u5931\u8D25:", err);
reject(err);
});
});
};
var base64ToFile = function base64ToFile(base64) {
return new Promise(function (resolve, reject) {
var data = base64.replace(/^data:image\/\w+;base64,/, '');
var buffer = Taro.base64ToArrayBuffer(data);
var randomFileName = "".concat(Date.now(), "-").concat(Math.random().toString(36).slice(2), ".png");
var filePath = "".concat(Taro.env.USER_DATA_PATH, "/").concat(randomFileName);
Taro.getFileSystemManager().writeFile({
filePath: filePath,
data: buffer,
encoding: 'binary',
success: function success() {
resolve(filePath);
},
fail: function fail(err) {
console.error('@anmjs/vantui: signature failed to save file: ', 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;