pixuireactcomponents 1.4.8 → 1.4.9

package/index.d.ts

@@ -6,6 +6,7 @@ export { ImageViewer } from "./src/components/react/app/imageViewer/imageViewer"
 export { ToggleGroup } from "./src/components/react/app/togglegroup/ToggleGroup";
 export { VideoPlayer } from "./src/components/react/app/videoPlayer/VideoPlayer";
 export { WheelPicker } from "./src/components/react/app/wheelPicker/WheelPicker";
+export { ScratchCard } from "src/components/react/app/scratchCard/ScratchCard";
 export { GradientText } from "./src/components/react/base/gradient/GradientText";
 export { PVideo } from "./src/components/react/base/pixVideo/PixVideo";
 export { OutlineText } from "./src/components/react/base/outlinetext/OutlineText";

package/index.js

@@ -8,6 +8,7 @@ export { Slider } from './src/components/react/app/slider/Slider';
 export { ToggleGroup } from './src/components/react/app/togglegroup/ToggleGroup';
 export { VideoPlayer } from './src/components/react/app/videoPlayer/VideoPlayer';
 export { WheelPicker } from './src/components/react/app/wheelPicker/WheelPicker';
+export { ScratchCard } from 'src/components/react/app/scratchCard/ScratchCard';
 export { GradientText } from './src/components/react/base/gradient/GradientText';
 export { PVideo } from './src/components/react/base/pixVideo/PixVideo';
 export { OutlineText } from './src/components/react/base/outlinetext/OutlineText';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.4.8",
+    "version": "1.4.9",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {

package/src/components/react/app/scratchCard/ScratchCard.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties, h } from 'preact';
+export interface ScratchCardProps {
+    cardId?: string;
+    ratio?: number;
+    moveRadius?: number;
+    startCallback?: Function;
+    clearCallback?: Function;
+    coverImage?: string;
+    coverColor?: string;
+    coverWidth: number;
+    coverHeight: number;
+    coverStyle?: CSSProperties;
+    resultStyle?: CSSProperties;
+}
+export declare const ScratchCard: (props: ScratchCardProps, ref: any) => h.JSX.Element;

package/src/components/react/app/scratchCard/ScratchCard.js

