reactxp

reactxp

来源|前端顶部

最近一个前端大神sh1zuku用React刻了一个Windows XP。页面中的两个Windows XP窗口可以自由拖动,作者还做了一个踩地雷的游戏,可以直接玩。作者还在medium上记录了这些实现的过程,以下全文是InfoQ对其内容的整理。

想玩的同学可以点击这个链接试试:

https://winxp.now.sh/

从纯 JS 转至 React

Sh1zuku说他本来是用香草JS写整个项目的,但是不得不说Parcel真的很厉害。当你一键启动帕格、SCSS、巴别塔和HMR环境时,你可以立即进入开发模式。没有框架的帮助,他不得不手工雕刻PWA,SPA,代码拆分和路由,所以。最后,他决定用React重写整个项目,但后来它被分离到另一个回购中。

元素拖曳、伸缩

笔者一开始决定从XP窗口的拖拽和扩展入手,期间经历了GetBoundingClient的左上方和mousemove的(clientX,offsetX,pageX,screenX)的各种折磨,才真正明白其中的区别。最后,他做了不受scroll影响的元素的拖动和扩展。

抖动的 Cursor

添加光标:调整大小;;Series是必不可少的,但是很简单:hover会将光标改回默认,因为它在快速扩展和收缩时超出了元素的范围。想了很久,他决定构建一个整页的div来保持光标大小不管有多滑!

无限延伸子目录

这里作者最后的编写方法是遍历一个JSON文件,生成相应的目录结构,但是比较麻烦的是为了遵从XP的行为,他需要自己控制高亮菜单的状态。

Grid 栏位对齐

每个下拉菜单有四列,中间两列(选项名和快捷键)长度不固定,内容要靠列左侧对齐。作者选择网格来解决这个问题:

复制代码

显示:网格;网格-模板-列:16px auto auto 15px但是后来发现hover需要反转蓝色列,于是使用了属性display: contents在不影响布局(列对齐)的情况下对内容(一整列)进行了包装,这样整列样式就可以轻松设置了。

踩地雷

为了完整模拟踩雷行为,鼠标事件的button和buttons属性合并完成,并使用useReducer管理复杂状态。

MouseEvent.button表示触发事件的键(1个左键和2个右键)。

MouseEvent.buttons表示事件被触发时按键的状态(1个左键,2个右键,3个双击)。

手机版:https://github.com/ShizukuIchi/minesweeper

图片反蓝

为了让画面变蓝,作者一开始用的是这种方法:

复制代码

.img { filter: hue-rotate(170deg) brightness(60%) saturate(300%);}

网站中使用了许多好用的 filter 属性,只有这个比较诡异,色相旋转、亮度还有饱和度的组合还真的让图片变蓝了。最后反蓝的的方式是给 parent 蓝色影子、让图案透明,达到变蓝的效果:。img {滤镜:色调-旋转(170度)亮度(60%)饱和(300%);网站中使用了许多有用的过滤器属性,但这一个很奇怪。色相旋转,亮度,饱和度的结合真的让画面变蓝了。最后,反蓝的方式是给parent一个蓝色的阴影,使图案透明,达到变蓝的效果:

复制代码

.container { filter: drop-shadow(0 0 blue);}.img { opacity: 0.5;}

。容器{滤镜:投影(0 0蓝色);}.img {不透明度:0.5;}

ReactDom.createPortal

在打开关机菜单时,为了使整页屏幕灰度化但保持目录的颜色,sh1zuku使用了portal,它允许你在渲染菜单时插入特定的DOM位置并保持事件通信。常用来突破溢出:隐藏;限制。

其他

Sh1zuku还分享了一些其他细节:

多个框的阴影将从前到后被覆盖,如下,阴影将是黑色的:

复制代码

。dot { box-shadow: 0 0黑色,0 0白色,0 0蓝色;}菜单使用滤镜:反转(100%)转负,你看到的蓝色其实是橙色:

复制代码

。容器{背景:# e99f17-& gt;橙色滤镜:反转(100%);}使用user select: none和pointer event: none来防止拖动事件受到影响。

后记

在这个过程中,为了完全符合XP的视觉,sh1zuku不断微调布局和颜色,在图标上花了很多功夫。其实有很多次他都在想“到此为止吧”。不过他也澄清了自己对布局的错误认识,只要发现和原生XP不一样的地方,没做完就觉得不对劲。为此他特意装了XP虚拟机XD。

参考链接

https://bitsofco.de/how-display-contents-works/http://www.colorzilla.com/gradient-editor/https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons

更多链接

吉图布:https://github.com/ShizukuIchi/winXP

演示链链接:https://winxp.now.sh/

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。

发表回复

登录后才能评论