From d0f88eb3b1c9d6bef5ac15a4dcccd9acd4b8665d Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 17 Apr 2022 11:42:20 +0800 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=89=8B?= =?UTF-8?q?=E5=8A=BF=E7=BC=A9=E6=94=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/extensions/longbow.extensions.js | 107 +++++++++++++++++- 1 file changed, 104 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor/wwwroot/lib/extensions/longbow.extensions.js b/src/BootstrapBlazor/wwwroot/lib/extensions/longbow.extensions.js index bf8a5d270..7a485f492 100644 --- a/src/BootstrapBlazor/wwwroot/lib/extensions/longbow.extensions.js +++ b/src/BootstrapBlazor/wwwroot/lib/extensions/longbow.extensions.js @@ -118,7 +118,7 @@ }); $.fn.extend({ - drag: function (star, move, end) { + drag: function (start, move, end) { var $this = $(this); var handleDragStart = function (e) { @@ -130,8 +130,8 @@ document.addEventListener('mouseup', handleDragEnd); document.addEventListener('touchend', handleDragEnd); - if ($.isFunction(star)) { - star.call($this, e); + if ($.isFunction(start)) { + start.call($this, e); } }; @@ -157,6 +157,107 @@ $this.on('mousedown', handleDragStart); $this.on('touchstart', handleDragStart); + }, + touchScale: function (cb, options) { + options = $.extend({ max: null, min: 0.195 }, options); + var eleImg = this; + var store = { + scale: 1 + }; + + // 缩放处理 + eleImg.addEventListener('touchstart', function (event) { + var touches = event.touches; + var events = touches[0]; + var events2 = touches[1]; + + if (!events) { + return; + } + + event.preventDefault(); + + store.pageX = events.pageX; + store.pageY = events.pageY; + + store.moveable = true; + + if (events2) { + store.pageX2 = events2.pageX; + store.pageY2 = events2.pageY; + } + + store.originScale = store.scale || 1; + }); + + document.addEventListener('touchmove', function (event) { + if (!store.moveable) { + return; + } + event.preventDefault(); + + var touches = event.touches; + var events = touches[0]; + var events2 = touches[1]; + + if (events2) { + if (!store.pageX2) { + store.pageX2 = events2.pageX; + } + if (!store.pageY2) { + store.pageY2 = events2.pageY; + } + + var getDistance = function (start, stop) { + return Math.hypot(stop.x - start.x, stop.y - start.y); + }; + + var zoom = getDistance({ + x: events.pageX, + y: events.pageY + }, { + x: events2.pageX, + y: events2.pageY + }) / + getDistance({ + x: store.pageX, + y: store.pageY + }, { + x: store.pageX2, + y: store.pageY2 + }); + + var newScale = store.originScale * zoom; + + if (options.max != null && newScale > options.max) { + newScale = options.max; + } + + if (options.min != null && newScale < options.min) { + newScale = options.min; + } + + store.scale = newScale; + + if ($.isFunction(cb)) { + cb.call($this, newScale); + } + } + }); + + document.addEventListener('touchend', function () { + store.moveable = false; + + delete store.pageX2; + delete store.pageY2; + }); + + document.addEventListener('touchcancel', function () { + store.moveable = false; + + delete store.pageX2; + delete store.pageY2; + }); } }); -- Gitee From ab0a3cd8b0307009bedc1b2dbdd43f104669677c Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 17 Apr 2022 11:42:33 +0800 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20ImageViewer=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E6=89=8B=E5=8A=BF=E7=BC=A9=E6=94=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/ImageViewer/ImageViewer.js | 6 ++++++ .../wwwroot/js/bootstrap.blazor.bundle.min.js | 2 +- src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.min.js | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.js b/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.js index 6dc8c45ce..a55805a4c 100644 --- a/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.js +++ b/src/BootstrapBlazor/Components/ImageViewer/ImageViewer.js @@ -149,6 +149,12 @@ } ); + $prevImg.touchScale(function (scale) { + processImage(function () { + return scale; + }); + }); + // 点击遮罩关闭功能 $mask.on('click', function () { $closeButton.trigger('click'); diff --git a/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js b/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js index 148fb4475..5ad3ff421 100644 --- a/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js +++ b/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js @@ -13,4 +13,4 @@ var QRCode;!function(){function a(a){this.mode=c.MODE_8BIT_BYTE,this.data=a,this /*! Summernote v0.8.18 | (c) 2013- Alan Hong and other contributors | MIT license */ !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("jquery"));else if("function"==typeof define&&define.amd)define(["jquery"],e);else{var n="object"==typeof exports?e(require("jquery")):e(t.jQuery);for(var o in n)("object"==typeof exports?exports:t)[o]=n[o]}}(self,(function(t){return(()=>{"use strict";var e={9458:e=>{e.exports=t}},n={};function o(t){var i=n[t];if(void 0!==i)return i.exports;var r=n[t]={exports:{}};return e[t](r,r.exports,o),r.exports}o.amdO={},o.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return o.d(e,{a:e}),e},o.d=(t,e)=>{for(var n in e)o.o(e,n)&&!o.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};return(()=>{o.r(i);var t=o(9458),e=o.n(t);function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t,e){for(var n=0;n'),u=s('