Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/桌面模式下图片预览支持滚轮缩放与鼠标拖放 #72

Merged
merged 8 commits into from
Nov 9, 2024

Conversation

Memoyu
Copy link
Contributor

@Memoyu Memoyu commented Oct 21, 2024

大佬,斗胆pr一下,望不要嫌弃!🤪
看着桌面端下没法缩放和拖放预览图片,故从ant blazor那抄了一个过来;🤖

@Yu-Core
Copy link
Owner

Yu-Core commented Oct 25, 2024

感谢pr,不过我更倾向于使用一个新的js库替换原本的zoom.js
不知道你是否感兴趣,难度不会很大
tragopan看着还可以,当然,如果你有更好的替代就更好了

@Memoyu
Copy link
Contributor Author

Memoyu commented Oct 27, 2024

感谢pr,不过我更倾向于使用一个新的js库替换原本的zoom.js 不知道你是否感兴趣,难度不会很大 tragopan看着还可以,当然,如果你有更好的替代就更好了

这个似乎看着更靠谱,那我直接替换😁

@Memoyu
Copy link
Contributor Author

Memoyu commented Oct 27, 2024

我在后来找到一个社区活跃度相对比较高的js库: timmywil/panzoom
感觉功能还是比较强大的,而且包也足够小。

@Yu-Core
Copy link
Owner

Yu-Core commented Oct 28, 2024

timmywil/panzoom#662 timmywil/panzoom#671 这两个问题似乎无法解决

@@ -484,29 +484,21 @@ html {
opacity: 0.5 !important;
}

.preview-image-dialog__image__wraper {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

css这里改动后,和之前的行为不一致
image

image

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

使用新的js库,文件夹名也应该改变

@Yu-Core
Copy link
Owner

Yu-Core commented Nov 5, 2024

不好意思,请问有什么进展吗?#72 (comment)
另外,我不太明白css有什么改的必要

@Memoyu
Copy link
Contributor Author

Memoyu commented Nov 5, 2024

不好意思,请问有什么进展吗?#72 (comment) 另外,我不太明白css有什么改的必要

在项目中这两个问题并没有影响正常功能,wasm情况下使用Firefox浏览功能正常(浅浅测试了一下)。
改动css是因为在引入panzoom后原有样式会导致scale中心点偏移。

@Yu-Core
Copy link
Owner

Yu-Core commented Nov 5, 2024

timmywil/panzoom#662
用安卓FireFox浏览器(firefox132.0版本)测试它的demo是特别明显的,https://timmywil.com/panzoom/demo/

Screenrecorder-2024-11-05-22-37-22-366.1.mp4

timmywil/panzoom#671
和之前的js库或其他应用的图片预览比,需要更大的捏合力度完成缩放,这个比较影响体验

中心点偏移,我把css改成原本的测了几遍没有发现问题
image
image

20241105_225840.mp4

移动端也是没有发现问题

还有,有没有发现特别长或特别宽的图片显示不完整
image

@Memoyu
Copy link
Contributor Author

Memoyu commented Nov 5, 2024

确实仔细体验上 AndroidFirefox的缩放体验会很难绷,我尝试切换你提供的js库;
css问题可能是我当时调整后导致的....原本就是没问题的😶‍🌫️😶‍🌫️;
我这边看着并没有显示不全,超长或超宽似乎都正常;
Snipaste_2024-11-06_00-28-11

Snipaste_2024-11-06_00-29-24

@Memoyu
Copy link
Contributor Author

Memoyu commented Nov 9, 2024

@Yu-Core
尝试替换了一下tragopan,这个组件似乎并不支持移动端touch......😂

@Yu-Core
Copy link
Owner

Yu-Core commented Nov 9, 2024

确实如此
所以又物色了一个新的库 https://github.com/anvaka/panzoom
只做了下面的更改,测试了几遍,没有问题

zoom-helper.js

export function initZoom(selector) {
    var el = document.querySelector(selector);
    if (el == null) {
        return;
    }

    el.panzoom = panzoom(el, {
        maxZoom: 4,
        minZoom: 1,
        smoothScroll: false,
        zoomDoubleClickSpeed: 1,
        onTouch: function (e) {
            //This is necessary, otherwise the custom double - click event cannot be triggered on the touchscreen device
            return false; // tells the library to not preventDefault.
        },
        onDoubleClick: function (e) {
            reset(selector);
            return true; // tells the library to not preventDefault, and not stop propagation
        }
    });
}

export function reset(selector) {
    var el = document.querySelector(selector);
    if (el == null) {
        return;
    }

    el.panzoom.zoomTo(0, 0, 1);
    el.panzoom.moveTo(0, 0);
    el.panzoom.zoomAbs(0, 0, 1);
}

@Memoyu
Copy link
Contributor Author

Memoyu commented Nov 9, 2024

可行的,只不过wasm移动端没能测了,项目启动使用ip访问始终报错,你有空可以再试试,别的端粗略测试都没啥问题👍

set => SetVisible(value);
}
[Inject]
private IPlatformIntegration PlatformIntegration { get; set; } = default!;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

没有被使用

@@ -55,7 +55,8 @@

<link href="_content/Masa.Blazor/css/masa-blazor.min.css" rel="stylesheet">

<link href="_content/SwashbucklerDiary.Rcl/css/materialdesign/v7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
<link href="_content/SwashbucklerDiary.Rcl/css/materialdesign/v7.2.96/css/materialdesignicons.min.css"
rel="stylesheet">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

多余的换行

<MIcon>
mdi-restore
</MIcon>
</MButton>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

图片预览一般都没有这个按钮,已经有双击重置的情况下,感觉没什么必要

@Memoyu
Copy link
Contributor Author

Memoyu commented Nov 9, 2024

🙌OK

@Yu-Core Yu-Core merged commit d897c12 into Yu-Core:master Nov 9, 2024
@Yu-Core
Copy link
Owner

Yu-Core commented Nov 9, 2024

Thanks @Memoyu

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants