From 5f00696dfb25bc90034448ceb634ed1ef256681a Mon Sep 17 00:00:00 2001
From: qiyunfeng-create <1940665526@qq.com>
Date: 星期四, 21 八月 2025 21:13:35 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/xiehe_website
---
src/components/sliderImg/sliderImg.js | 262 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 262 insertions(+), 0 deletions(-)
diff --git a/src/components/sliderImg/sliderImg.js b/src/components/sliderImg/sliderImg.js
new file mode 100644
index 0000000..db9063b
--- /dev/null
+++ b/src/components/sliderImg/sliderImg.js
@@ -0,0 +1,262 @@
+(function (window) {
+ let l = 50, // 婊戝潡杈归暱
+ r = 0, // 婊戝潡鍗婂緞
+ w = 300, // canvas瀹藉害
+ h = 150, // canvas楂樺害
+ PI = Math.PI;
+ let L = l + r * 2; // 婊戝潡瀹為檯杈归暱
+
+ function createCanvas(width, height) {
+ const canvas = createElement("canvas");
+ canvas.width = width;
+ canvas.height = height;
+ return canvas;
+ }
+
+ function createImg(onload, info) {
+ const img = createElement("img");
+ img.crossOrigin = "Anonymous";
+ img.onload = onload;
+ img.onerror = () => {
+ img.src = getRandomImg(info.backgroundImage);
+ };
+ img.src = getRandomImg(info.backgroundImage);
+ return img;
+ }
+
+ function createImg2(onload, info) {
+ const block = createElement("img");
+ block.crossOrigin = "Anonymous";
+ block.onload = onload;
+ block.onerror = () => {
+ block.src = getRandomImg(info.frontImage);
+ };
+ block.src = getRandomImg(info.frontImage);
+ return block;
+ }
+
+ function createElement(tagName) {
+ return document.createElement(tagName);
+ }
+
+ function addClass(tag, className) {
+ tag.classList.add(className);
+ }
+
+ function removeClass(tag, className) {
+ tag.classList.remove(className);
+ }
+
+ function getRandomImg(val) {
+ return val;
+ }
+
+ function sum(x, y) {
+ return x + y;
+ }
+
+ function square(x) {
+ return x * x;
+ }
+
+ function clear(obj) {
+ obj.canvasCtx.clearRect(0, 0, w, h);
+ obj.blockCtx.clearRect(0, 0, w, h);
+ obj.block.width = w;
+ document.getElementById("msg").innerHTML = null;
+ document.getElementById("captcha").innerHTML = null;
+ }
+
+ class jigsaw {
+ constructor(el, success, fail, info, parent) {
+ this.el = el;
+ this.success = success;
+ this.fail = fail;
+ this.info = info;
+ this.parent = parent;
+ }
+
+ init() {
+ if (this.info) {
+ const { backgroundHeight, backgroundWidth, frontHeight, frontWidth } =
+ this.info;
+ l = frontHeight;
+ r = 0;
+ w = backgroundWidth;
+ h = backgroundHeight;
+ L = frontWidth;
+ }
+ this.initDOM();
+ this.initImg();
+ this.bindEvents();
+ }
+
+ initDOM() {
+ const canvas = createCanvas(w, h); // 鐢诲竷
+ const block = canvas.cloneNode(true); // 婊戝潡
+ const msg = createElement("div");
+ const sliderContainer = createElement("div");
+ const refreshIcon = createElement("div");
+ const sliderMask = createElement("div");
+ const slider = createElement("div");
+ const sliderIcon = createElement("span");
+ const text = createElement("span");
+
+ block.className = "block";
+ msg.id = "msg";
+ sliderContainer.className = "sliderContainer";
+ refreshIcon.className = "refreshIcon";
+ sliderMask.className = "sliderMask";
+ slider.className = "slider";
+ sliderIcon.className = "sliderIcon";
+ text.innerHTML = "鍚戝彸婊戝姩婊戝潡濉厖鎷煎浘";
+ text.className = "sliderText";
+
+ const el = this.el;
+ el.appendChild(canvas);
+ el.appendChild(refreshIcon);
+ el.appendChild(block);
+ el.appendChild(msg);
+ slider.appendChild(sliderIcon);
+ sliderMask.appendChild(slider);
+ sliderContainer.appendChild(sliderMask);
+ sliderContainer.appendChild(text);
+ el.appendChild(sliderContainer);
+
+ Object.assign(this, {
+ canvas,
+ block,
+ sliderContainer,
+ refreshIcon,
+ slider,
+ sliderMask,
+ sliderIcon,
+ text,
+ msg,
+ canvasCtx: canvas.getContext("2d"),
+ blockCtx: block.getContext("2d"),
+ addClass,
+ clear,
+ });
+ }
+
+ initImg() {
+ const block = createImg2(() => {
+ this.blockCtx.drawImage(block, 0, 0, w, h);
+ }, this.info);
+ const img = createImg(() => {
+ this.canvasCtx.drawImage(img, 0, 0, w, h);
+ }, this.info);
+ this.img = img;
+ }
+
+ clean() {
+ this.canvasCtx.clearRect(0, 0, w, h);
+ this.blockCtx.clearRect(0, 0, w, h);
+ this.block.width = w;
+ }
+
+ bindEvents() {
+ this.el.onselectstart = () => false;
+ this.refreshIcon.onclick = () => {
+ this.reset();
+ };
+
+ let originX,
+ originY,
+ trail = [],
+ isMouseDown = false;
+ var that = this;
+
+ var handleDragStart = function (e) {
+ originX = e.clientX || e.touches[0].clientX;
+ originY = e.clientY || e.touches[0].clientY;
+ // (originX = e.x), (originY = e.y);
+ isMouseDown = true;
+ };
+
+ var handleDragMove = function (e) {
+ if (!isMouseDown) return false;
+ var eventX = e.clientX || e.touches[0].clientX;
+ var eventY = e.clientY || e.touches[0].clientY;
+ const moveX = eventX - originX;
+ const moveY = eventY - originY;
+ if (moveX < 0 || moveX + 38 >= w) return false;
+ that.slider.style.left = moveX + "px";
+ var blockLeft = ((w - 40 - 20) / (w - 40)) * moveX;
+ that.block.style.left = blockLeft + "px";
+ addClass(that.sliderContainer, "sliderContainer_active");
+ that.sliderMask.style.width = moveX + "px";
+ console.log(that.sliderMask.offsetLeft, 4545);
+ trail.push(moveY);
+ };
+
+ var handleDragEnd = function (e) {
+ if (!isMouseDown) return false;
+ isMouseDown = false;
+ var eventX = e.clientX || e.changedTouches[0].clientX;
+ if (eventX == originX) return false;
+ removeClass(that.sliderContainer, "sliderContainer_active");
+ that.trail = trail;
+ const { left } = that.verify();
+ const { prefix } = that.info;
+ if (left && prefix) {
+ that.success(left, prefix, that);
+ } else {
+ addClass(that.sliderContainer, "sliderContainer_fail");
+ that.fail && that.fail(left, prefix);
+ setTimeout(() => {
+ that.reset();
+ }, 1000);
+ }
+ };
+ this.slider.addEventListener("mousedown", handleDragStart);
+ this.slider.addEventListener("touchstart", handleDragStart);
+ document.addEventListener("mousemove", handleDragMove);
+ document.addEventListener("touchmove", handleDragMove);
+ document.addEventListener("mouseup", handleDragEnd);
+ document.addEventListener("touchend", handleDragEnd);
+
+ document.addEventListener("mousedown", function () {
+ return false;
+ });
+ document.addEventListener("touchstart", function () {
+ return false;
+ });
+ // this.slider.addEventListener("mousedown");
+ // document.addEventListener("mousemove");
+ // document.addEventListener("mouseup");
+ }
+
+ verify() {
+ const arr = this.trail; // 鎷栧姩鏃秠杞寸殑绉诲姩璺濈
+ const average = arr.reduce(sum) / arr.length; // 骞冲潎鍊�
+ const deviations = arr.map((x) => x - average); // 鍋忓樊鏁扮粍
+ const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length); // 鏍囧噯宸�
+ const left = parseInt(this.block.style.left);
+ return {
+ // spliced: Math.abs(left - this.x) < 10,
+ // TuringTest: average !== stddev, // 鍙槸绠�鍗曠殑楠岃瘉鎷栧姩杞ㄨ抗锛岀浉绛夋椂涓�鑸负0锛岃〃绀哄彲鑳介潪浜轰负鎿嶄綔
+ left,
+ // x: this.x,
+ };
+ }
+
+ reset() {
+ this.sliderContainer.className = "sliderContainer";
+ this.slider.style.left = 0;
+ this.block.style.left = 0;
+ this.sliderMask.style.width = 0;
+ clear(this);
+ // this.initImg();
+ this.parent.getImg();
+ console.log(this.parent);
+ }
+ }
+
+ window.jigsaw = {
+ init: function (element, success, fail, info, callback) {
+ new jigsaw(element, success, fail, info, callback).init();
+ },
+ };
+})(window);
--
Gitblit v1.9.1