rainyday插件试用心得

评论资讯 [ 总 424 则 ]

·了了 - 2024-12-18 21:32
·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27

友情链接

◇ 午后时光
◇ 花潮论坛
◇ 马黑永硕网盘
◇ 老站
◇ 随意云
◇ css-doodle中文版
◇ HTML官方文档
◇ Web代码格式化工具
◇ 清音陋屋
◇ cubic-bezier

网站统计

·前端三套件 : 105
·JS插件 : 46
·黑石音画 : 318
·代码集锦 : 50
·小工具集合 : 23
·网友作品精选 : 6
·svgdr : 26

·今日访问 : 40
·页面点击 : 41
·当前在线 : 8

rainyday插件试用心得

位置: 首页 > JS插件[ 发布时间: 2024.5.8 作者: 马黑阅读: 250 ]

rainyday 是模拟雨天窗玻璃凝结水珠子的一个JS插件，作者 Marek Brodziak，官网 https://mubaidr.js.org/rainyday.js/，当前版本 v0.1.7，16.5KB大小，开源项目。

插件使用canvas画布绘制动态水珠，效果逼真到令人叹为观止。尝试将其用到帖子过程中碰上不少问题，意欲放弃，但实在难舍其浑然天成的特效，牺牲一个午休时间，终将其降服，成功用到帖子中来。

问题出在rainyday的布局上。新版本提供 parentElement 参数，就是canvas画布宿主，如若不配置，默认使用body，这将占用浏览器全部的可视区域乃至更多。若设置了 parentElement 参数，宿主元素相对定位的情况下，canvas画布的自动偏移非常离谱，具体是随宿主元素 margin 属性值偏移。论坛做宽幅帖子，需要宿主元素相对定位，所以不能通过帖子容器元素直接定位canvas画布，需要另外一个绝对定位的子元素来装载rainyday追加的画布，即便如此，rainyday追加的canvas画布仍然受到宿主元素的父元素的 margin 属性所影响，还需要额外处理：通过JS获得对canvas的操作权限，然后将其left和top设置为0。以下是具体处理代码：

var engine;

var sF = document.createElement('script');

sF.src = 'https://638183.freep.cn/638183/web/js/rainyday.js';

document.body.appendChild(sF);

sF.onload = function() {

var image = new Image();

image.crossOrigin = 'anonymous';

image.onload = function() {

engine = new RainyDay({

image: this,

parentElement: mama,

});

var canv = document.querySelector('#papa canvas');

canv.style.cssText += 'left: 0; top: 0';

mState();

};

image.src = 'https://638183.freep.cn/638183/t24/2/f11.jpeg';

var mState = () => {

papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');

aud.paused ? engine.pause() : engine.resume();

};

aud.onplaying = aud.onpause = () => mState();

papa.onclick = () => aud.paused ? aud.play() : aud.pause();

};

</script>

上述代码第14、15行就是强行将rainyday绘制的canvas画布的左上角强行拉回 id="mama" 的div容器的左上角，mama则是帖子容器元素的子元素，宽高100%，绝对定位，与帖子容器元素贴合。

rainyday插件的必填参数 image 支持有背景图片的元素，举例说，如果帖子容器带有背景图片，则可以直接将其 id 作为 image 参数的值，这其实是最理想的做帖子的姿势——水珠特效基本就约束在帖子容器里。但有个前提：图片必须是同源图片，就是说不能是跨域图片。还有一个小问题：margin-top、margin-bottom依然会影响canvas的位置。对于图片跨域，由于 crossOrigin 只针对图片、音视频等媒体，只有通过修改插件源码解决问题，但如果使用的是官网或第三方的资源，我们没有修改权限；对于外边距的上下边距对画布位置的影响，解决方法是不设置这两个值或设为 0 便可。

演示实例地址一：http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1715127196

演示实例地址二：http://qhxy.52qingyin.cn/art/bshow.php?st=4&sd=4&art=uvuz_1715127531

前一篇: dot-lz.js使用说明
下一篇: 《碧瑶 - 小池塘》所使用的JS资源相关说明

发表评论:

评论列表 [2条]

#2 | 悄然于 2024-5-8 09:29 发布: 试用效果完美~~这个是真的漂亮。。神奇的美丽的代码世界。。

#1 | 飞飞于 2024-5-8 09:24 发布: 这些插件还是需要更改才可以用到贴子里，只有强悍的黑师可以做到。。太漂亮了。。我去试一下平时做贴用的宽幅。。