feat: ImagePreview 组件支持平移查看细节

mark9804 · Jan 3, 2025 · 75ebe1c · 75ebe1c
1 parent 7926f24
commit 75ebe1c
Show file tree

Hide file tree

Showing 2 changed files with 131 additions and 6 deletions.
diff --git a/docs/.vitepress/theme/components/ElysiumUI/ElyImagePreview.vue b/docs/.vitepress/theme/components/ElysiumUI/ElyImagePreview.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { OnClickOutside } from "@vueuse/components";
-import { ref, computed, onUnmounted, watch } from "vue";
+import { useElementBounding, useWindowSize } from "@vueuse/core";
+import { ref, computed, onUnmounted, watch, useTemplateRef } from "vue";
 import { useImageStore } from "../../../stores/imageStore";
+import { clamp } from "./_utils/numberUtils";
 
 const imageStore = useImageStore();
 
@@ -33,9 +35,34 @@ function handleClose() {
 }
 
 const scale = ref(1);
+const offset = ref({ translateX: 0, translateY: 0 }); // 最终单位 px
 const MIN_SCALE = 0.5;
 const MAX_SCALE = 3;
+const PAN_THRESHOLD = 2;
 const lastTouchDistance = ref(0);
+const imageRef = useTemplateRef("imageRef");
+
+const { width: imageWidth, height: imageHeight } = useElementBounding(imageRef);
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+
+enum ScrollIntent {
+  Resize = 0,
+  Pan = 1,
+}
+
+const scrollIntent = ref(ScrollIntent.Resize);
+
+watch(
+  () => [imageWidth.value, imageHeight.value],
+  ([newWidth, newHeight]) => {
+    // 如果图像某一边尺寸超过窗口，默认操作为平移
+    if (newWidth > windowWidth.value || newHeight > windowHeight.value) {
+      scrollIntent.value = ScrollIntent.Pan;
+    } else {
+      scrollIntent.value = ScrollIntent.Resize;
+    }
+  }
+);
 
 let rafId: number | null = null; // 节流用
 
@@ -44,29 +71,51 @@ function updateScale(delta: number) {
 
   rafId = requestAnimationFrame(() => {
     const newScale = scale.value + delta * 0.01;
-    scale.value = Math.min(Math.max(newScale, MIN_SCALE), MAX_SCALE);
+    scale.value = clamp(newScale, MIN_SCALE, MAX_SCALE);
     rafId = null;
   });
 }
 
