广告区

广告区


本站消息

站长简介/公众号


关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-07(7)

2021-08(64)

2021-09(79)

2021-10(103)

2021-11(94)

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

发布于2022-06-16 20:17     阅读(469)     评论(0)     点赞(11)     收藏(4)




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

我心想,这太容易了,但为了多摸一天鱼,我说还是有点挑战

结果下午,产品经理和设计师就给我发来了设计参考

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

当时我的内心是这样的

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

谁都不能阻止我摸鱼

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

龙从哪里来?

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

我的刀呢?

互动问题

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

拆解需求

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

我们只能靠自己,因为

谁都不能阻止我摸鱼

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

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

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

诶,画个龙

用什么画,canvas

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

卧槽,有招儿了

代码时间

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

 

将图片绘制到canvas中

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

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

  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. var gap = 6;
  5. for (var h = 0; h < image.height; h+=gap) {
  6. for(var w = 0; w < image.width; w+=gap){
  7. var position = (image.width * h + w) * 4;
  8. var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];
  9. if(r+g+b==0){
  10. ctx.fillStyle = "#000";
  11. ctx.fillRect(w,h,4,4);
  12. }
  13. }
  14. }

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

通过点阵信息生成气泡dom

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

开心摸鱼吧

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


本故事纯属虚构,参考案例来自年底为客户开发的春节活动网站。

如果你喜欢大帅的教程,请收藏,点赞,关注吧

 
作者:大帅老猿
链接:https://juejin.cn/post/6963476650356916254


关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)
关注公众号:程序员总部,回复前端,免费领取 全套前端视频教程,关注公众号回复前端充值+你的账号,免费为您充值1000积分






所属网站分类: 技术文章 > 博客

作者:代码搬运工

链接:http://www.qianduanheidong.com/blog/article/370990/198144fce9f9da367c6c/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

11 0
收藏该文
已收藏

评论内容:(最多支持255个字符)