阅读时长约10分钟，统计2604个字。

这是一篇插队的文章。

本来我是有备稿，准备在下周一的时候发布，结果就在上周二，发生了一件事情。这件事情让我产生很多启发，我在这里把它分享给你，希望对你也有所启发。

周二下午，有位老兄加我微信，备注来自博客。这也不足为奇，最近更新比较频繁，加了很多人。这位老兄一上来先是肯定了我的文章，随后指出了文中的错误。坦率地讲，自从复活博客之后，这还是第一位指出我错误的朋友，一下子我就来了兴趣。

在本系列文集的《序》中，我原文是这样写的：

我一直奉行一句话：“有道无术，尚可求也；有术无道，则止于术”。这句话出自老子的《道德经》，而且很好理解。

他指出《道德经》里其实没有这句话。但是呢，本着对读者负责的态度，我在写文章的时候确实去查了一下。程序员这个职业大家都懂，比较较真，至少我是这样的。于是我就找到了一些依据，来证明我说的是对的。但很快便发现事实其实不是这样，这位老兄所言非虚，我引的这句话确实并不出自《道德经》。所以，我要在这里向所有读过我上篇文章的朋友道个歉。澄清一下：“有道无术，尚可求也；有术无道，则止于术”，尽管这句话有几分道理，但真的不是《道德经》原文。

好了，故事就到这里结束了。说到这，大家应该也能理解我为什么要把这篇文章拿来插队。一方面趁热打铁，有错误及时声明，另一方面这个故事对我有新的启发。

这位老兄，名为张鸿羽。稍加细聊后，我得知鸿羽兄是有背过原文的，而我没有。我只是看到大部分都这样说，便信以为真，然后也跟着这样说。显然，我成为了大多数人中的一份子。而鸿羽兄是少数派中的一份子。有时候，真理真的掌握在少数人手中。

回想过去几年的工作历程，特别是刚开始工作的那几年，我做的很多工作都是“探索型”的。所谓“探索型”，就是对新技术，或者说是公司的研发部门未曾使用过的技术进行尝试摸索。当然，尝试新技术之前，要能发现新技术。而一项新技术的诞生，总会伴随着官方的宣传，以及一些支持它、拥护它的人高声叫好。但只有真正尝试过，特别是用新技术来实现较为复杂系统的时候，才会知道这项新技术到底优势在哪，劣势又在哪。

诚然，如果让我来总结我尝试新技术、新框架的经验，我会说：大部分新技术或是框架确实弥补了已有框架的不足，但其弥补的程度往往并不是质变的，只是小步优化。甚至有些新兴技术在弥补的同时，还引入了其它的问题。这对于使用它的开发者来说，的确是个坏消息。

但话说回来，没尝试用过，又怎能知道答案呢？技术的发展本就是这样一步一个坎，有时候走一步还退两步的呀。

这或许就是我等软件开发者的宿命，对于现存的技术框架，总是有这样或那样的不满意，觉得用着不顺手。期盼着某一天，某个技术大佬，或者团体，发明了一种新的框架，甚至是新的编程语言。或是直接起义，自己创造一款新的技术框架，能真正地解决那些令我们不满的问题，让软件开发编程成为真正的享受。

但现实是，很多新的技术框架的诞生，都伴随着类似的口号。也总会有勇敢的开发者尝鲜，也总会经历被坑，然后不断填坑的过程。而这些敢于尝鲜的开发者，就是那些最终会成为“少数派”的人。他们知道在各种美好的宣传背后，隐藏着多深的坑。对于这些坑，又该用什么方法去填。

“少数派”或许才是那些头脑最清醒的那一小撮人群。

但是，成为“少数派”不仅意味着失败的尝试，还有大多数人的不理解。甚至更严重一些，就是诋毁，百口莫辩。这需要一颗强大的内心，和与时间做朋友的勇气以及态度。

不过，我为什么鼓励程序员要做“少数派”，而不是成为“大多数”呢？还有另外一个原因，那就是由行业特征决定的。我相信程序员大多都活跃在互联网行业，这个行业是赢家通吃的指数型结构。有点类似财富分配，大部分的财富掌握在少数人的手里。而且无论如何数学建模，或是提高那些穷人的初始资金，最终推演的结局依然如此。

如今，在中国，乃至全世界，所谓“互联网大厂”无非就是那几家，而剩下的呢？数字上远远超过我们熟知的那些大厂，但拥有的财富值却位于指数图表中的长尾之中。这就是指数型的行业的特征，也是程序员这个群体的特征。

如果大家有查相关的数据，可以发现优秀程序员的工作效率往往是普通程序员的好几倍，尽管薪水上的差距不是这样。而大多数都是普通程序员，优秀程序员只属于“少数派”。优秀程序员，拿到需求，会做足够的分析，到了动手的时候，则像个流水线的工人；普通程序员，拿到需求就想赶快动手，面临的有可能是回炉重造。优秀程序员，会充分考虑到使用场景，采用防御式编程来规避可能带来的缺陷；普通程序员，想的只是实现需求，把程序健壮性扔给测试人员。优秀程序员，会考虑代码的可读性，为代码添加合适的注释、每个方法或函数的功能单一、清晰；普通程序员，急于求成，不注重代码规范，导致日后维护困难……

但是，追求效率和追求质量，大多数公司都会选择前者。但做多和做好，结果往往相差甚远。

大部分人倾向于做多、扩张、追求规模化。但殊不知做大的后果往往是成本的上升，利润却不一定变高。但做好却不一样，它追求的是平衡收支，而不是盲目追求利润。更好的做法其实是在做好之前，不要做大。要相信好产品，自然会带来口碑。过分追求大规模，反倒会使高利润远去。而把事情做好的心态，看似发展得慢，实则是条捷径。

回顾我创作的历程，之前的我总想着多写，多写就是扩张，意味着规模。但这种心态往往做不出好书，因为这是效率当先，质量次之的做法。但我身边也有的人，创作很用心，不着急让书早日面试，很认真地创作，比我的速度慢一些。这便是把事情做好的心态。你猜结果如何？人家一年十几万的稿酬，我却只有可怜的几万块。

所以，上面那套理论并不是我胡乱写的，或是从哪本书里看到，就抄过来的。而是真的付出了血和泪，总结出的道理。在此，我劝你做个“清醒”的人。追求效率没错，一旦做得过火，则会适得其反。

另一方面，如果只想成为大多数，可不可以呢？当然也可以，只不过互联网行业或许不再适合。那些符合正态分布的行业才是想成为大多数的那类人的理想去处。

比如，餐饮行业。现在，大家可以想一想，有没有那家餐馆，或是哪个餐饮品牌，能做到赢家通吃？似乎没有，如果也去查这方面的数据，就会发现餐饮行业其实并不是指数分布，而是呈正态分布的。只要能做到普通中位数的水平，就OK了。

真正的高手一般都是“少数派”。他们不仅能力拔群，思考问题时的方法、对世界的认知和一般人都有区别。若要成为软件开发工程师中的“高手”，必须成为“少数派”

，成为战场上的传说。

2023-1-29

脑海的片段：看灿姐打麻将，拍全家福的情景，在奶奶家吃饭，奶奶给我钱，看外婆，去老街，爬山去龙泉寺，妈妈的眼睛，妈妈打呼噜，电梯外的妈妈，大双给奶奶夹菜，小双给豪儿倒洗脚水，妈妈玩抖音，给妈妈染头发

过年回家，在高铁站等了3个小时，没有带孩子，两个人在哪里应该都过得挺好，带着孩子，还得管他吃喝，睡觉，妈耶，真累。坐上火车，第一次坐软卧，有门，两层，床比较大，有靠背，说是以前有拖鞋。但是也不够我和儿子睡的。在上铺又总感觉要掉下来。接着好几天没睡好，半夜醒来，心慌，涌出好多口水，想吐。有点吓着了，从来没这样过，真怕自己的心脏有毛病。而且老贺把40度左右的水给我泡酸辣粉，我不想他难受，吃了半碗。好像是到湖北的某个站，上来两个重庆人，很大声，后来那个中年男人还问晨晨几岁了，我才反应过来，这是重庆人，声大，但是每个人都还是热心肠的，看着两个人好像吵架一样，其实他们在聊天，哈哈哈

到了重庆，中午了，我实在是不想洗漱了，带孩子去哪里，都累。下车去了观音桥，看着外面好像不咋的，进去人挤人，全是好吃的，要不是等会要吃美娃鱼，我觉得我可以把每个都吃个遍。看见了红姐一家，聊天下来，我发现红姐也真的是为人母了，围着孩子转，会为了家里的琐事妥协，以前吐槽的老公，在她那也是很爱的，看得出来。可可很可爱，我能感受到一点有女儿的感觉，哈哈哈

永川下车，打车回家就是8点多了，回家，一路上就别寻思钱就对了，哪哪都是钱。爸爸妈妈说是等我们吃饭，两年没回家了，每次回去，还是觉得就在昨天，周围一切在改变，又好像没变。到家，老妈就开始拍抖音，这是我没有想到的。不过她有自己的世界，乐趣，也挺好的。我说要吃夹沙肉，妈妈爸爸自己做的红豆馅的馅，应该花了不少时间，很好吃，就是不敢多吃了。家里很漂亮，妈妈开始像我展示各种东西，她买的好货，哈哈哈，儿子玩上了，外婆买的垃圾车。当然两个弟弟还是玩手机，看看啥时候开始有改变

晚上睡得很香，3个人都睡得很香，好几个月没有这种感觉了，睡完觉起来，世界都那么清晰，上了厕所就转进了妈妈的被窝。听妈妈说，听妈妈抱怨。第一天，我还是可以挺住的。妈妈更唠叨了，哈哈哈。在天津，是儿子一天800遍的叫妈妈，现在又多了800遍“莎莎”。事实证明，妈妈老了，需要有人关注了。

21号，30，过年，小插曲，对于我来说，不在意，都不算事儿，我只记得菜很好吃。特别是牛肉，下午吃到塞牙，扣了好久。上午买了烟花，买的时候，两只说不感兴趣，结果晚上玩的好嗨，明年一定要多买点

22号，初一，赶集，一家人去赶集，老爸先带去买气球了，一个可爱的草莓气球，贺小狗自己选的。赶集的人不多，没有以前热闹了，卖烟花的，开始卖纸钱，火炮了。走了一圈去火锅店吃牛肉火锅。本来没抱多大期待，结果好好吃，吃了一盘子牛肉。下午跟妈妈去田间摘了好多青棉花，奈何肚子天天不消化，不然还可以吃青团，下午出去走走，也是开心的，听妈妈吐槽爸爸，带儿子玩泥巴。妈妈还说拿钱给我还贷款，我很感动，我不要她的钱，来的很辛苦，自己留着点，以后养老不用愁。

背砍很多青棉花

23号，初二，本来每年初二去舅舅家，今年改成了初三。晚起的早晨，睡得依旧的香。今天给妈妈染头发，爸爸做完饭，吃完打麻将去了，我给妈妈染头发，洗头发，还算成功，妈妈开心，我就开心。我们下午决定去走走，小米跟着我们，他要是知道要走8公里，肯定不会跟我们走了，去田间走走，好舒服。路过观音菩萨，土地公公，走了很多坟堆的山里，可惜没有转角走向龙泉寺。明年补上。我给观音菩萨求妈妈睡得好，希望有用。

去龙泉寺的路

老公说瓦房就是，天快黑了，没继续下去了

