Tagged

前端

A collection of 2 posts

前端

手写一个在Flutter里展示”精灵图“的Widget

前言之前用Flutter里的游戏引擎Flare做了一个“是男人就坚持100秒”的游戏,文章请看这里 使用Flare引擎之后,完全没有了Flutter应用特有的代码风格。虽然更适应我这类有过游戏开发经验的开发者,但并不利于我们学习Flutter框架。所以我在那篇文章最后也说了,要抽空用Widget重写一次这个游戏。首要任务,就是得有一个支持”精灵图“的Widget,既然是学习,那就不能用别人开发好的,必须得自己亲手造轮子。 什么是”精灵图“精灵图的英文是spritesheet(精灵表单),就是在一张图上放置多个图形,只需要加载到内存里一次。在展示的时候,仅展示单个图形的区域。一般多个图形多用来放置连续动画的多个关键帧。除了在游戏引擎里很常见以外,为了减少web请求,在前端领域也很常见。 原理拆解加载一张大图,但每次只展示图片的特定区域比如这张飞机的精灵图,尺寸是330x82(像素),横向排布5个画面,那么单个画面的尺寸就是330/5 = 66。我们每次展示的区域为x=66*画面序号,y=0,width=66,height=82。 可以设定横向排布或纵向排布精灵图可以横向或纵向排布,有些游戏引擎的贴图最大尺寸为4096x4096,所以还有些情况是需要我们换行切换的,但原理差异并不大,

JavaScript

17K star 仓库,解决 90% 的大厂基础面试题

前言笔者开源的前端进阶之道已有三年之久,至今也有 17k star,承蒙各位读者垂爱。在当下部分内容已经略微过时,因此决定提笔翻新内容。 翻新后的内容会全部集合在「干爆前端」中,有兴趣的读者可以前往查看。 阅读前重要提示: 本文非百科全书,只专为面试复习准备、查漏补缺、深入某知识点的引子、了解相关面试题等准备。 笔者一直都是崇尚学会面试题底下涉及到的知识点,而不是刷一大堆面试题,结果变了个题型就不会的那种。所以本文和别的面经不一样,旨在提炼面试题底下的常用知识点,而不是甩一大堆面试题给各位看官。 大家也可以在笔者的网站上阅读,体验更佳!数据类型JS 数据类型分为两大类,九个数据类型: 原始类型对象类型其中原始类型又分为七种类型,分别为: booleannumberstringundefinednullsymbolbigint对象类型分为两种,分别为: ObjectFunction其中 Object 中又包含了很多子类型,比如 Array、RegExp、Math、Map、Set 等等,也就不一一列出了。 原始类型存储在栈上,对象类型存储在堆上,但是它的引用地址还是存在栈上。 注意:以上结论前半句是不准确的,更准确的内容我会在闭包章节里说明。 常见考点JS