产品经理:你能不能用Div给我画条龙?
2023-03-09 22:07:30 时间
本文转载自微信公众号「大帅老猿」,作者大帅搞全栈。转载本文请联系大帅老猿公众号。
事情是这样的,前天上午产品经理说想要做一个心愿墙,问我能不能行
我心想,这太容易了,但为了多摸一天鱼,我说还是有点挑战的
结果下午,产品经理和设计师就给我发来了设计参考
image.png
他们说,心愿墙的设计大致是这样的,每个用户的心愿都是一个气泡,而客户的品牌是”龙“,我们希望在前端页面里用气泡呈现一个龙形的设计,每个气泡都会浮动,鼠标移上去变大,点击后展示心愿详情。
当时我的内心是这样的
image.png
我摸鱼的一天要泡汤了吗?
谁都不能阻止我摸鱼
但首先要解决最核心的问题
龙从哪里来?
设计师说了,他可以给我一条由气泡组成的龙的设计稿,我说那等你设计稿给我,我再研究把。结果他说,已经有了,你就用这个吧
image.png
我的刀呢?
互动问题
请在评论区留下你遇到过的最奇葩的需求
拆解需求
遇到不靠谱的产品经理和设计师,前端工程师真是惨。我们顶着最后交付成品的巨锅,所有deadline感觉都只是用来压榨前端工程师的。
我们只能靠自己,因为
谁都不能阻止我摸鱼
- 需求1:有鼠标交互效果(太简单)
- 需求2:气泡要浮动(css动画,easy)
- 需求3:气泡组成一条龙
此时我脑海里响起这首烂大街的歌
左边跟我一起画个龙,在你右边画一道彩虹~
诶,画个龙
用什么画,canvas
canvas能获得指定区域的像素点阵
卧槽,有招儿了
代码时间
先用图片搜索找一张龙的剪影
image.png
image.png
将图片绘制到canvas中
- var canvas = document.getElementById("canvas");
- var ctx = canvas.getContext("2d");
- var image = new Image();
- image.src = "dragon.jpg";
- image.onload = function(){
- canvas.width = image.width;
- canvas.height = image.height;
- ctx.drawImage(image,0,0);
- }
获取并裁剪画布的点阵信息
- var imageData = ctx.getImageData(0,0,image.width,image.height).data;
- ctx.fillStyle = "#ffffff";
- ctx.fillRect(0,0,image.width,image.height);
- var gap = 6;
- for (var h = 0; h < image.height; h+=gap) {
- for(var w = 0; w < image.width; w+=gap){
- var position = (image.width * h + w) * 4;
- var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];
- if(r+g+b==0){
- ctx.fillStyle = "#000";
- ctx.fillRect(w,h,4,4);
- }
- }
- }
现在我们获得了这样一条龙的点阵信息
image.png
通过点阵信息生成气泡dom
- var dragonContainer = document.getElementById("container");
- var dragonScale = 2;
- for (var h = 0; h < image.height; h+=gap) {
- for(var w = 0; w < image.width; w+=gap){
- var position = (image.width * h + w) * 4;
- var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];
- if(r+g+b==0){
- var bubble = document.createElement("img");
- bubble.src = "bubble.png";
- bubble.setAttribute("class","bubble");
- var bubbleSize = Math.random()*10+20;
- bubble.style.left = (w*dragonScale-bubbleSize/2) + "px";
- bubble.style.top = (h*dragonScale-bubbleSize/2) + "px";
- bubble.style.width = bubble.style.height = bubbleSize+"px";
- bubble.style.animationDuration = Math.random()*6+4 + "s";
- dragonContainer.appendChild(bubble);
- }
- }
- }
image.png
开心摸鱼吧
本例里使用div绘制大量的dom,仅为阐述思路,没考虑性能。利用一些js游戏引擎,比如pixi等,可以很方便的全部交由canvas去绘制并添加交互。
原文链接:https://mp.weixin.qq.com/s/iE1vK6hA4IUYsNPpreTKew
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的