24号，初三，早起了，因为爸爸说早上8点出发，结果好像就我当真了，早起，洗头，我还做了一个瑜伽。我们坐车，爸爸妈妈骑车，社恐的我，喜欢热闹，又不知道怎么与人 交流。上坟，好像是我每年比较期待的事，大家聚在一起去看望已故的老人，热闹之余，想念外婆，从她走了起，我每次去她那，都会给她磕三个头，不是秀，是真想她。灿姐喜欢声张，我不在乎别人说什么，我只在乎我心里有她，磕不磕头，是我心里想做的，不是要别人看的。我以为这么久，我会忘记，好像越来越想她了。《寻梦环游记》里说，生的人，没有人记得你，已故的老人就会消失，所以我的外婆应该还没有，因为我还记得她。去了一直害怕的老宅子看，梦里那么真实，那么黑，和老公去看的时候，仿佛在逛博物馆，不害怕了，多了几分怀念。外面的大门没了，被杜老师占了修了栋房子，里面关着鸡，进门两边的棺材没了，因为老人都走了。天井小时候感觉蛮大，中间的台，要走好多步，现在几步就跨过去了。两边的台子没有了，左边的台子是用来洗衣服的，右边的台子是坐着旁边的老人，她天天会在那里叹息，撑唤（一身疼，叫唤），骂人，使唤她老头子。右边的大门锁上了，人家搬出去了，我还记得那户人家的男的姓曾，女的姓贾(重庆话就是真假）。桃屋（饭厅）也小了，就剩下被舅舅烧纸烧黑的外公的遗照，还有边上慈祥的外婆，一个香炉，几根没烧完的香。睡觉的屋，没有了床，都空了，墙被凿了一个大洞，屋里亮了，不吓人了。下面的大屋，中间的灯绳子还在，小时候跑进去，大概知道绳子在哪里，摸一把没摸着就要跑出去，太黑了，太害怕了。天井旁边的窗户还在，以前我和外婆在那砍红薯，熬猪食。厨房都没了，没了。路过一个空屋子就到了现在舅舅住的楼房，大坝子放了几张桌子，是往年的热闹场景。吃饭前，和老公去了小时候上学走的路，还是那个小河，竹林，再也不用在田坎上跑着去上学，却有点怀念跑着去上学的时候。路走不通了，上面成了一片橘子地。坐在坝子里吃饭，真香，踏实。她们打麻将去了，我和老公去了三姨对面的路，去老街，杜老师说对面可以走去老街。对面路不太熟悉，过河的桥还是玉子板。路修成了大道，唯一不好的是有好多野狗，不敢走，老奶奶说带路，不好意思让她带那么远，我们走了老奶奶说的另一条田间小路，看见了田里的老牛，也是惬意。我们拿着两根棍子走了一道。老街的小学，旁边修了新的，老的还在，是以前一样的，不知道那个像保剑锋，去他家排练，他把衣服内衣裤子扔门后面的语文老师还在那个学校不，哈哈哈哈。老街的东西，老建筑都垮了，转转去了新街，好近，以前好像要走很久，现在不到10分钟就到。我们吃了葱油饼和凉面，凉面是那个味，酸甜辣，4块钱一碗，太便宜了。

橘子地

玉子板的桥，30多年了吧

耕地的牛

去老街路上

中间的灯绳，小时候的噩梦

天井旁边的窗户

有大洞的屋，不吓人了

老街的折叠门，最早的折叠门了吧

25号，初四，今天我们家请客，来了好多人，爸爸总是能一个人做很多菜出来，还挺好吃，肚子不争气，吃不了多少，去帮妈妈修了戒指，没想到我的手指比她粗那么多，还是大了。回来看她们打麻将，大家一起聊了些有的没的，比我想的亲切多了，特别是灿姐，好像姐妹亲更多了些，还有就是小双，他甘愿给豪儿倒洗脚水，豪儿说热了，他赶紧给加凉水。我有点不解，我在想，是不是每个人都有自己的圈子，就是学数学的圈子，交集，并集那种圈子，我们在他的并集区域里，不在他的交集区域，有点意思。他应该是算我们家最任性的人，孩子这样挺好的，长大之前至少任性过，这才是小孩子。

26号，初五，定了快3年的全家福，终于要拍上了。早起的我洗头，敷脸。热饭，跟三姨聊了会，她总是能让人觉得她可怜，或许她就是有点可怜吧，但是她又是那么自私，喜欢占便宜。说我去年初一走，聪明，省了200块钱的事，翻篇了，我不计较了。我生怕爸妈弟弟有一点不配合，急眼，这个全家福拍不上。回家一直没有太照顾老公，我感觉他懂我，也确实很理解我，没陪他，他一切都安排的很好，这点我很开心。还好妈妈没有晕车，下车，我们爬了一会山，到了山腰的影楼。有点简陋，一个区里，也还行啦。没想到给我画那么久，我的初衷是让爸妈好看点，仔细点，毕竟下次再让他们来拍，估计很难。妈妈穿婚纱真美，但是我却好想哭，不知道为什么。妈妈是老了，眼睛开始耷拉下来了，生完一场大病，右眼掉的厉害，我让化妆师再贴一个双眼皮贴，对称一下。拍照的地方好冷，可别给我妈妈感冒了，对了，忘记说，中午他们吃泡面的时候，还蛮温馨的，哈哈哈。特别感谢我老公，在我化妆的时候，给他们拍的照片，很好，其实这就算是我的生日礼物了，真的就想拍全家福。两个弟弟真是长高了，小的胖的可爱，大的帅气，爸爸年轻，妈妈美丽。一路下来，挺开心的。爸爸应该也是开心的，我看出来他尴尬了，笑的有点不自然，逗一逗就笑的开心了。他还拿手机照了一些，也是开心的，一家人都笑着拍完一组，除了不配合的儿子，不强求他们拍第二组了。这样开心的收尾挺好的。妈妈担心没拍完，我说拍多了，他们照片多了加照片要多收钱，她就放心了。跟着老公这些年，我慢慢学会了，解释，沟通，交流，站在对方的角度，再有点耐心，其实妈妈就懂了，像个孩子。只是我们身上的琐事太多，耐心在消耗，跟家人，反而多了些任性。下山大家有说有笑，挺快就到了公交点，爸妈希望去店里看看，两个弟弟肯定是不想走了，开心收尾挺好的，我们回家了。到了爷爷家，由于大伯一家没有来，没人做饭，妈妈生气，爸爸就是踏实干活。锅很黑，煤气罐没有气了，拿着大锅上外面炒的。大双烧火，爸爸炒菜，我和妈妈端菜，奶奶找盘子，爷爷站屋里用有些黑的水洗碗，儿子拿着竹子块在坝子里玩，老公时而拍照录像，时而站在那看爷爷弯腰洗碗，他好奇87岁的老人，弯腰低头洗碗，居然头不晕，这就是劳动人民的腻害之处。别说，虽然到处是鸡屎，炒出来的菜，真的蛮香的。我们坐在浓浓鸡屎味，有些霉臭，旁边是洗完碗装着污水的盆，满桌子的菜，大双吃的很香，奶奶来了，他让他涮涮有葱的碗，给她夹了够不着的豆干，他是个善良的孩子，抛开玩手机不说，其实也是个懂事的孩子。老公吃了好多，喝了蜂蜜酒，好像是他爷爷，哈哈哈。我吃了半碗饭，豆干，豆角，和鱼里的菜，其实挺好吃的。别的不重要，爷爷笑咪了眼睛。我和他们的回忆不太好，没有什么深厚的感情，但是长大后，每次去他们那，会觉得温暖，淳朴。他们也希望我去看他们。那晚，妈妈很开心，睡得很香，我们一起睡得，她摆了一会龙门阵，说这么晚了，快睡觉了，明天要早起。开始打呼噜了。希望你每晚都睡那么香，多好。

爷爷坝子里做饭

准备拍全家福啦

先偷拍一点

双胞胎，一点不像的弟弟

双胞胎，一点不像的哥哥

27号，初六，早上的票很早，以后得长教训，早点订票了。本以为这次中午的票，可以消停的走，但是我一点不着急，感觉肯定有办法，或许内心不想走吧，不然早就着急了。吃了3碗面，真香，可惜没吃上妈妈做的肥肠鱼，好多菜，看五一吧，能不能回去一趟。大概率不行。回去他们也不放假，在管子里也算不上陪伴了。妈妈每次走的时候，都会说，回来都是晚上，走的都是早上，烧白没吃上，肥肠没吃上，土鸭子鸭杂专门给你留的，也没吃上，冰箱里的笋子也没吃上。。。。即使我在家待一个月，也会那么说，就是舍不得我走，巴不得把家里能带的都给我装下，能装的我都装上了，那是妈妈的爱。晚走一小时，好像也没晚多少，妈妈送到电梯那，我知道她为什么不下去，不是懒，是她要哭。爸爸送我们到车站，走的时候，我把贺小狗做好了，赶紧摆了摆手，生怕车快了，爸爸看不到我了，他看着呢，一直盯着呢，没舍得走，直到车走远。。。。又要在车站等3个小时，带着这只狗，咋熬，冰淇淋只撑了十几分钟。老公问我想要什么生日礼物，我开玩笑的说我想回家，真的只是玩笑，不知道为什么留下了泪水，可能家在内心深处吧。

22年回家，治好了我的精神焦虑，终于睡了一周的好觉

开发目标：快速搭建nestjs项目本地环境，并测试本地打包方便后期部署到服务器。

项目准备：node环境、npm依赖、docker

1. 创建项目并启动


2. 使用typeorm连接mysql


3. 使用class-validate校验入参


4. 使用全局filter处理异常，使用全局interceptor处理成功信息


5. 使用ioredis连接redis


6. 使用swaager文档


7. 使用docker-compose打包并运行


8. 总结

一、创建项目并启动

1、全局安装nestjs并创建项目

npm i -g @nestjs/cli

nest new nest-demo

2、使用热更新模式运行项目

npm run start:dev

此时访问 http://localhost:3000就可以看到 Hello World!

3、使用cli一键生成一个user模块

nest g resource system/user

选择REST API和自动生成CURD

4、设置全局api前缀

src/main.ts

async function bootstrap() {

  const app = await NestFactory.create(AppModule);

  app.setGlobalPrefix('api'); // 设置全局api前缀

  await app.listen(3000);

}

bootstrap();

更多nestjs入门教程查看：# 跟随官网学nestjs之入门

二、使用typeorm连接并操作mysq

1、安装依赖

npm i @nestjs/typeorm typeorm mysql @nestjs/config -S

2、在src下创建 config/env.ts 用来判断当前环境，抛出配置文件地址

src/config/env.ts

import * as fs from 'fs';

import * as path from 'path';

const isProd = process.env.NODE_ENV == 'prod';



function parseEnv() {

  const localEnv = path.resolve('.env');

  const prodEnv = path.resolve('.env.prod');



  if (!fs.existsSync(localEnv) && !fs.existsSync(prodEnv)) {

    throw new Error('缺少环境配置文件');

  }



  const filePath = isProd && fs.existsSync(prodEnv) ? prodEnv : localEnv;

  return { path: filePath };

}

export default parseEnv();

3、在src下创建.env配置文件

src/.env

# default

PORT=9000



# database

DB_HOST=localhost

DB_PORT=3306

DB_USER=demo_user

DB_PASSWD=123456

DB_DATABASE=demo_db

4、在app.module内挂载全局配置和mysql

src/app.module.ts

import { Module } from '@nestjs/common';

import { AppController } from './app.controller';

import { TypeOrmModule } from '@nestjs/typeorm';

import { ConfigService, ConfigModule } from '@nestjs/config';

import envConfig from './config/env';

import { AppService } from './app.service';

import { UserModule } from './system/user/user.module';



@Module({

  imports: [

    ConfigModule.forRoot({

      isGlobal: true, // 设置为全局

      envFilePath: [envConfig.path],

    }),

    TypeOrmModule.forRootAsync({

      imports: [ConfigModule],

      inject: [ConfigService],

      useFactory: async (configService: ConfigService) => ({

        type: 'mysql',

        host: configService.get('DB_HOST', 'localhost'), // 主机，默认为localhost

        port: configService.get<number>('DB_PORT', 3306), // 端口号

        username: configService.get('DB_USER', 'root'), // 用户名

        password: configService.get('DB_PASSWORD', '123456'), // 密码

        database: configService.get('DB_DATABASE', 'test_db'), //数据库名

        entities: ['dist/**/*.entity{.ts,.js}'],

        timezone: '+08:00', //服务器上配置的时区

        synchronize: true, //根据实体自动创建数据库表， 生产环境建议关闭

        autoLoadEntities: true,

      }),

    }),

    UserModule,

  ],

  controllers: [AppController],

  providers: [AppService],

})

export class AppModule {}

5、定义userEntity实体

src/system/user/entities/user.entity.ts

import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';



@Entity('user_tb')

export class UserEntity {

  @PrimaryGeneratedColumn()

  s_id: string;



  @Column({ type: 'varchar', length: 20, default: '', comment: '名称' })

  s_name: string;



  @Column({ type: 'int', default: 0, comment: '年龄' })

  s_age: number;

}

6、user.module内引入entity实体

import { Module } from '@nestjs/common';

import { UserService } from './user.service';

import { UserController } from './user.controller';

// 引入typeorm和Enetiy实例

import { TypeOrmModule } from '@nestjs/typeorm';

import { UserEntity } from './entities/user.entity';



@Module({

  imports: [TypeOrmModule.forFeature([UserEntity])],

  controllers: [UserController],

  providers: [UserService],

})

export class UserModule {}

7、在控制器user.controller修改api地址

@Post('create')

create(@Body() createUserDto: CreateUserDto) {

    return this.userService.create(createUserDto);

}

地址拼接为：全局前缀api+模块user+自定义create = localhost:3000/api/user/crtate

三、使用class-validato校验入参

1、安装依赖

npm i class-validator class-transformer -S

2、配置校验规则

src/system/user/dto/create-user.dto.ts

import { IsNotEmpty } from 'class-validator';



export class CreateUserDto {

  @IsNotEmpty({ message: '名称不能为空' })

  readonly s_name: string;

}

更多校验规则查看：git文档

四、使用filter全局错误过滤、interceptor全局成功过滤

1、使用cli自动生成过滤器

nest g filter common/http-exception

nest g interceptor common/transform

2、编写过滤器

src/common/http-exception/http-exception.filter.ts

import {

  ArgumentsHost,

  Catch,

  ExceptionFilter,

  HttpException,

} from '@nestjs/common';



@Catch(HttpException)

export class HttpExceptionFilter implements ExceptionFilter {

  catch(exception: HttpException, host: ArgumentsHost) {

    const ctx = host.switchToHttp(); // 获取请求上下文

    const response = ctx.getResponse(); // 获取请求上下文中的 response对象

    const status = exception.getStatus(); // 获取异常状态码



    let resultMessage = exception.message;



    // 拦截class-validate错误信息

    try {

      const exceptionResponse = exception.getResponse() as any;

      if (Object.hasOwnProperty.call(exceptionResponse, 'message')) {

        resultMessage = exceptionResponse.message;

      }

    } catch (e) {}



    const errorResponse = {

      data: null,

      message: resultMessage,

      code: '9999',

    };



    // 设置返回的状态码， 请求头，发送错误信息

    response.status(status);

    response.header('Content-Type', 'application/json; charset=utf-8');

    response.send(errorResponse);

  }

}

src/common/transform/transform.interceptor.ts

import {

  CallHandler,

  ExecutionContext,

  Injectable,

  NestInterceptor,

} from '@nestjs/common';

import { map, Observable } from 'rxjs';



@Injectable()

export class TransformInterceptor implements NestInterceptor {

  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {

    return next.handle().pipe(

      map((data) => {

        return {

          data,

          code: '0000',

          msg: '请求成功',

        };

      }),

    );

  }

}

3、在main.ts里挂载

import { HttpExceptionFilter } from './common/http-exception/http-exception.filter';

import { TransformInterceptor } from './common/transform/transform.interceptor';



async function bootstrap() {

  const app = await NestFactory.create(AppModule);

  app.useGlobalFilters(new HttpExceptionFilter()); // 全局注册错误的过滤器(错误异常)

  app.useGlobalInterceptors(new TransformInterceptor()); // 全局注册成功过滤器

  await app.listen(3000);

}

bootstrap();

手动抛出异常错误只需在service的方法里

throw new HttpException('message', HttpStatus.BAD_REQUEST)

五、使用idredis连接redis

1、安装依赖

npm i ioredis -S

2、在.env文件添加reids配置

# redis

REDIS_HOST=localhost

REIDS_PORT=6379

REIDS_PASSWD=

REIDS_DB=3

3、在common目录下创建cache模块，连接redis

nest g mo cache common && nest g s cache common

src/common/cache/cache.service.ts

import { Injectable, Logger } from '@nestjs/common';

import { Redis } from 'ioredis';

import { ConfigService } from '@nestjs/config';



@Injectable()

export class CacheService {

  public client;

  constructor(private readonly configService: ConfigService) {

    this.getClient();

  }



  async getClient() {

    const client = new Redis({

      host: this.configService.get('REDIS_HOST', 'localhost'), // 主机，默认为localhost

      port: this.configService.get<number>('REIDS_PORT', 6379), // 端口号

      password: this.configService.get('REIDS_PASSWD', ''), // 密码

      db: this.configService.get<number>('REIDS_DB', 3),

    });

    // 连接成功提示

    client.on('connect', () =>

      Logger.log(

        `redis连接成功，端口${this.configService.get<number>(

          'REIDS_PORT',

          3306,

        )}`,

      ),

    );

    client.on('error', (err) => Logger.error('Redis Error', err));



    this.client = client;

  }



  public async set(key: string, val: string, second?: number) {

    const res = await this.client.set(key, val, 'EX', second);

    return res === 'OK';

  }



  public async get(key: string) {

    const res = await this.client.get(key);

    return res;

  }

}

在cache.module内抛出service
src/common/cache/cache.module.ts

@Module({

  providers: [CacheService],

  exports: [CacheService],

})

4、在user.module内引入cacheModule并在user.service内使用

src/system/user/user.module.ts

import { CacheModule } from 'src/common/cache/cache.module';

@Module({

  imports: [CacheModule],

  controllers: [UserController],

  providers: [UserService],

})

export class UserModule {}

src/system/user/user.service.ts

import { CacheService } from '@src/common/cache/cache.service';



@Injectable()

export class UserService {

  constructor(

    private readonly cacheService: CacheService,

  ) {}



  async create(createUserDto: CreateUserDto) {

    const redisTest = await this.cacheService.get('redisTest');



    Logger.log(redisTest, 'redisTest');

    if (!redisTest) {

      await this.setRedis();

      return this.create(createUserDto);

    }



    ...

  }

  async setRedis() {

    const res = await this.cacheService.set(

      'redisTest',

      'test_val',

      12 * 60 * 60,

    );

    if (!res) {

      Logger.log('redis保存失败');

    } else {

      Logger.log('redis保存成功');

    }

  }

}

六、使用swagger生成文档

1、安装依赖

npm i @nestjs/swagger swagger-ui-express -S

2、在main.ts引入并配置

import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';



async function bootstrap() {

  const app = await NestFactory.create(AppModule);

  // 设置swaager

  const options = new DocumentBuilder()

    .setTitle('nest-demo example')

    .setDescription('The nest demo API description')

    .setVersion('1.0')

    .build();

  const document = SwaggerModule.createDocument(app, options);

  SwaggerModule.setup('swagger', app, document);



  ...

}

bootstrap();

此时访问http://wwww.localhost:9000/swagge就可以看到文档

3、在控制器为业务模块和api打上标签

src/system/user/user.controller.ts

import { ApiTags, ApiOperation } from '@nestjs/swagger';



@ApiTags('user')

@Controller('user')

export class UserController {

  constructor(private readonly userService: UserService) {}



  @ApiOperation({

    summary: '创建用户',

  })

  @Post('create')

  create(@Body() createUserDto: CreateUserDto) {

    return this.userService.create(createUserDto);

  }

}

4、在dto内为字段设置名称

src/system/user/dto/create-user.dto.ts

import { ApiProperty } from '@nestjs/swagger';



export class CreateUserDto {

  @ApiProperty({ type: 'string', example: '用户名称' })

  @IsNotEmpty({ message: '名称不能为空' })

  readonly s_name: string;



  @ApiProperty({ type: 'number', example: '用户年龄' })

  readonly s_age: number;

}

这时刷新浏览器，就能看到文档更新了

更多swaager配置查看：官方文档

七、使用docker-compose自动部署到本地docker

1、在根目录下创建docker-compose.yml

version: "3.0"



services: 

    # docker容器启动的redis默认是没有redis.conf的配置文件，所以用docker启动redis之前，需要先去官网下载redis.conf的配置文件

    redis_demo: # 服务名称

        container_name: redis_demo # 容器名称

        image: daocloud.io/library/redis:6.0.3-alpine3.11 # 使用官方镜像

        # 配置redis.conf方式启动

        # command: redis-server /usr/local/etc/redis/redis.conf --requirepass 123456 --appendonly yes # 设置redis登录密码 123456、--appendonly yes：这个命令是用于开启redis数据持久化

        # 无需配置文件方式启动

        command: redis-server --appendonly yes # 开启redis数据持久化

        ports:

            - 6379:6379 # 本机端口:容器端口

        restart: on-failure # 自动重启

        volumes:

            - ./deploy/redis/db:/data # 把持久化数据挂载到宿主机

            - ./deploy/redis/conf/redis.conf:/usr/local/etc/redis/redis.conf  # 把redis的配置文件挂载到宿主机

            - ./deploy/redis/logs:/logs # 用来存放日志

        environment:

            - TZ=Asia/Shanghai  # 解决容器 时区的问题

        networks:

            - my-server_demo



    mysql_demo:

        container_name: mysql_demo

        image: daocloud.io/library/mysql:8.0.20 # 使用官方镜像

        ports: 

            - 3306:3306 # 本机端口:容器端口

        restart: on-failure

        environment: 

            MYSQL_DATABASE: demo_db

            MYSQL_ROOT_PASSWORD: 123456

            MYSQL_USER: demo_user

            MYSQL_PASSWORD: 123456

            MYSQL_ROOT_HOST: '%'

        volumes:

            - ./deploy/mysql/db:/var/lib/mysql # 用来存放了数据库表文件

            - ./deploy/mysql/conf/my.cnf:/etc/my.cnf # 存放自定义的配置文件

            # 我们在启动MySQL容器时自动创建我们需要的数据库和表

            # mysql官方镜像中提供了容器启动时自动docker-entrypoint-initdb.d下的脚本的功能

            - ./deploy/mysql/init:/docker-entrypoint-initdb.d/ # 存放初始化的脚本

        networks: 

            - my-server_demo



    server_demo: # nestjs服务

        container_name: server_demo

        build: # 根据Dockerfile构建镜像

            context: .

            dockerfile: Dockerfile

        ports: 

            - 9003:9003

        restart: on-failure # 设置自动重启，这一步必须设置，主要是存在mysql还没有启动完成就启动了node服务

        networks: 

            - my-server_demo

        depends_on: # node服务依赖于mysql和redis

            - redis_demo

            - mysql_demo



# 声明一下网桥  my-server。

# 重要：将所有服务都挂载在同一网桥即可通过容器名来互相通信了

# 如nestjs连接mysql和redis，可以通过容器名来互相通信

networks:

    my-server_demo:

2、在根目录创建Dockerfile文件

FROM daocloud.io/library/node:14.7.0



# 设置时区

ENV TZ=Asia/Shanghai \

  DEBIAN_FRONTEND=noninteractive

RUN ln -fs /usr/share/zoneinfo/${TZ} /etc/localtime && echo ${TZ} > /etc/timezone && dpkg-reconfigure --frontend noninteractive tzdata && rm -rf /var/lib/apt/lists/*



# 创建工作目录

RUN mkdir -p /app



# 指定工作目录

WORKDIR /app



# 复制当前代码到/app工作目录

COPY . ./



# npm 源，选用国内镜像源以提高下载速度

RUN npm config set registry https://registry.npm.taobao.org/



# npm 安装依赖

COPY package.json /app/package.json

RUN rm -rf /app/package-lock.json

RUN cd /app && rm -rf /app/node_modules &&  npm install



# 打包

RUN cd /app && rm -rf /app/dist &&  npm run build



# 启动服务

# "start:prod": "cross-env NODE_ENV=production node ./dist/src/main.js",

CMD npm run start:prod



EXPOSE 9003

3、修改.env.prod正式环境配置

# default

PORT=9003

HOST=localhost 



# database

DB_HOST=mysql_demo #使用容器名称连接

DB_PORT=3306

DB_USER=demo_user

DB_PASSWD=123456

DB_DATABASE=demo_db



# redis

REDIS_HOST=redis_demo #使用容器名称连接

REIDS_PORT=6379

REIDS_PASSWD=

REIDS_DB=3

4、修改main.ts启动端口

import { ConfigService } from '@nestjs/config';



async function bootstrap() {

  const app = await NestFactory.create(AppModule);

  const configService = app.get(ConfigService);   // 获取全局配置

  const PORT = configService.get<number>('PORT', 9000);

  const HOST = configService.get('HOST', 'localhost');

  await app.listen(PORT, () => {

    Logger.log(`服务已经启动,接口请访问:http://wwww.${HOST}:${PORT}`);

  });

}

bootstrap();

5、前台运行打包

docker-compose up

运行完成后大概率会报错，因为我们使用的mysql账号没有权限，所以需要进行设置

// 进入mysql容器命令

docker ecex -it mysql_demo /bin/bash

// 登录mysql

mysql -uroot -p123456

// 查询数据库后进入mysql查询数据表

show databases;

use mysql;

show tables;

// 查看user表中的数据

select User,Host from user;

// 刚创建的用户表没有我们设置连接的用户和host，所以需要创建

CREATE USER 'demo_user'@'%' IDENTIFIED BY '123456';

// 给创建的用户赋予权限

GRANT ALL ON *.* TO 'demo_user'@'%';

// 刷新权限

flush privileges;

如果还报错修改下密码即可

ALTER USER 'demo_user'@'%' IDENTIFIED WITH mysql_native_password BY '123456';

此时项目应该能正常启动并成功访问

6、切换后台运行

// Ctrl+C 终止程序后执行后台运行命令

docker-compose up -d

八、总结

docker-compose up正常用来测试本地打包，和第一次构建redis、mysql容器，后续需要在本地运行开发模式只需保证redis、mysql容器正常运行即可，如需再次打包，删除server容器和镜像再次执行即可

docker ps -a // 查询docker容器

docker rm server_demo // 删除server容器

docker images // 查询镜像

docker rmi nest-demo_server_demo // 删除server镜像， server镜像名称：项目名称_容器名称

docker-compose up -d // 重新打包

本地开发模式只需关闭server容器，然后在项目内只需 start:dev即可

docker stop server_demo

npm run start:dev

问题描述

如下图,在keepAlive缓存的页面中使用element中的select选择器，打开弹出框后不手动关闭，直接切换页面，会出现弹出框仍然展示在页面上的现象。

问题原因

1. select选择器提供一个属性 popper-append-to-body 为false时，弹出框是放置在select选择器所在层级中，为true时，允许将弹出框插入至body元素中。

2. 本页面被keepAlive缓存后 再切出本页面时不会触发select选择器组件的blur事件，

所以当弹出框被插入至body元素中时，切出缓存页面 无法触发select选择器组件的blur事件，弹出框在body中无法隐藏

解决方法1

设置属性 popper-append-to-body为false，弹出框不会直接插入至body元素中，页面切换后弹出框也会被隐藏

局限性：
某些场景需要设置select选择器上级元素超出隐藏，弹出框如果超出上级元素的范围则无法完全展示

解决方法2

elementselect选择器源码中弹出框开启关闭由变量visible控制，将elselect组件包装一下，在deactivated生命周期钩子里设置弹出框关闭，注册组件时

// SelectWrapper 组件

<script lang="ts">

import { Mixins, Component, Watch } from 'vue-property-decorator';

import { Select } from 'element-ui';



@Component({

    name: 'ElSelect',

})

export default class ElSelect extends Mixins(Select) {

    visible: boolean | undefined;



    deactivated() {

        this.visible = false;

    }

}

</script>

入口文件全局注册新的SelectWrapper组件，替换掉elementselect选择器，这样可以做到在业务组件中无感使用

 app.component('el-select', SelectWrapper);

前言

iframe 想必大家都挺熟悉的了，就不多说了👍👍。写这篇文章的初衷主要是丰富自己的知识和解决遇到的问题。因为我基本上没接触过 iframe ，所以对它的通信方式不是很了解。前几天，跟我的一个朋友（在下杨公子）聊天时，他提到了 iframe 的通信方式，我觉得很有意思，就开始了解和学习。在这篇文章中，我将分享我所学到的内容，希望对大家有所帮助🤪🤪。

接下来我们就一起来学习一下关于 iframe 通信的相关知识吧😁

iframe通信的几种方式😶‍🌫️😶‍🌫️

1. URL 传参：父窗口可以通过在 iframe 的 src 属性后添加参数来向子窗口传递数据，子窗口可以通过 location.search 或 location.hash 来获取参数✨✨。

• 使用 ? 拼接参数，子页面使用 location.search 接收参数

// parent.html

<iframe id="iframe1" src="./child1.html?name=来自parent的消息" frameborder="0"></iframe>



// child1.html

<script>

  console.log(window.decodeURIComponent(location.search)) // ?name=来自parent的消息

</script>

• 使用 # 拼接参数，子页面使用 location.hash 接收参数，同时还可以使用 window.onhashchange 来监听参数的变化。

// parent.html

<iframe id="iframe1" src="./child1.html#name=来自parent的消息" frameborder="0"></iframe>

<script>

const iframe1 = document.getElementById('iframe1')

// 在2s后更改hash

setTimeout(() => {

    iframe1.src = './child1.html#age=12'

}, 2000)

</script>



// child1.html

<script>

console.log('hash', window.decodeURIComponent(location.hash)) // #name=来自parent的消息

window.onhashchange = () => {

    console.log('hashchange', window.location.hash) // #age=12

}

</script>

⚡⚡需要注意的是通过 URL 传参 的时候，传输携带中文的话，记得使用 decodeURIComponent 进行解码。

2. window.postMessage：安全、可靠且支持跨域的 iframe 通信方式，它可以在两个窗口之间异步传递消息✨✨✨✨✨。

• 在发送方中，使用 window.postMessage() 方法向另一个窗口发送消息。该方法接收两个参数：要发送的消息和目标窗口的源（例如，"http://127.0.0.1:5500/child.html" 或 "*"）。

window.postMessage('Hello world!', 'http://127.0.0.1:5500/child.html')

• 在接收方中，使用 window.addEventListener() 方法监听 message 事件。该事件对象包含三个属性：data 表示接收到的数据，origin 表示发送方的源，source 表示发送方窗口的引用。

window.addEventListener('message', function(event) {

  // 判断消息是否来自可信任的源

  if (event.origin === 'http://127.0.0.1:5500/child.html') {

    console.log('message: ' + event.data)

  }

})

兼容性，来自 window.postMessage | MDN

3. window.name：可以使用一个隐藏的iframe和window.name属性在不同的窗口之间共享数据✨✨。

• 在子页面中，将要传递给父页面的数据保存在 window.name 属性中。

例如

window.name = 'Hello Parent!';

• 在父页面中，创建一个隐藏的 iframe 元素，并且将其源设置为子页面的 URL。

const iframe = document.createElement('iframe');

iframe.style.display = 'none';

iframe.src = 'http://127.0.0.1:5500/child1.html';

document.body.appendChild(iframe);

• 在父页面中，等待 iframe 加载完成后，通过访问 iframe.contentWindow.name 属性来获取子页面中保存的数据。

iframe.onload = function() {

  const childData = iframe.contentWindow.name;

   onsole.log('message:', childData); // 输出：message: Hello Parent!

};

⚡⚡注意：使用 window.name 进行跨域 iframe 通信存在安全性问题，因为所有具有相同名称的窗口都可以访问和修改 window.name。

4. 服务器端转发：可以将消息从一个iframe发送到服务器，然后再由服务器将其转发到另一个iframe。✨✨✨

博客主要记录一些学习的文章，如有不足，望大家指出，谢谢。

前言

看完小白可以用webgl实现修图功能！我们平常生活中都使用过adobe photoshop修图，各种各样的滤镜以及特效眼花缭乱，实现高斯模糊，雕刻，曝光等这些特效看起来似乎很难，那么今天我们来手敲一个简单实现。

之前讲了简单的webgl的原理与点的绘制、以及webgl在vscode需要注意的点，本文将接着介绍如何做个简单的修图功能，由于篇幅有限，只讲基本的语法、多边形绘制、缓冲区、帧缓存、纹理uv等。

预览

canvas也可以更简单的实现，getImageData可以得到点的集合，然后putImageData绘制就行了。但是一些复杂的算法，例如高斯模糊、雕刻效果，貌似就没有webgl灵活了。

createBuffer 缓冲区

缓冲区你可以理解canvas的save()保存状态，但是这里我们一般是点的集合，这里我不会讲具体的api细节，但是知道具体的代码流程就行，就是创建buffer及数据 -> 绑定数据 -> 如何加载

let bufferOrigin = gl.createBuffer()

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW)

gl.bindBuffer(gl.ARRAY_BUFFER, bufferOrigin);



gl.enableVertexAttribArray(positionAttributeLocation);  // 告诉缓冲区怎么加载

gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);

Program 对象

const canvas = document.querySelector("#canvas");

image.width = 540

image.height = 720



canvas.style.width = 540 + 'px'

canvas.style.height = 720 + 'px'



const gl = canvas.getContext("webgl");

if (!gl) {

  return;

}

const program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d", "fragment-shader-2d"]);

image加载的dom对象，设置宽高，webglUtils是封装的方法，其实就是之前的初始化的着色器，返回program程序对象。

shader 着色器

先看看着色器源码

<script id="vertex-shader-2d" type="x-shader/x-vertex">

attribute vec2 a_position;  // attribute在顶点着色器处理

attribute vec2 a_texCoord; // 纹理参数

uniform vec2 u_resolution; // 页面的坐标

attribute vec4 a_composeColor; // 纹理增强的向量

varying vec4 v_composeColor; 



void main() {

   // 屏幕坐标 -> 裁剪坐标

   vec2 zeroToOne = a_position / u_resolution;

   vec2 zeroToTwo = zeroToOne * 2.0;



   vec2 clipSpace = zeroToTwo - 1.0;



   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);

   v_composeColor = a_composeColor;

   v_texCoord = a_texCoord;  

}

</script>

attribute类型用于顶点着色器的属性，一般可以在后期动态添加一些控制，但是uniform是只能静态编译的时候就决定了，所以一般用于控制材质、光照等确定的值。为了能控制到片元着色器，那么一定要使用varying这个类型，一般通过变量传递给片元着色器做动态的渲染，所以一般会配合attriubute + varying

<script id="fragment-shader-2d" type="x-shader/x-fragment">

  precision mediump float;



uniform sampler2D u_image;

uniform vec2 u_textureSize;

uniform float u_kernel[9];

uniform float u_kernelWeight;

varying vec2 v_texCoord;

varying vec4 v_composeColor;



void main() {

   vec2 onePixel = vec2(1.0, 1.0) / u_textureSize;

   // 卷积内核的前置处理，u_kernel我们传递的核心数据

   vec4 colorSum =

       texture2D(u_image, v_texCoord + onePixel * vec2(-1, -1)) * u_kernel[0] +

       texture2D(u_image, v_texCoord + onePixel * vec2( 0, -1)) * u_kernel[1] +

      //.....

    // 计算最终的颜色结果

   gl_FragColor = vec4((colorSum / u_kernelWeight).rgb, 1) * v_composeColor;

}

</script>

这里返回的结果gl_FragColor就是最终绘制的颜色。注意颜色范围是0到1需要做个转换，这里的最核心的也就是卷积的算法

卷积

卷积就是一个 3×3 的矩阵， 矩阵中的每一项代表当前处理的像素和周围8个像素的乘法因子， 相乘后将结果加起来除以内核权重（内核中所有值的和或 1.0 ，取二者中较大者）

像素矩阵 * 修改矩阵 = 赋值于内核也就是中心位置

这也就是我们能处理模糊、锐化等特效的原理, 下面是简单的计算

// 将周围八个点相加用于平均数相除

function computeKernelWeight(kernel) {

  const weight = kernel.reduce(function(prev, curr) {

    return prev + curr;

  });

  return weight <= 0 ? 1 : weight;

}

 gl_FragColor = vec4((colorSum / u_kernelWeight).rgb, 1) * v_composeColor;

滤镜

 const kernelsFilter = {

      sharpness: {

        name: '锐度',

        data: [

          0, -1, 0,

          -1, 5, -1,

          0, -1, 0

        ],

      },

      gaussianBlur: {

        name: '高斯模糊',

        data: [

          0, 1, 0,

          1, 1, 1,

          0, 1, 0

        ],

      },

      edgeDetect2: {

        name: '反相',

        data: [

          -1, -1, -1,

          -1, 8, -1,

          -1, -1, -1

        ],

      },

      emboss: {

        name: '浮雕效果',

        data: [

          -2, -1, 0,

          -1, 1, 1,

          0, 1, 2

        ],

      },

    };

    

    // 向量乘积的滤镜

    const composeFilter = {

      light: {

        name: '曝光',

        data: new Float32Array([1.2, 1.2, 1.2, 1])

      },

      langmanmeigui: {

        name: '浪漫玫瑰',

        data: new Float32Array([1.1, 1, 1, 1])

      },

      // ....

    }

将上面的参数传入对上面的着色器，然后通过卷积赋值于gl_FragColor，这样简单的修图工具就大功告成了。

texcoord 纹理

const texcoordLocation = gl.getAttribLocation(program, "a_texCoord");

// ... 

gl.vertexAttribPointer(texcoordLocation, size2, type2, normalize2, stride2, offsetVal2);

这里用缓冲区处理，本质图片也就是4个点的矩形，因为每个点其实对应像素和位置, 下面是创建纹理的标准代码，将image传入到textImage2D，然后将缓冲区绑定到这样我们就可以绘制纹理了

 // webgl创建纹理，并设置基本纹理参数，载入image图片

const texture = gl.createTexture();

gl.bindTexture(gl.TEXTURE_2D, texture);



//定义纹理处理能力

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);



gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

帧缓冲

如何给图片施加多种状态的叠加效果，也就是图片 -> 纹理一 -> 纹理一 + 纹理二 -> 画布，那么我们需要用到帧缓冲，其实就是通过不断的bindTexture来覆盖之前的状态。

// 绘制帧缓冲

function drawFrames () {

  const originTexture = createAndSetupTexture(gl)

  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

  let textures = []

  let frameBuffers = []

  const kernelsFilterList = ['gaussianBlur', 'emboss', 'boxBlur',

  'gaussianBlur', 'boxBlur', 'gaussianBlur', 'boxBlur', 'gaussianBlur'] //叠加效果的数组



  for (let i = 0; i < kernelsFilterList.length; i++) {

    let texture = createAndSetupTexture(gl)

    textures.push(texture)



    gl.texImage2D(

      gl.TEXTURE_2D, 0, gl.RGBA, image.width, image.height, 0,

      gl.RGBA, gl.UNSIGNED_BYTE, null);



    var fBuffer = gl.createFramebuffer()

    frameBuffers.push(fBuffer)

    gl.bindFramebuffer(gl.FRAMEBUFFER, fBuffer);

    // 绑定纹理到帧缓冲

    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

  }

  gl.bindTexture(gl.TEXTURE_2D, originTexture);



  for (var i = 0; i < kernelsFilterList.length; i++) {

    setFramebuffer(frameBuffers[i], image.width, image.height);

    drawWithKernel(kernelsFilterList[i]);

    // 叠加

    gl.bindTexture(gl.TEXTURE_2D, textures[i]);

  }



  // 绘制

  setFramebuffer(null, canvas.width, canvas.height);

  drawWithKernel("normal");

   

  function setFramebuffer (fbo, width, height) {

    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); // 绑定帧缓存

    gl.uniform2f(resolutionLocation, width, height); // 设置到裁剪坐标

    gl.viewport(0, 0, width, height); // 将裁剪坐标自适应到屏幕坐标 

  }

}

总结

通过基本的语法、纹理使用、帧缓存等，我们对webgl的基本的2d图形处理有了一定的认知，正常在绘制三角形，四边形，圆形，我们都可以使用缓存区，最后drawArrays绘制，在一些图形的渲染需要保存之前的状态的时候，我们可以使用帧缓存处理。关于当前页面的优化，当前的修图页面应该将各种调色分到不同的glsl文件，同样我们也可以做裁剪，上传图片编辑并下载。

如果觉得文章对你有帮助，不要忘了一键三连 👍。

附录

1. 内卷年代，是该学学WebGL了 - 掘金 (juejin.cn)


2. 为什么我的WebGL开发这么丝滑 🌊 - 掘金 (juejin.cn)

微信小程序完成某些需求功能需要获取精准经纬度，需要微信小程序后台-开发管理-接口设置，申请“获取当前的地理位置、速度（wx.getLocation）”，一直审核不通过，有的人甚至提交了10多次都没有通过，如果你没有掌握方法，及时申请几个月还是一样不给通过。

包括本人也是申请数次未通过，思考是否是理由不够充分，借助ChatGPT帮助我丰富申请理由，我用ChatGPT的回答来申请，立马审核通过。以下是模拟对ChatGPT的提问和回复。

提问

这是一个社区团购的微信小程序，由于团购服务点功能，需要精准定位到最近的服务点，因此需要wx.getLocation接口申请。请你基于我的需求，编写一个充分的申请原因，并包含操作步骤说明。

ChatGP回答

申请原因：

该社区团购微信小程序需要使用wx.getLocation接口获取用户的地理位置信息，以便精准定位用户所在地区，并显示最近的服务点。服务点根据用户所在地区的需求，提供更加贴近实际的商品和服务，确保用户的用户体验。该接口可以通过用户授权的方式获得用户所在位置信息，不会泄露用户的隐私信息。

操作步骤：

1. 首先在微信小程序中调用wx.getLocation接口进行定位，用户将会收到授权提示，需同意授权以便应用获取用户的地理位置信息。

2.定位成功后，小程序将通过得到的经纬度信息，计算用户位置与服务点之间的距离，并返回最近的服务点信息给用户。

3. 如果用户不同意授权，将无法获取用户地理位置信息，定位功能将无法使用，导致无法提供精准的服务点查找。

4.在使用wx.getLocation接口时，需要注意用户个人隐私问题，小程序应在提供提醒并遵守相关规定的前提下，妥善保护用户隐私信息。

接口申请总结

ChatGPT的回答固然帮助我们丰富了申请原因，但是申请该接口的基本要点还是要掌握。

1. 确保小程序的服务类目可申请wx.getLocation，最好是主营类目，包含两个类目。


2. 原因表达充分，主要以用户体验角度，及用户隐私。


3. 提交的图片、视频，符合申请的步骤。

最后

ChatGPT是自然语言处理工具，需要充分的表达清楚，才可能接近输出我们需要的答案，且我们能够甄别验证它的输出。

其他
# 经验分享：快速通过“获取当前的地理位置、速度（wx.getLocation）接口”审核

之前线上发生了一个很诡异的异常，网上各种搜索、排查，都没有找到问题，给大家分享一下。

大概在 2 月份的时候，我们的某个应用整合了中间件的 kafka 客户端，发布到灰度和蓝节点进行观察，然后就发现线上某个 Topic 发生了大量的RetriableCommitException，并且集中在灰度机器上。

E20:21:59.770 RuntimeException  org.apache.kafka.clients.consumer.RetriableCommitFailedException  ERROR [Consumer clientId=xx-xx.4-0， groupId=xx-xx-consumer_[gray]] Offset commit with offsets {xx-xx-xx-callback-1=OffsetAndMetadata{offset=181894918， leaderEpoch=4， metadata=''}， xx-xx-xx-callback-0=OffsetAndMetadata{offset=181909228， leaderEpoch=5， metadata=''}} failed org.apache.kafka.clients.consumer.RetriableCommitFailedException: Offset commit failed with a retriable exception. You should retry committing the latest consumed offsets.

Caused by: org.apache.kafka.common.errors.TimeoutException: Failed to send request after 30000 ms.

排查

检查了这个 Topic 的流量流入、流出情况，发现并不是很高，至少和 QA 环境的压测流量对比，连零头都没有达到。

但是从发生异常的这个 Topic 的历史流量来看的话，发生问题的那几个时间点的流量又确实比平时高出了很多。

同时我们检查 Broker 集群的负载情况，发现那几个时间点的 CPU 负载也比平时也高出很多（也只是比平时高，整体并不算高)。

对Broker集群的日志排查，也没发现什么特殊的地方。

然后我们对这个应用在QA上进行了模拟，尝试复现，遗憾的是，尽管我们在QA上把生产流量放大到很多倍并尝试了多次，问题还是没能出现。

此时，我们把问题归于当时的网络环境，这个结论在当时其实是站不住脚的，如果那个时刻网络环境发生了抖动的话，其它应用为什么没有这类异常？

可能其它的服务实例网络情况是好的，只是发生问题的这个灰实例网络发生了问题。

那问题又来了，为什么这个实例的其它 Topic 没有报出异常，偏偏问题只出现在这个 Topic 呢？。。。。。。。。。

至此，陷入了僵局，无从下手的感觉。

从这个客户端的开发、测试到压测，如果有 bug 的话，不可能躲过前面那么多环节，偏偏爆发在了生产环境。

没办法了，我们再次进行了一次灰度发布，如果过了一夜没有事情发生，我们就把问题划分到环境问题，如果再次出现问题的话，那就只能把问题划分到我们实现的 Kafka 客户端的问题了。

果不其然，发布后的第二天凌晨1点多，又出现了大量的 RetriableCommitFailedException，只是这次换了个 Topic，并且异常的原因又多出了其它Caused by 。

org.apache.kafka.clients.consumer.RetriableCommitFailedException: Offset commit failed with a retriable exception. You should retry committing the latest consumed offsets.

Caused by: org.apache.kafka.common.errors.DisconnectException

...

...

E16:23:31.640 RuntimeException  org.apache.kafka.clients.consumer.RetriableCommitFailedException  ERROR 

...

...

org.apache.kafka.clients.consumer.RetriableCommitFailedException: Offset commit failed with a retriable exception. You should retry committing the latest consumed offsets.

Caused by: org.apache.kafka.common.errors.TimeoutException: The request timed out.

分析

这次出现的异常与之前异常的不同之处在于：

1. 1. Topic 变了


2. 2. 异常Cause变了

而与之前异常又有相同之处：

1. 1. 只发生在灰度消费者组


2. 2. 都是RetriableCommitFailedException

RetriableCommitFailedException 意思很明确了，可以重试提交的异常，网上搜了一圈后仅发现StackOverFlow上有一问题描述和我们的现象相似度很高，遗憾的是没人回复这个问题：StackOverFlow。

我们看下 RetriableCommitFailedException 这个异常和产生这个异常的调用层级关系。

除了产生异常的具体 Cause 不同，剩下的都是让我们再 retry，You should retry Commiting the lastest consumed offsets。

从调用层级上来看，我们可以得到几个关键的信息，commit 、 async。

再结合异常发生的实例，我们可以得到有用关键信息： 灰度、commit 、async。

在灰度消息的实现上，我们确实存在着管理位移和手动提交的实现。

看代码的第 62 行，如果当前批次消息经过 filter 的过滤后一条消息都不符合当前实例消费，那么我们就把当前批次进行手动异步提交位移。结合我们在生产的实际情况，在灰度实例上我们确实会把所有的消息都过滤掉，并异步提交位移。

为什么我们封装的客户端提交就会报大量的报错，而使用 spring-kafka 的没有呢？

我们看下Spring对提交位移这块的核心实现逻辑。

可以同步，也可以异步提交，具体那种提交方式就要看 this.containerProperties.isSyncCommits() 这个属性的配置了，然而我们一般也不会去配置这个东西，大部分都是在使用默认配置。

人家默认使用的是同步提交方式，而我们使用的是异步方式。

同步提交和异步提交有什么区别么？

先看下同步提交的实现：

只要遇到了不是不可恢复的异常外，在 timer 参数过期时间范围内重试到成功（这个方法的描述感觉不是很严谨的样子）。

我们在看下异步提交方式的核心实现：

我们不要被第 645 行的 RequestFuture future = sendOffsetCommitRequest(offsets) 所迷惑，它其实并不是发送位移提交的请求，它内部只是把当前请求包装好，放到 private final UnsentRequests unsent = new UnsentRequests(); 这个属性中，同时唤醒真正的发送线程来发送的。

这里不是重点，重点是如果我们的异步提交发生了异常，它只是简单的使用 RetriableCommitFailedException 给我们包装了一层。

重试呢？为什么异步发送产生了可重试异常它不给我们自动重试？

如果我们对多个异步提交进行重试的话，很大可能会导致位移覆盖，从而引发重复消费的问题。

正好，我们遇到的所有异常都是 RetriableCommitException 类型的，也就是说，我们把灰度位移提交的方式修改成同步可重试的提交方式，就可以解决我们遇到的问题了。

在学校的时候，计算机相关专业的同学应该都或多或少都被“大作业”折磨过，没有为“大作业”熬过夜通过宵的大学生活可以说是不完整的。步入公司后才发现，校园里的“大作业”就像玩具一样，需求明确、解决方案明确、最终产品效果明确、甚至还有前人的作品可以参考，而在公司里要做的东西，上面说的特点至少有一个不具备，甚至通通不具备。

而我在字节实习的过程中，所经手的恰恰就是这么一个需求不明确、解决方案不明确、最终产品效果不明确的项目。整个过程中有过焦头烂额毫无进展的时刻也有过欲哭无泪的时刻，还好有我的mentor带着我一路披荆斩棘、过关斩将。

首先和大家讲一下项目背景，当时我在的组是视频会议移动端，经历了近三年大流感的洗礼，相信大家对于视频会议中可能遇到的各种问题如数家珍，包括但不限于没声了、没音了、没画面了、画面卡顿、画面不清晰、画面和语音不同步、同步屏幕时闪退等等等等。作为一个服务企业级的B端产品，出现以上问题时就可能会投诉，然后经过客户成功部门转手到运营再转手到研发这里，研发就需要判断分析一下究竟是我们产品的原因、还是客户本身设备的问题、或者是第三方环境的因素，当用户的量级上来后，这样的客诉就会很多，会严重占用oncall的研发人员的时间以及精力。

我的mentor，一个专注于解决问题、避免重复劳动的人，一个字节范我觉得有E+的人，一个虽然身处移动端但是前后端甚至网络也都会的人，觉得这样很不OK，应该有个工具，能够自动的分析出来客户究竟遇到了什么问题，分析不出来的再找研发进行排查。没有这个工具也不影响业务开发的进展，所以整个项目并不存在时间上的紧迫性，但是呢，有这个工具做出来后肯定会大大降低研发的开发时间，所以项目的必要性还是有的。于是，我作为刚入职的实习新人，这个项目就交给我来做了。

而我，一个还没有从校园中完全出来的新兵蛋子，说实话面对这样的场面是一脸懵逼的，对于要做啥、要怎么做可以说是一无所知，我的mentor在我入职后，让我先了解了解背景，第一周就带着我oncall了，让我知道都可能有样的客诉，手把手给我演示他们正常的排查问题的方式。先了解客户反馈的情况，然后捞出来客户对应时间的设备信息以及设备日志。

说实话，作为一个新人，或者说我本身对于项目有一种畏难心理，碰到一点难题就总是想着往后拖，或者摆烂先不管然后就搁置在一边不想再问津了，但是我的mentor是一个有着坚定信念的人，差不多就是见山开山，见水架桥这种，遇到问题会主动找到相关人员一起解决，可以说就是有那种主人翁，项目owner的意识。于是，我就跟在他的后面，和整个团队的不同角色沟通他们遇到问题时排查的思路，试图总结出来一种通用的流程。在过程中，难免有许多困难，我的第一反应是退缩，但是导师的第一反应是拉会拉上相关人员一起讨论，看看用什么方式可以解决。比如在如何确定设备日志和故障表现的映射关系时，先后调研了多种方式看看相关团队有没有类似的做法以及他们最后实现的效果，包括大数据机器学习、代码状态流转图、自定义规则引擎等多种方式，最后调研后决定采用自定义规则引擎的方式。在实现需求的时候，需要其他团队协作时，他总是直接向前提出自己的需求，而我向一个陌生人发消息之前总要做一些心理建设，总是在担心些什么、害怕些什么，而事实上大家都是打工人，谁也不比谁厉害多少，对方不配合那就拉+1进群一起看看，解决不了就向上暴露问题。

于是，导师披荆斩棘在前，我在后面跟着实现他的设想。我们很快就做出来了第一个版本。通过Python自动化下载设备日志，然后正则匹配筛选出含有特定标记的日志，并对他们的出现频率次数做出判断。因为Python是解释型的语言，所以可以把规则直接写成python语言，用eval或者exec函数进行执行。第一个版本做出来后，导师又积极的带着我去给其他人宣传我们的这个工具。然后根据他们的反馈继续进行相关改进，最后我离职前实现的效果就是@ 一个群里的机器人，告诉他出现问题的ID，他就能自动化的拉下来日志进行排查，然后告诉你他分析的结果，整个交互非常的方便。

一个成功的项目必须要有一个负责的owner，我的导师就向我展示了一个优秀的owner是如何一步步解决问题、排除项目中的难关，如今我也正式成为一名打工人，希望我也能早日如他一般自如的面对工作。

我是日暮与星辰之间，出道两年半的Java选手，相信时间的力量，

一起成为更好的自己！

硬盘坏了，一气之下写了个恢复程序

师傅拯救无望

硬盘已经寄过去超过一周了，一问竟然是还没开始弄？？？

再过一周，上来就问我分几个区？我要恢复哪些数据？我要恢复的数据在哪个位置？

那好吧，既然给了钱师傅也都放弃了，我也没什么好寄托希望的了。况且经过这三个星期的缓解，心情已经平复了很多，就像时光，回不来了就是回不来了。

自救之路

在把硬盘寄过去的时间里，等待师傅的修复结果的时间里，我并没有闲着(在摸鱼)。

经过调研，数据恢复方法通常有：

• 硬件损坏，对坏的盘进行修复


• 误删或逻辑错误等，文件扫描修复


• git 重置恢复

很明显，这些都不适用于我现在的场景。因为师傅能不能修好是未知的，我只是数据盘没了，系统盘还在。由于 vscode 的数据目录空间占比较小，就没有搬迁到数据盘里，这刚好可以为恢复代码提供了可能。

这是因为新版 vscode 有一个时间线功能，这个时间线数据是默认存储在用户目录下的。

我从 C:/Users/love/AppData/Roaming/Code/User/History 目录中确实找到了很多名为 entries.json 的文件，结构如下：

{

  // 配置版本

  "version": 1,

  // 原来文件所在位置

  "resource": "file:///d%3A/git2/cloudcmd/.madrun.mjs",

  // 文件历史

  "entries": [

    {

      // 历史文件存储的名称

      "id": "YFRn.mjs",

      "source": "工作区编辑",

      // 修改的时间

      "timestamp": 1656583915880

    },

    {

      "id": "Vfen.mjs",

      "timestamp": 1656585664751

    },

  ]

}

通过上面的文件大概可以看到，每一个时间点的文件都保存在另一个随机命名的文件里。而网上的方法基本都是自己一个个手动到目录里去根据最新的 id 去找对应的文件内容，然后创建文件并把内容复制出来。

这个过程恢复一两个文件还好，但我这可是要恢复整个 git 工作区，大概有几十个项目上千个文件。

这时候当然是在网上找找有没有什么 vscode 数据恢复 相关的工具，很遗憾找了大半天都没有找到。

气死我了，一气之下就自己写个！

恢复程序开发步骤

毕竟只要数据在磁盘上，无非就是一个文件读取操作的问题，还要拿在这水文章，见谅见谅。

首先考虑需求：

• 我要实现一个自动扫描 vscode 数据目录


• 然后以原始的目录结构还原出来，不需要我自己去创建文件夹和文件


• 如果还原的文件最新的那份不是我想要的，我还能根据时间线进行对比和选择


• 扫描出来有N个项目时，我可以指定只还原某此项目


• 我可以搜索文件、目录名或文件内容进行还原


• 为了方便，我还要一个看起来不太丑的操作界面

大概就上面这些吧。

然后考虑实现：

我要实现一个自动扫描 vscode 数据目录

要的就是我自己连数据目录和恢复地址也不需要填写，就能自动恢复的那种。那么就让程序来自动查找数据目录。经过调研，各版本的 vscode 的数据目录一般保存在这些地方：

参考： stackoverflow.com/a/72610691

  - win -- C:\Users\Mark\AppData\Roaming\Code\User\History

  - win -- C:\Users\Mark\AppData\Roaming\Code - Insiders\User\History

  - /home/USER/.config/VSCodium/User/History/

  - C:\Users\USER\AppData\Roaming\VSCodium\User\History

大概有上面这些路径，当然不排除使用者故意把默认位置修改掉这种边缘情况，或者使用者就只想扫描某个数据目录的情况，所以我也要支持手动输入目录：

  let { historyPath, toDir } = req.body

  const homeDir = os.userInfo().homedir

  const pathList = [

    historyPath,

    `${homeDir}/AppData/Roaming/Code/User/History/`,

    `${homeDir}/AppData/Roaming/Code - Insiders/User/History/`,

    `${homeDir}/AppData/Roaming/VSCodium/User/History`,

    `${homeDir}/.config/VSCodium/User/History/`,

  ]

  historyPath = (() => {

    return pathList.find((path) => path && fs.existsSync(path))

  })()

  toDir = toDir || normalize(`${process.cwd()}/re-store/`)

然后以原始的目录结构还原出来……

这就需要解析扫描到的时间线文件 entries.json 了。我们先把解析结果放到一个 list 中，以下是一个完整的解析方法。

然后再把列表转换为树型，与硬盘上的状态对应起来，这样便于调试数据和可视化。

function scan({ historyPath, toDir } = {}) {

  const gitRoot = `${historyPath}/**/entries.json`



  fs.existsSync(toDir) === false && fs.mkdirSync(toDir, { recursive: true })

  const globbyList = globby.sync([gitRoot], {})



  let fileList = globbyList.map((file) => {

    const data = require(file)

    const dir = path.parse(file).dir

    // entries.json 地址

    data.from = file

    data.fromDir = dir

    // 原文件地址

    data.resource = decodeURIComponent(data.resource).replace(

      /.*?\/\/\/(.*$)/,

      `$1`

    )

    // 原文件存储目录

    data.resourceDir = path.parse(data.resource).dir

    // 恢复后的完整地址

    data.rresource = `${toDir}/${data.resource.replace(/:\//g, `/`)}`

    // 恢复后的目录

    data.rresourceDir = `${toDir}/${path

      .parse(data.resource)

      .dir.replace(/:\//g, `/`)}`

    const newItem = [...data.entries].pop()

    // 创建文件所在目录

    fs.mkdirSync(data.rresourceDir, { recursive: true })

    const binary = fs.readFileSync(`${dir}/${newItem.id}`, {

      encoding: `binary`,

    })

    fs.writeFileSync(data.rresource, binary, { encoding: `binary` })

    return data

  })



  const tree = pathToTree(fileList, { key: `resource` })

  return tree

}