@@ -0,0 +1,217 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { h } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+// export type ScratchCardRef = {
+//     // canvasContainer: HTMLCanvasElement;
+//     // initDone: boolean;
+//     clearCard: () => void;
+//   };
+var defaultStyle = {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+};
+export var ScratchCard = function (props, ref) {
+    var _a = props.cardId, cardId = _a === void 0 ? 'scratch-card' : _a, _b = props.ratio, ratio = _b === void 0 ? 1 : _b, startCallback = props.startCallback, clearCallback = props.clearCallback, coverImage = props.coverImage, coverColor = props.coverColor, coverWidth = props.coverWidth, coverHeight = props.coverHeight, coverStyle = props.coverStyle, resultStyle = props.resultStyle, _c = props.moveRadius, moveRadius = _c === void 0 ? 10 : _c;
+    var canvasRef = useRef(null);
+    var _d = useState(false), isResultLoad = _d[0], setIsResultLoad = _d[1];
+    // 记录鼠标位置，用作平滑效果
+    var lastPos = { x: 0, y: 0 };
+    // 记录首次刮卡
+    var isStarted = false;
+    // 记录是否正在刮卡
+    var isDrawing = false;
+    // 已经刮过的元素数量
+    var scratchedPixels = 0;
+    // canvas元素二维数组
+    var scratchMap;
+    useEffect(function () {
+        var drawCanvas = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var canvas, ctx;
+            return __generator(this, function (_a) {
+                canvas = canvasRef.current;
+                ctx = canvas.getContext('2d');
+                console.log("canvas: ", canvas, ctx);
+                if (ctx) {
+                    if (coverColor) {
+                        ctx.fillStyle = coverColor;
+                        ctx.fillRect(0, 0, canvas.width, canvas.height);
+                        setIsResultLoad(true);
+                    }
+                }
+                scratchMap = Array.from({ length: canvas.height }, function () { return Array(canvas.width).fill(false); });
+                canvas.addEventListener('mousedown', handleMouseDown);
+                canvas.addEventListener('mouseup', handleMouseUp);
+                canvas.addEventListener('mousemove', handleMouseMove);
+                return [2 /*return*/];
+            });
+        }); };
+        drawCanvas();
+        return function () { removeListener(); };
+    }, [coverColor]);
+    var drawImage = function () {
+        var canvas = canvasRef.current;
+        var ctx = canvas.getContext('2d');
+        if (ctx) {
+            var image = document.getElementById("".concat(cardId, "_img"));
+            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+            setIsResultLoad(true);
+        }
+    };
+    var handleMouseDown = function (e) {
+        // console.log("handleMouseDown: ", e )
+        isDrawing = true;
+        if (!isStarted && startCallback) {
+            startCallback();
+            isStarted = true;
+        }
+        var rect = canvasRef.current.getBoundingClientRect();
+        var x = e.clientX - rect.left;
+        var y = e.clientY - rect.top;
+        lastPos = { x: x, y: y };
+        handleScratch(x, y);
+    };
+    var handleMouseUp = function (e) {
+        // console.log("handleMouseUp: ", e )
+        isDrawing = false;
+        handleIfComplete();
+    };
+    var handleMouseMove = function (e) {
+        // console.log("handleMouseMove: ", isDrawing, e )
+        if (!isDrawing) {
+            return;
+        }
+        var rect = canvasRef.current.getBoundingClientRect();
+        var x = e.clientX - rect.left;
+        var y = e.clientY - rect.top;
+        var ctx = canvasRef.current.getContext('2d');
+        if (ctx) {
+            ctx.globalCompositeOperation = "destination-out";
+            ctx.beginPath();
+            ctx.moveTo(lastPos.x, lastPos.y);
+            ctx.lineTo(x, y);
+            ctx.strokeStyle = 'rgba(0,0,0,1)';
+            ctx.lineWidth = moveRadius * 2;
+            ctx.stroke();
+        }
+        lastPos = { x: x, y: y };
+        handleScratch(x, y);
+    };
+    var handleScratch = function (x, y) {
+        var canvas = canvasRef.current;
+        var ctx = canvas.getContext('2d');
+        // console.log("handleScratch: ", e )
+        if (ctx) {
+            for (var i = -moveRadius; i <= moveRadius; i++) {
+                for (var j = -moveRadius; j <= moveRadius; j++) {
+                    var dx = x + i;
+                    var dy = y + j;
+                    if (dx >= 0 && dx < canvas.width && dy >= 0 && dy < canvas.height && !scratchMap[dy][dx]) {
+                        scratchMap[dy][dx] = true;
+                        scratchedPixels++;
+                    }
+                }
+            }
+            ctx.globalCompositeOperation = coverImage ? "source-out" : "destination-out";
+            ctx.beginPath();
+            ctx.arc(x, y, moveRadius, 0, Math.PI * 2);
+            ctx.fill();
+        }
+    };
+    var handleIfComplete = function () {
+        var canvas = canvasRef.current;
+        var ctx = canvas.getContext('2d');
+        if (ctx) {
+            // getImageData方法目前暂不支持
+            // const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            // const pixels = imageData.data;
+            // let scratchedPixels = 0;
+            // for(let i = 0; i < pixels.length; i += 4) {
+            //     if(pixels[i + 3] === 0) {
+            //         scratchedPixels++;
+            //     }
+            // }
+            // if((scratchedPixels / (pixels.length / 4)) > ratio) {
+            //     if(clearCallback) {
+            //         clearCallback();
+            //     }
+            //     clearCard();
+            // }
+            var scratchedRatio = scratchedPixels / (canvas.width * canvas.height);
+            if (scratchedRatio > ratio) {
+                if (clearCallback) {
+                    clearCallback();
+                }
+                clearCard();
+            }
+        }
+    };
+    var clearCard = function () {
+        var canvas = canvasRef.current;
+        var ctx = canvas.getContext('2d');
+        if (ctx) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            removeListener();
+        }
+    };
+    var removeListener = function () {
+        var canvas = canvasRef.current;
+        if (canvas) {
+            canvas.removeEventListener('mousedown', handleMouseDown);
+            canvas.removeEventListener('mouseup', handleMouseUp);
+            canvas.removeEventListener('mousemove', handleMouseMove);
+        }
+    };
+    return (h("div", { id: cardId, style: __assign({}, defaultStyle) },
+        isResultLoad && h("div", { style: __assign({}, resultStyle) }),
+        coverImage && h("img", { style: { position: 'absolute', width: "1px", height: "1px" }, id: "".concat(cardId, "_img"), src: coverImage, onLoad: drawImage }),
+        h("canvas", { ref: canvasRef, width: coverWidth, height: coverHeight, style: __assign(__assign({}, coverStyle), { position: 'absolute' }) })));
+};