文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

产品经理:你能不能用Div给我画条龙?

2024-12-03 04:58

关注

本文转载自微信公众号「大帅老猿」,作者大帅搞全栈。转载本文请联系大帅老猿公众号。

事情是这样的,前天上午产品经理说想要做一个心愿墙,问我能不能行

 
我心想,这太容易了,但为了多摸一天鱼,我说还是有点挑战的
 
结果下午,产品经理和设计师就给我发来了设计参考

image.png
 
他们说,心愿墙的设计大致是这样的,每个用户的心愿都是一个气泡,而客户的品牌是”龙“,我们希望在前端页面里用气泡呈现一个龙形的设计,每个气泡都会浮动,鼠标移上去变大,点击后展示心愿详情。
 
当时我的内心是这样的

[[400137]]

 
image.png
 

我摸鱼的一天要泡汤了吗?

谁都不能阻止我摸鱼

但首先要解决最核心的问题

龙从哪里来?

设计师说了,他可以给我一条由气泡组成的龙的设计稿,我说那等你设计稿给我,我再研究把。结果他说,已经有了,你就用这个吧

image.png

我的刀呢?

互动问题

请在评论区留下你遇到过的最奇葩的需求

拆解需求

遇到不靠谱的产品经理和设计师,前端工程师真是惨。我们顶着最后交付成品的巨锅,所有deadline感觉都只是用来压榨前端工程师的。

我们只能靠自己,因为

谁都不能阻止我摸鱼

  • 需求1:有鼠标交互效果(太简单)
  • 需求2:气泡要浮动(css动画,easy)
  • 需求3:气泡组成一条龙

此时我脑海里响起这首烂大街的歌

左边跟我一起画个龙,在你右边画一道彩虹~

诶,画个龙

用什么画,canvas

canvas能获得指定区域的像素点阵

卧槽,有招儿了

代码时间

先用图片搜索找一张龙的剪影

image.png

image.png

将图片绘制到canvas中

  1. var canvas = document.getElementById("canvas"); 
  2. var ctx = canvas.getContext("2d"); 
  3.  
  4. var image = new Image(); 
  5. image.src = "dragon.jpg"
  6. image.onload = function(){ 
  7.         canvas.width = image.width; 
  8.         canvas.height = image.height; 
  9.  
  10.         ctx.drawImage(image,0,0); 

获取并裁剪画布的点阵信息

  1. var imageData = ctx.getImageData(0,0,image.width,image.height).data; 
  2. ctx.fillStyle = "#ffffff"
  3. ctx.fillRect(0,0,image.width,image.height); 
  4.  
  5. var gap = 6; 
  6.  
  7. for (var h = 0; h < image.height; h+=gap) { 
  8.     for(var w = 0; w < image.width; w+=gap){ 
  9.             var position = (image.width * h + w) * 4; 
  10.             var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2]; 
  11.  
  12.             if(r+g+b==0){ 
  13.                     ctx.fillStyle = "#000"
  14.                     ctx.fillRect(w,h,4,4); 
  15.                 } 
  16.     } 

现在我们获得了这样一条龙的点阵信息

image.png

通过点阵信息生成气泡dom

  1. var dragonContainer = document.getElementById("container"); 
  2. var dragonScale = 2; 
  3.  
  4. for (var h = 0; h < image.height; h+=gap) { 
  5.     for(var w = 0; w < image.width; w+=gap){ 
  6.             var position = (image.width * h + w) * 4; 
  7.             var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2]; 
  8.  
  9.             if(r+g+b==0){ 
  10.                     var bubble = document.createElement("img"); 
  11.                     bubble.src = "bubble.png"
  12.                     bubble.setAttribute("class","bubble"); 
  13.  
  14.                     var bubbleSize = Math.random()*10+20; 
  15.                     bubble.style.left = (w*dragonScale-bubbleSize/2) + "px"
  16.                     bubble.style.top = (h*dragonScale-bubbleSize/2) + "px"
  17.                     bubble.style.width = bubble.style.height = bubbleSize+"px"
  18.                     bubble.style.animationDuration = Math.random()*6+4 + "s"
  19.  
  20.                     dragonContainer.appendChild(bubble); 
  21.                 } 
  22.     } 

image.png

开心摸鱼吧

本例里使用div绘制大量的dom,仅为阐述思路,没考虑性能。利用一些js游戏引擎,比如pixi等,可以很方便的全部交由canvas去绘制并添加交互。

 原文链接:https://mp.weixin.qq.com/s/iE1vK6hA4IUYsNPpreTKew

 

来源:大帅老猿内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