为了方便，我还要一个看起来不太丑的操作界面

我们要把文件树的形式展示出来，还要方便切换。后面决定使用 macos 的文件管理器风格，大概如下。

如果还原的文件最新的那份不是我想要的，我还能根据时间线进行对比和选择

理论上这里应该要做一个像 vscode 对比文件那样，有代码高亮功能，并且把有差异的字符高亮出来。

实际上，这个需求得加钱。

由于界面是在浏览器里的，需要自动打开，浏览器与系统交互需要一个接口，所以我们使用 opener 来自动打开浏览器。

使用 get-port 来自动生成接口服务的端口，避免使用时出现占用。

  const opener = require(`opener`)

  const { portNumbers, default: getPort } = await import(`get-port`)

  const port = await getPort({ port: portNumbers(3000, 3100) })

  const server = express()

  server.listen(port, `0.0.0.0`, () => {

    const link = `http://127.0.0.1:${port}`

    opener(link)

  })

封装成工具，我为人人

理论上我根本不需要什么 UI 界面，也不需要配置，因为我的文件都恢复出来了我还花时间去搞毛线？

实际上，万一别人也有这个恢复文件的需要呢？那么他只要运行下面这条命令代码就能立刻恢复到当前目录啦！

npx vscode-file-recovery

这就是恢复后的文件在硬盘里的样子啦：