+function updateOffset(deltaTranslateX = 0, deltaTranslateY = 0) {
+  // 最大 offset 不能超过 100% 图像尺寸
+  if (Math.abs(deltaTranslateX) > PAN_THRESHOLD) {
+    offset.value.translateX = clamp(
+      offset.value.translateX + deltaTranslateX,
+      imageWidth.value * -1,
+      imageWidth.value
+    );
+  }
+  if (Math.abs(deltaTranslateY) > PAN_THRESHOLD) {
+    offset.value.translateY = clamp(
+      offset.value.translateY + deltaTranslateY,
+      imageHeight.value * -1,
+      imageHeight.value
+    );
+  }
+}
+
 function handleScroll(event: WheelEvent) {
   // 阻止默认滚动行为，避免 scroll chaining
   event.preventDefault();
 
   // 只处理 pinch zoom 手势
   //（触摸板上的捏合手势会转换为 ctrl + wheel 事件）
   if (event.ctrlKey) {
+    // 有 Ctrl，一定是缩放
     updateScale(-event.deltaY);
   } else {
-    // TODO: 平移滚动时平移图片
+    // 没有 Ctrl，分流意图
+    if (scrollIntent.value === ScrollIntent.Resize) {
+      updateScale(-event.deltaY);
+    } else {
+      updateOffset(-event.deltaX, -event.deltaY);
+    }
   }
 }
 
 function handleTouch(event: TouchEvent) {
   // 处理单指事件（点击等）
   if (event.touches.length === 1) {
-    // TODO: 平移滚动时平移图片
-    return;
   }
 
   // 过滤双指以外的触摸事件
@@ -147,8 +196,11 @@ onUnmounted(() => {
             <img
               class="elysium-ui__image-preview--image w-full max-w-screen-md object-contain flex-1"
               :src="imgList[imgIndex].src"
-              :style="{ transform: `scale(${scale})` }"
+              :style="{
+                transform: `scale(${scale}) translate3d(${offset.translateX}px, ${offset.translateY}px, 0)`,
+              }"
               alt="Image preview"
+              ref="imageRef"
             />
           </OnClickOutside>
           <!-- Switch image -->

diff --git a/docs/breves/works/web-history-by-jay-hoffman/chapter-1-birth.md b/docs/breves/works/web-history-by-jay-hoffman/chapter-1-birth.md
@@ -0,0 +1,73 @@
+---
+title: 互联网历史 第一章：诞生
+tags:
+  - 翻译
+  - 互联网历史
+  - Jay Hoffman
+---
+
+# 互联网历史 第一章：诞生
+
+> 原文链接：https://css-tricks.com/chapter-1-birth/
+
+Tim Berners-Lee 爵士喜欢信息到了一种痴迷的程度，甚至可以说信息就是他的终身工作。在过去四十多年里，他一直致力于理解信息是如何被{规划:mapped}、储存和传输的：信息如何在人与人之间传递，信息的种子如何成为产生巨大变革的根源。而他之后的提案，“{信息管理，一项提案:Information Management, a Proposal}”，最终成为了{互联网:World Wide Web}的基础。
+
+![Tim Berners-Lee 爵士](https://cdn.sa.net/2024/09/17/IJWnzLl7uNipM19.png =256x)
+
+信息是互联网的核心功能。一串串字节流在世界中间穿梭，而这些字节流上承载着的正是知识。这种传输机制——也被我们叫做互联网——是由两样东西的交集组成的。第一个是{因特网:Internet}，使得通过网络实现数据交换成为可能的技术；第二个是超文本，为互联网的使用奠定基础的概念。这两样东西被 Tim Burners-Lee 爵士整合到了一起。而且当他把这件事做完之后，他干了一件更不可思议的事情：他把互联网贡献给了所有人，让每个人都能免费使用。
+
+当 Burners-Lee 向他的上级提交了“信息管理，一个提案”之后，他的上级只在开头简单写了[一句批复](http://info.cern.ch/Proposal.html)就退回了提案：
+
+> 很含糊，但是十分令人激动……
+
+互联网不是注定会被建立起来的。如果不是从现在的角度来看的话，这份提案实在是过于简单，甚至简单到不足以让它生效。换句话说，它很难推广。Berners-Lee在很多方面确实是专家，但他从来不是一个厉害的推销员。虽然他很喜欢他的因特网，但他也得想办法说服所有人，让他们也喜欢上他的主意。
+
+---
+
+Tim Berners-Lee 爵士有一颗天马行空的心。从对他的采访和他公开露面的场合，他给公众的印象一直是会从一个想法跳到下一个想法。他的思维总是比嘴快了好几步，这也使他的话语变得十分难懂。至今为止，他只接受了几次采访，在采访中也把他最伟大的成就隐藏在英国式的谦逊和自嘲当中。
+
+从 Tim Berners-Lee 爵士身上可以一眼看出的是他是个十分好奇的人——对任何事物都十分好奇。这份好奇心使得他能够在一些革命性的点子真正变得具有革命性之前来探索它们。但这通常也意味着他的注意力经常是分散的。这使得他经常忘记一些东西。他曾经在[一次采访](http://content.time.com/time/magazine/article/0,9171,137689,00.html)中说过“记住名字和脸对于我来说实在是太难受了”。他对于网络雏形的基本想法来源于他对于整理和关联起他的零散想法这么一个十分个人的需求。因此当他需要一个名词来指代这种管理方式的时候，他自然而然就想到了“网络”。
+
+在 Tim 还是个孩子的时候，他的父母总是对他的好奇心予以鼓励。他的父母，Conway Berners-Lee 和 Mary Lee Woods 都是数学家，也都是 Ferranti Mark I （20 世纪 50 年代世界上第一个成功商业化的电脑型号）的缔造者之一。他们十分鼓励还是个孩子的 Berners-Lee 拆开东西并且自己进行力所能及的工程学项目。很快 Berners-Lee 就把能研究的东西都研究遍了。他对于电器（准确来说是电脑）特别着迷。
+
+Berners-Lee 有时候会谈到[他少年时期和父亲的一次关于电脑在本身没有关联的信息中建立联系时的缺陷](https://www.pbs.org/show/for-everyone-net/)。“‘如果有电脑程序能够把没有联系的信息连结起来的话，”Berners-Lee 回忆道，“‘那么电脑能够变得更加强大’的想法一直跟随着我。再极端一点，这个世界也可以被看作是仅通过连结构建起来的。”尽管他还没有意识到这一点，但 Berners-Lee 很早就误打误撞提出了超文本的概念。他在数年后完善了它。
+
+---
+
+历史总是充满了把知识组织起来的尝试。一个经常被引用的例子是{亚历山大图书馆:Library of Alexandria}，古希腊神话中含有数以万计藏书的图书馆。
+
+![Library of Alexandria | [source](https://www.crystalinks.com/libraryofalexandria.html)](https://cdn.sa.net/2024/09/17/SdLDlctRk3b6mXC.jpg)
+
+而在世纪交替之际，比利时的 Paul Otlet 也做了类似的尝试。他的项目被叫做 {世界通用目录: Répertoire Bibliographique Universel}。Otlet 和一队研究者创建了一个包含超过 1500 万张索引卡片的信息库，每张卡片上写上了互不关联的碎片化信息。这些碎片化信息涵盖了从科学到地理的一系列主题。Otlet 设计了一套复杂的技术系统使他能够将某一张索引卡片关联到另一张。来自世界各地的研究者通过邮件或电报向他发送索引请求，而他的研究团队则通过一系列索引卡片检索出答案。一旦通过合适的方式关联起来，信息就拥有了无限大的用途。
+
+二战使得科研活动获得了迅速发展，而这让 Vanneaver Bush 想到了另一个新点子。在他发表在 1945 年的月刊《大西洋》上的一篇革命性的文章《[我们可能思考的方式](https://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/)》当中，Bush 设想了一个机械化内容库 Memex。和 Otlet 的通用目录类似，Memex 也存储了许多信息，但其与世界通用目录的不同之处在于 Memex 使用微缩胶卷代替了索引卡片。通过被叫做“关联索引”的流程，Memex 的用户可以通过一系列相互关联的链接网络寻找到相关的信息。
+
+尝试还在继续，但直到 1968 年，Ted Nelson 才终于在 20 多年前 Bush 发表在《大西洋》上的概念命名为“{超文本:Hypertext}”。
+
+超文本的本质是相关联的文本。Nelson 发现在现实世界中，我们经常会为概念之间的连接赋予意义。这时的我们能够意识到它们的重要性并且记住它们——比如电脑上便利贴的粘贴位置，冰箱里调料的摆放朝向，书架上书籍的排列顺序，尽管这些关联是无形的，但这些无形的标记每一个都有他们各自的含义，不管这些含义是有意识被赋予的还是下意识被赋予的。并且这些标记的完整含义只有从一个更加宏观的视角观察才能被认识到。超文本就是一种将相同类型的连接带入数字世界的方式。
+
+Nelson 对超文本最主要的贡献是一系列具有影响力的理论，以及一个长达数十年、至今依旧在进行的项目，Xanadu。和互联网类似，Xanadu 利用网络的力量，使用页面和链接构建了一个全球化的系统。然而，出于货币化和归属化的原因，Xanadu 更强调由一段文本追溯到其原作者的能力。这种被称为{转述: transculsion}的差异至今仍是一个无法解决的技术难题。
+
+Nelson 对超文本的兴趣源于 Berners-Lee 的“记忆和回忆”问题。Nelson 称其为“蜂鸟思维”。Nelson 发现他很难记住他在现实世界中创造的关联，而超文本为他提供了一种将这些数字化映射这些关联的方式，以便他日后能够调用这些信息。当万维网诞生时，Berners-Lee 和 Nelson 首次见面。他们交换了各自的想法和理念，而 Berners-Lee 也得以感谢 Nelson 为他提供极具影响力的宝贵想法。会议结束后，Berners-Lee 询问他是否能与 Nelson 合影，而 Nelson 则要求录制了一段简短的录像。二人都在纪念这一时刻——尽管他们知道自己最后都会忘记这一天。他们都开始寻求一种能够实现他们想法的技术手段。
+
+到了 80 年代中期，好几种超文本应用乘着个人计算技术的创新风潮萌生出来。超文本社区——一群相信超文本潜力的忠诚软件工程师——为研究员、学者，甚至普通个人计算机开发了多种超文本程序。每一个重要的实验室都有自己的超文本项目。他们共同在各自的软件中构建了全新的范式、流程和概念。这些流程和概念在当下看来已经见怪不怪，但在当时它们完全超出了人们的想象。
+
+在布朗大学，也就是 Ted Nelson 创造“超文本”一词时学习的地方，Norman Meyrowitz、Nancy Garrett 以及 Karen Catlin[^1] 第一次在他们的软件 [Intermedia](https://dl.acm.org/doi/10.1145/637069.637090) 中为超文本赋予了生命。在 Symbolics 公司，Janet Walker 正在实验一个“保存链接以便之后使用”的想法——类似于一种数字世界的快速拨号功能。她称其为“书签”。在马里兰大学，Ben Schneiderman 则尝试利用他的交互百科系统编写和链接世界上最大的知识来源。
+
+[^1]: 我查到的是 Karen E. Smith，不知道是不是同一个人
+
+南安普敦大学的 Wendy Hall 女士尝试通过她的程序 Microcosm 进一步扩展链接的生命力。用户创建的每一条链接都被存储在一个链接库（与主要文本分离的数据库，单独存放链接元数据）中。在 Microcosm 中，链接永远不会失效或过期。由于链接并不直接和文本绑定，如果它们之间的连接中断，链接也可以指向其他地方。你甚至可以在链接旁边写上一些文本来扩展解释一下这个链接为什么重要，或者为不同文档添加独立的不同层次的链接，例如在针对某个话题的文档中，可以添加为专家精选的一组引用列表，或是为普通用户提供更加友好的一组链接。
+
+在超文本的世界中，有邮件列表和会议，还有一个小而友好、竞争激烈、不断对下一个大事件的到来进行军事竞赛的社区。几乎不可能不受这种热情感染。超文本为存储实际而具体的知识开辟了新的方向。每一次创新都使得数字世界变得更加复杂、更加广阔、更加包罗万象。
+
+接着重量级选手加入了进来。在神秘的帷幕中，传奇公司施乐 PARC 的研究员与程序员正在开发 NoteCards。Apple 得到了关于这个项目的风声，并且认为它颇具潜力，于是开发了他们自己的超文本应用 Hypercard，并将其捆绑到 Mac 操作系统内部。如果你是 Apple II 的后期用户，你可能会对 Hypercard 有一段美好的回忆。Hypercard 提供了一个界面，允许你创建一张卡片并快速将其链接到另一张卡片。这张卡片可以是任何内容，可能是一份食谱，或者是最新项目的原型。接着，你可以直观且毫无阻碍地将这些卡片一张张链接起来，直到你拥有一个反映你的思考的数字化结构。
+
+到了 80 年代末期，超文本的未来显然是一片光明。在短短几年内，超文本软件就取得了飞跃性的进步。
+
+---
+
+在牛津大学皇后学院短暂学习过一段时间物理后，Tim Berners-Lee 爵士重新拾起了他最初的热爱：计算机。最后，他在欧洲核子研究中心（简称 CERN）得到了一份六个月的短期合同。CERN 以其在粒子物理学领域的一连串突破闻名。最近[^2]，他们建造了大型强子对撞机，并由此证实了希格斯玻色子（“上帝粒子”）的存在。
+
+[^2]: 原文成稿于 2020 年
+
+CERN 的运作方式与大多数研究实验室不同，在使用实验室的人群中，其内部员工只占了少数。来自世界各地的研究团队只要能证明他们的研究符合CERN的既定目标，就可以实地使用 CERN 的设施。CERN 的绝大部分研究工作是由这些外部研究团队完成的。CERN 园区里满是想法自由、充满活力的研究员，他们骑自行车或者乘坐矿车穿梭于各个地点，探索宇宙的奥秘。每个团队都需要携带他们自己的设备和专业知识——包括计算机。