所有代码位于:

• github github.com/wll8/vscode…

建议收藏，以备不时之需。/手动狗头

前言

在使用我们国民应用微信和支付宝的时候，打开付款码给别人扫码的时候，那个页面简直亮瞎我的眼，做为一个Android开发者，我就想这个功能是怎么实现的呢?

问题：如何实现屏幕的常量与亮度控制呢？又有哪些方式来实现呢？

一、WakeLock机制

说起应用程序App的耗电，其本质就是硬件的消耗电量，硬件耗电单元分为CPU、基带、GPU、WIFI、BT、GPS、LCD/OLED等等。

耗电量的层级 基带非通话时间的能耗基本上在 5mA 左右， 而CPU只要处于非休眠状态，能耗至少在 50mA 以上，GPU执行图形运算时会更高, 另外 LCD/OLED, GPS等硬件又更高。

一般手机待机时，CPU、LCD、WIFI均进入休眠状态，这时 Android 中应用程序的代码也会停止执行,只会有基带处理器的耗电。 这也就是为什么微信比短信相比更加的耗电，答案就是短信使用基带耗电小, 而微信使用CUP耗电大。

Android 为了确保应用程序中关键代码的正确执行，提供了 WakeLock 的API，使得应用程序有权限通过代码阻止CPU进入休眠状态。

WakeLock 阻止应用处理器 CPU 的挂起，确保关键代码的运行，通过中断唤起应用处理器 CPU，可以阻止屏幕变暗。所有的 WakeLock 被释放后，系统会挂起。

例如以下音乐播放器，我们申请了 WakeLock 的情况下，就算按下电源键锁屏了，我们的音乐还是会播放。CPU不会休眠照样会处理我们的应用。

但是如果我们不释放 WakeLock，或者滥用 WakeLock 就会导致电池续航尿崩，用户查看电池消耗查看你的 App 耗电量高就会卸载了。

除了阻止 CPU 休眠，WakeLock 还可以让屏幕常亮，通过设置对应的 levelAndFlags 即可实现，常用的几个levelAndFlags：

• PARTIAL_WAKE_LOCK:保持CPU 运转，屏幕和键盘灯有可能是关闭的。


• SCREEN_DIM_WAKE_LOCK：保持CPU 运转，允许保持屏幕显示但有可能是灰的，允许关闭键盘灯


• SCREEN_BRIGHT_WAKE_LOCK：保持CPU 运转，保持屏幕高亮显示，允许关闭键盘灯


• FULL_WAKE_LOCK：保持CPU 运转，保持屏幕高亮显示，键盘灯也保持亮度


• ACQUIRE_CAUSES_WAKEUP：不会唤醒设备，强制屏幕马上高亮显示，键盘灯开启。有一个例外，如果有notification弹出的话，会唤醒设备。


• ON_AFTER_RELEASE：WakeLock 被释放后，维持屏幕亮度一小段时间，减少 WakeLock 循环时的闪烁情况

怎么使用呢？先声明权限

    <uses-permission android:name="android.permission.WAKE_LOCK"/>

然后直接使用：

    override fun init() {

        val powerManager = commContext().getSystemService(Service.POWER_SERVICE) as PowerManager

        wakeLock = powerManager.newWakeLock(PowerManager.FULL_WAKE_LOCK, "My Lock")



       //是否需计算锁的数量

        wakeLock.setReferenceCounted(false)



    }



    override fun onResume() {

        super.onResume()

        wakeLock.acquire()



    }



    override fun onStop() {

        super.onStop()

        wakeLock.release();

    }

这样就可以实现一个简单的屏幕常亮的控制了。

虽然是可以实现逻辑，但是按照上面说的，谷歌可能也是怕我们滥用，导致手机续航尿崩，然后甩锅到Android系列上，说Android系列辣椒续航不行什么什么的，谷歌老早就标记过时了，并提供了新的 Api 实现此功能 SCREEN_ON。

二、KEEP_SCREEN_ON

有两种方式设置，一种是xml内部设置，另一种是通过Activity的window添加flag来设置

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:background="@color/white"

        android:keepScreenOn="true"

        android:orientation="vertical"/>

 

或者oncreate方法中添加flags

    override fun init() {

        window.addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON)

    }

两种方法都能实现，并且是和Activity生命周期绑定的，当我们退出这个页面就可以退出常量的状态，使用起来也是非常的方便。

那如果是这样一样场景，比如我们使用单Activity+多Fragment的方式，我们需要为其中一个Fragment设置为常亮，切换Fragment的时候动态的切换亮度，那怎么办？

我们需要动态的开关这个flag

window.addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);



window.clearFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);

又或者找到跟视图动态设置keepScreenOn属性 setKeepScreenOn 也是可行的，下面我们会以window的方式做一个工具封装类。

二、最大亮度的设置

最大亮度可以通过当前 Activity 的 window 对象设置 windowLayoutParams ，设置对应的 screenBrightness 值即可实现。

我们可以实现一个工具类来控制常亮的开关和最大亮度的开关，特别适用于单Activity+多Fragment的使用场景。

public class ScreenUtils {



    /**

     * 获取屏幕宽度

     */

    public static int getScreenWidth(Context context) {

        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);

        int width = wm.getDefaultDisplay().getWidth();

        return width;

    }





    /**

     * 获取屏幕高度

     */

    public static int getScreenHeith(Context context) {

        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);

        int height = wm.getDefaultDisplay().getHeight();

        return height;

    }





    /**

     * 是否使屏幕常亮

     *

     * @param activity 当前的页面的Activity

     */

    public static void keepScreenLongLight(Activity activity, boolean isOpenLight, boolean maxBrightness) {



        Window window = activity.getWindow();

        if (isOpenLight) {

            window.addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);

        } else {

            window.clearFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);

        }



        WindowManager.LayoutParams windowLayoutParams = window.getAttributes();

        windowLayoutParams.screenBrightness = maxBrightness ?

                WindowManager.LayoutParams.BRIGHTNESS_OVERRIDE_FULL : WindowManager.LayoutParams.BRIGHTNESS_OVERRIDE_NONE;

        window.setAttributes(windowLayoutParams);

    }

}

使用的时候在页面显示的时候常亮且最大亮度即可，然后我们可以在任意地方关闭这些设置。

    override fun onResume() {

        super.onResume()



        ScreenUtils.keepScreenLongLight(this, true, true)

    }





    override fun onStop() {

        super.onStop()



        ScreenUtils.keepScreenLongLight(this, false, false)

    }

最大亮度打开页面简直亮瞎我的眼！

OK，完结！

前言

上一篇文章中 juejin.cn/post/715437… ，在源码解析阶段，那些判断16进制的地方，很有意思，加上我以前也写过一篇关于这个的文章 http://www.jianshu.com/p/bff2b84ca… ，所以想在这里做个分享。

状态变量的一般写法

可能有些朋友平时在开发时定义常量状态是这样定义的：

public static final int SEX_BOY = 0; // 男生

public static final int SEX_GIRL = 1; // 女生

然后看了某篇文章之后，某个经验丰富的说，定义常量时最好使用16进制，再去看了看Android某些类的源码，嗯，好像里面定义常量确实是使用了16进制，于是之后写代码就开始

public static final int SEX_BOY = 0x00; // 男生

public static final int SEX_GIRL = 0x01; // 女生

public static final int SEX_OTHER = 0x02; // 其它

比如说有很多个状态，就从0x01、0x02......0xff 这样列举下去。

这样写对吗？我随便找个源码来举例下，随便从View.java扣出一段代码

为什么是这样定义呢，为什么不是像我们那种写法？

叠加状态的定义方式

其实这个直接说不好解释，跟着我去操作，就理解为什么要这么定义了。

假设我们定义状态，定义成这样

public static final int TYPE1 = 0x01;

public static final int TYPE2 = 0x02;

public static final int TYPE3 = 0x04;

public static final int TYPE4 = 0x08;

public static final int TYPE5 = 0x10;

public static final int TYPE6 = 0x20;

public static final int TYPE7 = 0x40;

public static final int TYPE8 = 0x80;

为什么这么写呢？

我们将16进制转成2进行，上面就对应成

有意思的就在这里，我先说的我想的过程中错误的一个思路 （我觉得挺有意思的，所以可以说下，因为是一个错误的思路，如果不想看可以直接跳看下面的这样定义的原因） ：

二进制从右往左来说

（1）我用第一位表示性别 000：女 001：男

（2）我用第二位表示角色 000：学生 010：老师

（3）我用第三位表示班级 000：A班 100：B班

那么 “A班的女老师” 我可以表示成 010 = 2

“A班的男老师” 可以表示成 011=3

“B班的女学生”可以表示成 100 .....

这样可以组成8个状态而不会冲突，但是这样的做法是只能用3个状态组合进行比较，而且单个状态下有000表示了3种，而且这种做法同一位上只能表示两种状态，假如我加个C班，那就没辙了。

然后换了一种思考的方法，假如我这样表示状态

public static final int TYPE1 = 0x01;  // 女

public static final int TYPE2 = 0x02;  // 男

public static final int TYPE3 = 0x04;  // 学生

public static final int TYPE4 = 0x08;  // 老师

public static final int TYPE5 = 0x10;  // 主任

public static final int TYPE6 = 0x20;  // A班

public static final int TYPE7 = 0x40;  // B班

public static final int TYPE8 = 0x80;  // C班

那么 使用二进制的或运算：

“A班的女老师” 我可以表示成 TYPE6|TYPE1|TYPE4 = 0010 1001 = 41

“A班的男老师” 可以表示成 TYPE6|TYPE2|TYPE4 = 0010 1010 = 42

“B班的女主任”可以表示成 TYPE7|TYPE1|TYPE5 = 0101 0001 = 81

这样也能把多个状态组成一个状态，而且组合状态也能和单个状态进行同等级判断，并且这种做法不会产生重复的状态。

举个例子就是说你平时写

if(性别==女 && 角色 == 老师 && 班级 == A班){

    ......

}else if(版本 == C班){

    ......

}

如果用我这种方法定义状态的话，你只用写

if(type == 0x29){

    ......

}else if(type == 0x80){

    ......

}

可能有些人说就仅仅为了这样？那我写&&还好过，写成16进制转换转的我脑壳疼。我还不如多写几个&&，而且这样也更容易让别人看懂。
但这个写法不仅仅有这种好处，再举个例子，假如在很多个组合的状态中你需要去判断这个状态是“男”还是“女”等等，多状态下判断单状态多了，也不是说乱，但会写很多代码，但是现在可以直接这样写

public void switchSex(type){

    if(type & 0x03 == 0x01){

        // 是女生

    }else{

        // 是男生

    }

}

就可以直接这样用二进制的与运算来实现判断。

我也仅仅是举了两个例子，我的意思是这样去定义十六进制常量，方便二进制做运算，二进制还有其他的运算呢，我仅仅举了“或”和“与”，还有什么异或啊，移位啊之类的，而且就算作用不大，按装逼来说，我直接做二进制的运算肯定比你那些乱七八糟的运算来得快吧。

总结

当然这只是我领悟的一种思路，而且我想很多人也知道这种做法，或者用16进制来定义常量不仅仅有这个好处，只是我觉得很有意思，所以想分享一下。

本系列自定义View全部采用kt

系统:mac

android studio: 4.1.3

kotlin version1.5.0

gradle: gradle-6.5-bin.zip

废话不多说,先来看今天要完成的效果:

3X3 (样式1)	4*4(样式2)	5*5(样式3)

Tips:不止3X3 或者 5X5 ,如果你想,甚至可以设置10*10

画圆

先以3*3的九宫格来介绍!

我们要画成这样的效果, 画的是有一点丑,但是没关系.

首先来分析一下怎么花,这9个点的位置如何确定:

• 我们为了平均分, 单个圆的外层矩形 宽 = view.width / 3


• 高 = 宽


• 1号圆的圆心位置 = 0个矩形的宽度 = view.width / (3 * 2) + ( view.width / 3 ) * 0


• 2号圆的圆心位置 = 1号圆的圆心位置 + 1个矩形的宽度 = view.width / (3 * 2) + (view.width / 3) * 1


• 3号圆的圆心位置 = 1号圆的圆心位置 + 2个矩形的宽度 = view.width / (3 * 2) + (view.width / 3) * 2

高坐标的计算也是如此

来看看目前的代码:

class BlogUnLockView @JvmOverloads constructor(

    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0

) : View(context, attrs, defStyleAttr) {

    private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {

        //

        strokeJoin = Paint.Join.BEVEL

    }



    // 大圆半径

    private val bigRadius by lazy { width / (NUMBER * 2) * 0.7f }



    // 小圆半径

    private val smallRadius by lazy { bigRadius * 0.2f }



    companion object {

        const val NUMBER = 3

    }



    private val unLockPoints = arrayListOf<ArrayList<UnLockBean>>()



    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {

        super.onSizeChanged(w, h, oldw, oldh)

        // 矩形直径

        val diameter = width / NUMBER

				

        // 

        val ratio = (NUMBER * 2f)

        var index = 1



        // 循环每一行行

        for (i in 0 until NUMBER) {

            val list = arrayListOf<UnLockBean>()



            // 循环每一列

            for (j in 0 until NUMBER) {

                list.add(

                    UnLockBean(

                        width / ratio + diameter * j,

                        height / ratio + diameter * i,

                        index++

                    )

                )

            }

            unLockPoints.add(list)

        }

    }



    override fun onDraw(canvas: Canvas) {

        canvas.drawColor(Color.YELLOW)

        

        unLockPoints.forEach {

            it.forEach { data ->

                // 绘制大圆

                paint.alpha = (255 * 0.6).toInt()

                canvas.drawCircle(data.x, data.y, bigRadius, paint)



                // 绘制小圆

                paint.alpha = 255

                canvas.drawCircle(data.x, data.y, smallRadius, paint)

            }

        }

    }

}

当前效果:

目前问题:

• 整个view占满了屏幕,需要测量

测量代码比较简单,就是让宽和高一样即可

此时改变number变量,就可以设置几行几列:

例如这样:

5*5	10*10

接下来我们就处理手势事件,按下滑动,抬起等,来改变选中

onTouchEvent事件处理

在事件处理之前先来分析一下需要几种事件,对于解锁功能来说:

• ORIGIN 刚开始,还没有触摸


• DOWN 正在触摸中(输入密码)


• UP 触摸结束 (输入密码正确)


• ERROR 触摸结束 (输入密码错误)

那么就先定义4种颜色,来表示这4种状态:

companion object {



    // 原始颜色

    private var ORIGIN_COLOR = Color.parseColor("#D8D9D8")



    // 按下颜色

    private var DOWN_COLOR = Color.parseColor("#3AD94E")



    // 抬起颜色

    private var UP_COLOR = Color.parseColor("#57D900")



    // 错误颜色

    private var ERROR_COLOR = Color.parseColor("#D9251E")

}

接下来挨个处理事件

DOWN(按下)

首先需要思考,在按下的时候要做什么事情:

• 判断是否选中

/*

* TODO 判断是否选中某个圆

* @param x,y: 点击坐标位置

*/

private fun isContains(x: Float, y: Float) = let {

    unLockPoints.forEach {

        it.forEach { data ->

            // 循环所有坐标 判断两个位置是否相同

            if (PointF(x, y).contains(PointF(data.x, data.y), bigRadius)) {

                return@let data

            }

        }

    }

    return@let null

}



// 判断一个点是否在另一个点范围内

fun PointF.contains(b: PointF, bPadding: Float = 0f): Boolean {

    val isX = this.x <= b.x + bPadding && this.x >= b.x - bPadding



    val isY = this.y <= b.y + bPadding && this.y >= b.y - bPadding

    return isX && isY

}

思路: 通过比较 按下位置和所有位置,判断是否有相同的

• 如果有相同的,那么就返回对应坐标


• 如果没有相同的,那么就返回null

@SuppressLint("ClickableViewAccessibility")

    override fun onTouchEvent(event: MotionEvent): Boolean {

        when (event.action) {

            MotionEvent.ACTION_DOWN -> {

               // 判断是否选中

                val pointF = isContains(event.x, event.y)

                pointF?.let {

                    // 将当前类型变为按下类型

                    it.type = JiuGonGeUnLockView.Type.DOWN

                }

            }

          ...

        }

        invalidate()

        return true

    }



override fun onDraw(canvas: Canvas) {

//        canvas.drawColor(Color.YELLOW)



        unLockPoints.forEach {

            it.forEach { data ->

                // 根据类型设置颜色

                paint.color = getTypeColor(data.type)



                // 绘制大圆

                paint.alpha = (255 * 0.6).toInt()

                canvas.drawCircle(data.x, data.y, bigRadius, paint)



                // 绘制小圆

                paint.alpha = 255

                canvas.drawCircle(data.x, data.y, smallRadius, paint)

            }

        }

}



/// TODO 获取类型对应颜色

private fun getTypeColor(type: JiuGonGeUnLockView.Type): Int {

    return when (type) {

        JiuGonGeUnLockView.Type.ORIGIN -> ORIGIN_COLOR

        JiuGonGeUnLockView.Type.DOWN -> DOWN_COLOR

        JiuGonGeUnLockView.Type.UP -> UP_COLOR

        JiuGonGeUnLockView.Type.ERROR -> ERROR_COLOR

    }

}

当前效果:

MOVE(移动)

move事件和down事件的逻辑是一样的,滑动的过程中判断点是否选中,然后绘制点

@SuppressLint("ClickableViewAccessibility")

override fun onTouchEvent(event: MotionEvent): Boolean {

    when (event.action) {

        MotionEvent.ACTION_DOWN -> {

            val pointF = isContains(event.x, event.y)

            pointF?.let {

                // 将当前类型改变为按下类型

                it.type = JiuGonGeUnLockView.Type.DOWN

            }

        }

        MotionEvent.ACTION_MOVE -> {

            val pointF = isContains(event.x, event.y)

            pointF?.let {

                // 将当前类型改变为按下类型

                it.type = JiuGonGeUnLockView.Type.DOWN

            }

        }

       

       ....

    }



    invalidate()

    return true

}

当前效果:

可以看出,效果是基本完成了,但是还有一个小错误

通常我们在九宫格的时候,一般都是先按下一个点才能滑动, 否则是不能滑动的,

现在的问题是,直接就可以滑动,所以还需要调整一下

那么我们就需要在down事件中标记一下是否按下,然后在move事件中判断一下

// 是否按下

private var isDOWN = false



@SuppressLint("ClickableViewAccessibility")

override fun onTouchEvent(event: MotionEvent): Boolean {

    when (event.action) {

        MotionEvent.ACTION_DOWN -> {

            val pointF = isContains(event.x, event.y)

            pointF?.let {

                // 将当前类型改变为按下类型

                it.type = JiuGonGeUnLockView.Type.DOWN

                isDOWN = true // 表示按下

            }

        }

        MotionEvent.ACTION_MOVE -> {

            if (!isDOWN) {

                return super.onTouchEvent(event)

            }

            val pointF = isContains(event.x, event.y)

            pointF?.let {

                // 将当前类型改变为按下类型

                it.type = JiuGonGeUnLockView.Type.DOWN

            }

        }



        MotionEvent.ACTION_CANCEL,

        MotionEvent.ACTION_UP -> {

            isDOWN = false // 标记没有按下

        }

    }



    invalidate()

    return true

}

此时效果:

UP(抬起)

思路分析:

抬起的时候要做很多事情

• 
  

  判断输入密码是否正确

  
  
  
  
  • 密码输入正确,那么就改变为深绿色
  
  
  • 密码输入错误,就改变为红色
  
  
  
  


• 
  

  完成之后,还需要吧所有的状态清空

  
  

在这里的时候,先不判断密码是否成功, 默认都是成功的,

• 先吧输入的密码toast出来


• 并且吧状态清空

等结尾的时候再来判断密码.

那么此时肯定是需要将所有选中的都记录下来, 然后在up事件中操作即可

// 记录选中的坐标

private val recordList = arrayListOf<UnLockBean>()



@SuppressLint("ClickableViewAccessibility")

override fun onTouchEvent(event: MotionEvent): Boolean {

    when (event.action) {

        MotionEvent.ACTION_DOWN -> {

            val pointF = isContains(event.x, event.y)

            pointF?.let {

                // 将当前类型改变为按下类型

                it.type = JiuGonGeUnLockView.Type.DOWN

                isDOWN = true



                recordList.add(it)

            }

        }

        MotionEvent.ACTION_MOVE -> {

            if (!isDOWN) {

                return super.onTouchEvent(event)

            }

            val pointF = isContains(event.x, event.y)

            pointF?.let {

                // 将当前类型改变为按下类型

                it.type = JiuGonGeUnLockView.Type.DOWN



                // 这里会重复调用，所以需要判断是否包含，如果不包含才添加

                if (!recordList.contains(it)) {

                    recordList.add(it)

                }

            }

        }



        MotionEvent.ACTION_CANCEL,

        MotionEvent.ACTION_UP -> {

            // 将结果打印

            recordList.map {

                it.index

            }.toList() toast context



            clear()

        }

    }



    invalidate()

    return true

}



/// 清空所有状态

 private fun clear() {

   recordList.forEach {

     // 将所有选中状态还原

     it.type = JiuGonGeUnLockView.Type.ORIGIN

   }

   recordList.clear()

   isDOWN = false // 标记没有按下

   

   invalidate()

 }

当前效果:

画连接线

还是以这张图来说:

假设现在需要连接 1,5,6,9

那么可以通过Path()来画线

在DOWN事件中,通过moveTo()移动到1的位置

在MOVE事件中,通过lineTo()画5,6,9的位置 即可

private val path = Path()



@SuppressLint("ClickableViewAccessibility")

override fun onTouchEvent(event: MotionEvent): Boolean {

    when (event.action) {

        MotionEvent.ACTION_DOWN -> {

            val pointF = isContains(event.x, event.y)

            pointF?.let {

                /// 隐藏部分代码

              

                path.moveTo(it.x, it.y)

            }

        }

        MotionEvent.ACTION_MOVE -> {

					  val pointF = isContains(event.x, event.y)

            pointF?.let {

            /// 隐藏部分代码



                // 这里会重复调用，所以需要判断是否包含，如果不包含才添加

                if (!recordList.contains(it)) {

                    recordList.add(it)

                    path.lineTo(it.x, it.y) // 连接到移动的位置

                }

            }

        }



        MotionEvent.ACTION_CANCEL,

        MotionEvent.ACTION_UP -> {

            // 将结果打印

            recordList.map {

                it.index

            }.toList() toast context





            clear()

        }

    }



    invalidate()

    return true

}



/*

 * 作者:史大拿

 * 创建时间: 9/14/22 1:38 PM

 * TODO 用来清空标记

 */

private fun clear() {

  path.reset() // 重置



  recordList.forEach {

    // 将所有选中状态还原

    it.type = JiuGonGeUnLockView.Type.ORIGIN

  }

  recordList.clear()

  isDOWN = false // 标记没有按下

}



override fun onDraw(canvas: Canvas) {

  paint.style = Paint.Style.FILL

  unLockPoints.forEach {

    /// 隐藏部分代码

  }



  paint.style = Paint.Style.STROKE

  paint.strokeWidth = 4.dp

  paint.color = DOWN_COLOR // 默认按下颜色

  canvas.drawPath(path, paint)

}

当前效果:

可以看出,已经完成了画连接线,但是还缺少一条指示当前手指位置的线,

我叫他移动线,,, (好土的名字)

移动线就2个坐标

• 开始位置 (最后一个选中的位置)


• 结束位置 (当前手指按下的位置)

private val line = Pair(PointF(), PointF())



@SuppressLint("ClickableViewAccessibility")

override fun onTouchEvent(event: MotionEvent): Boolean {

    when (event.action) {

        MotionEvent.ACTION_DOWN -> {

            val pointF = isContains(event.x, event.y)

            pointF?.let {

                /// 隐藏代码

                

                line.first.x = it.x

                line.first.y = it.y

            }

        }

        MotionEvent.ACTION_MOVE -> {

            val pointF = isContains(event.x, event.y)

            pointF?.let {

                if (!recordList.contains(it)) {

                     //// 隐藏代码



                    // 最后一个选中的位置

                    line.first.x = it.x

                    line.first.y = it.y

                }

            }



            // 手指的位置

            line.second.x = event.x

            line.second.y = event.y

        }

         ....

    }



    invalidate()

    return true

}



 override fun onDraw(canvas: Canvas) {

	

        paint.style = Paint.Style.FILL

        unLockPoints.forEach {

						/// 隐藏代码

        }



   			// 绘制连接线

        paint.style = Paint.Style.STROKE

        paint.strokeWidth = 4.dp

        paint.color = DOWN_COLOR // 默认按下颜色

        canvas.drawPath(path, paint)



        // 绘制移动线

        if (line.first.x != 0f && line.second.x != 0f

        ) {

            canvas.drawLine(

                line.first.x,

                line.first.y,

                line.second.x,

                line.second.y,

                paint

            )

        }

    }

当前效果:

此时效果就差不多了,画笔默认是实心圆, 来看看空心效果

空心效果

空心效果很简单,只需要调整画笔的style即可

 override fun onDraw(canvas: Canvas) {

   // 实心效果

//        paint.style = Paint.Style.FILL

   

   // 空心效果

        paint.style = Paint.Style.STROKE

        paint.strokeWidth = 4.dp



       // canvas.drawXXX()

    }

当前效果

可以看出,此时的效果和我们想的一样,但是画线的时候从小圆圆心穿过了,不太好看

有没有一种办法,让线不从圆心穿过

那么就先来分析一下:

假设现在是从7移动到2

那么就需要连接C点和F点,只需要计算出C点和F点的坐标即可

先来分析现在的已知条件:

• dx = end.x - start.x


• dy = end.y - start.y


• d = (dx平方 + dy平方) 开根号


• 小圆半径 = smallRadius

那么就可以算出当前的偏移量:

• offsetX = dx * (smallRadius / d)


• offsetY = dy * (smallRadius / d)

知道偏移量,就可以算出C和F的坐标:

那么C的坐标为:

• C.x = start.x + offsetX


• C.y = start.y + offsetY

那么F的坐标为:

• F.x = end.x + offsetX


• F.y = end.y + offsetY

只要C和F的坐标之后

只需要通过path.moveTo() 移动到C的位置

通过path.lineTo() 移动到F的位置即可

@SuppressLint("ClickableViewAccessibility")

override fun onTouchEvent(event: MotionEvent): Boolean {

    when (event.action) {

        MotionEvent.ACTION_DOWN -> {

           /// ... 

        }

        MotionEvent.ACTION_MOVE -> {

            val pointF = isContains(event.x, event.y)

            pointF?.let {

                // 将当前类型改变为按下类型

                it.type = JiuGonGeUnLockView.Type.DOWN



                // 这里会重复调用，所以需要判断是否包含，如果不包含才添加

                if (!recordList.contains(it)) {

                    recordList.add(it)

                    if (recordList.size >= 2) {

                        // TODO 不穿过圆心

                        val start = recordList[recordList.size - 2]

                        val end = recordList[recordList.size - 1]



                        val d = PointF(start.x, start.y).distance(PointF(end.x, end.y))

                        val dx = (end.x - start.x)

                        val dy = (end.y - start.y)

                        val offsetX = dx * smallRadius / d

                        val offsetY = dy * smallRadius / d



                        val cX = start.x + offsetX

                        val cY = start.y + offsetY

                        path.moveTo(cX, cY)



                        val fX = end.x - offsetX

                        val fY = end.y - offsetY

                        path.lineTo(fX, fY)



                        // line

                        line.first.x = it.x + offsetX

                        line.first.y = it.y + offsetY

                    }

                }

            }



            // 手指的位置

            line.second.x = event.x

            line.second.y = event.y

        }



        /// 隐藏UP代码

    }



    invalidate()

    return true

}





// 计算两点之间的距离 

fun PointF.distance(b: PointF): Float = let {

    val a = this



    // 这里 * 1.0 是为了转Double

    val dx = b.x - a.x * 1.0

    val dy = b.y - a.y * 1.0

    return@let sqrt(dx.pow(2) + dy.pow(2)).toFloat()

}

当前的效果:

所有的效果基本就差不多了,接下来来比较密码

密码比较

思路分析:

• 先将正确密码集合传过来,然后和输入的密码做比较


• 首先先判断两个集合的长度
  
  
  
  • 如果长度不一样,那么密码肯定是不同的,直接标记为错误即可
  
  
  • 如果长度一样,只需要比较每一个值是否相同
    
    
    
    • 相同则输入成功,将正确结果回调回去
    
    
    • 有一个不相同,则输入失败,标记为错误即可
    
    
    
    
  
  
  
  

// 密码

open var password = listOf<Int>()



MotionEvent.ACTION_UP -> {

    // 清空移动线

    line.first.x = 0f

    line.first.y = 0f

    line.second.x = 0f

    line.second.y = 0f





    // 标记是否成功

    val isSuccess =

  			// 先比较长度是否相同

        if (recordList.size == password.size) {

            val list = recordList.zip(password).filter {

                // 通过判断每一个值

                it.first.index == it.second

            }.toList()



            // 如果每一个值都相同，那么就成功

            list.size == password.size

        } else {

            false

        }



    // 密码错误，将标记改变成成错误

    if (!isSuccess) {

        recordList.forEach {

            it.type = JiuGonGeUnLockView.Type.ERROR

        }

        "输入失败" toast context

    } else {

        "输入成功" toast context

    }



    // 延迟1秒清空

    postDelayed({

        clear()

    }, 1000)

}

现在已经可以完成输入密码了,

但是状态还不对,我们希望连接线的颜色和圆的颜色一致,

当然我们可以这样:

override fun onDraw(canvas: Canvas) 

//        paint.style = Paint.Style.FILL

        paint.style = Paint.Style.STROKE

        paint.strokeWidth = 4.dp



        unLockPoints.forEach {

            it.forEach { data ->



                // 根据类型设置颜色

                paint.color = getTypeColor(data.type)



                // 绘制大圆

                paint.alpha = (255 * 0.6).toInt()

                canvas.drawCircle(data.x, data.y, bigRadius, paint)



                // 绘制小圆

                paint.alpha = 255

                canvas.drawCircle(data.x, data.y, smallRadius, paint)



								// 绘制连接线

                canvas.drawPath(path, paint)



                // 绘制移动线

                if (line.first.x != 0f && line.second.x != 0f

                ) {

                    canvas.drawLine(

                        line.first.x,

                        line.first.y,

                        line.second.x,

                        line.second.y,

                        paint

                    )

                }

            }

        }

    }

但是我还是选择了通过一个全局变量,来记录当前的状态,然后给连接线和移动线设置颜色

代码很简单,就不展示了,直接看效果:

到此时,效果就基本完成了,

但是,写完发现,代码真的太乱了,而且有很多设置的东西,

比如说:

• 默认颜色


• 移动颜色


• 输入成功颜色


• 输入失败颜色


• 解锁的大小
  
  
  
  • 例如3,就是3 X 3 5就是5 X 5
  
  
  
  


• 样式
  
  
  
  • 空心 or 实心
  
  
  
  

一般遇到这种情况我认为有2种方式

• 自定义属性


• 设计模式

自定义属性用的很多,这里我就通过Adapter模式来优化一下

先来定义规范

abstract class UnLockBaseAdapter {

    // 设置宫格个数

    // 例如输入3: 表示3*3

    abstract fun getNumber(): Int



    // 设置样式

    abstract fun getStyle(): JiuGonGeUnLockView.Style



    /*

     * 作者:史大拿

     * 创建时间: 9/14/22 10:24 AM

     * TODO 画连接线时,是否穿过圆心

     */

    open fun lineCenterCircle() = false



    // 设置原始颜色

    open fun getOriginColor(): Int = let {

        return Color.parseColor("#D8D9D8")

    }



    // 设置按下颜色

    open fun getDownColor(): Int = let {

        return Color.parseColor("#3AD94E")

    }



    // 设置抬起颜色

    open fun getUpColor(): Int = let {

        return Color.parseColor("#57D900")

    }



    // 设置错误颜色

    open fun getErrorColor(): Int = let {

        return Color.parseColor("#D9251E")

    }

}

实现:

class UnLockAdapter : UnLockBaseAdapter() {

    override fun getNumber(): Int = 5



    override fun getStyle(): JiuGonGeUnLockView.Style = JiuGonGeUnLockView.Style.STROKE



    override fun getOriginColor(): Int {

        return Color.YELLOW

    }

}

读取数据:

open var adapter: UnLockBaseAdapter? = null



override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {

    super.onMeasure(widthMeasureSpec, heightMeasureSpec)



    if (adapter == null) {

        throw AndroidRuntimeException("请设置Adapter")

    }

    adapter?.also {

        NUMBER = it.getNumber()

        ORIGIN_COLOR = it.getOriginColor()

        DOWN_COLOR = it.getDownColor()

        UP_COLOR = it.getUpColor()

        ERROR_COLOR = it.getErrorColor()

    }

}

来看看最终效果:

思路参考自

完整代码

原创不易,您的点赞就是对我最大的帮助

其他自定义文章:

• android 自定义View 视差动画


• android 仿QQ拖动效果


• android 图解PhotoView 从百草园到三味书屋


• android 浅析RecyclerView回收复用机制及实战(仿探探效果)


• android 自定义View: 中秋节放个烟花吧!)