【Zdog】西瓜来咯~瓜要说什么事物最能代表夏天,第一个想到的就是西瓜了,不过现在的西瓜没有回忆中小时候那么甜了。今天我们就来画西瓜,一片切开的西瓜~
笔前段时间在 github 上看到了一个很有意思的 Javascript 伪 3D 引擎,叫做 Zdog,可以绘制扁平风格的 3D 内容。上手简单,虽然有一些缺陷(后面会讲),但是用来做一些小玩具还是很有意思的。
官网有很多优秀的例子,可以参考学习。
先来介绍一下几个我们画西瓜会用到的 API:
IllustrationIllustration 是处理 <canvas> 或者 <svg> 元素的顶级类,保存场景中的所有形状,并在元素中显示这些形状。通过设置元素匹配的选择器来设置目标渲染元素。
123456789const illo = new Illustration({ element: '#zdogStage', // Canvas、Svg 元素的选择器 dragRotate: true, // 视角是否可拖动 zoom: 20, // 数值放大倍数,绘制时的数字将按倍数放大 rotate: ...
回忆青春!WebSocket + Canvas 打造冒险岛聊天室回忆绿水灵、花蘑菇、蝙蝠魔、射手村、勇士部落、魔法密林、废弃都市、天空之城、枫叶盾…,这些名字是否勾起你对《冒险岛 Online》的回忆呢?第一次接触冒险岛是五年级在微机课上,同学偷偷下载了刚公测不久的《冒险岛 Online》,像素画风的角色与怪物,听不腻的 BGM、2D 卷轴模式下优秀的战斗体验,对涉世未深的笔者来说,是多么大的诱惑啊。
到现在也无法忘记与朋友在射手训练场求大佬送药水,在猪的海洋练级,在废弃都市做组队任务的快乐时光。
复刻工作以后,玩游戏的时间少了,但还是放不下对《冒险岛 Online》的怀念,想要自己尝试复刻网页版,在了解其画面渲染机制以后发现,想要完全复刻,太难了,而且浏览器的性能可能也跟不上。所以退而求其次,开发一个冒险岛聊天室,众所周知,《冒险岛 Online》就是一个站街聊天软件[滑稽]。
演示地址:https://chat.fmcat.top开源地址:https://github.com/RongleCat/Maple-Story-canvas
演示地址所在的服务器带宽较小,各位看官看完了麻烦关闭浏览器页面,感谢。
技术选型通信既然是做聊天室,WebSoc ...
猎豹 for uTools 使用方法喜报🎉 特大喜讯!特大喜讯!🎉 Alfred 知名插件【猎豹】现已移植至 uTools 平台,走过路过不要错过!
你还在为项目繁多找不到目录而烦恼吗?在 终端、SourceTree、Finder 中打开项目的繁琐操作有让你感到痛苦吗?今天,你将和这些烦恼彻底告别。
安装首先安装需要安装优秀的提效工具 uTools,基于插件扩展的模式,让你轻松搭建自己的提效工具库,操作简单方便,功能强大到令人尖叫。
uTools 安装完成以后,唤醒 uTools 输入框,点击右侧图标。
在左侧输入框中输入“猎豹”并回车执行搜索。
命令关键字open / 编辑器输入关键字匹配项目,使用 默认编辑器 打开项目。
git_gui_open / Git 应用输入关键字匹配项目,使用 Git GUI 应用 打开项目。
terminal_open / 终端输入关键字匹配项目,使用 终端 打开项目。
folder_open / 文件夹输入关键字匹配项目,打开项目文件夹。
set_application / 设置项目默认应用输入关键字匹配项目,为项目设置打开应用,优先级高于默认编辑器。
配置唤醒 uTo ...
听说了么?有个同事打开项目太慢被优化了前言你还在为项目繁多找不到目录而烦恼吗?在 终端、SourceTree、Finder 中打开项目的繁琐操作有让你感到痛苦吗?
今天,你(Mac 用户)将和这些烦恼彻底告别。
书接上回《多此一举生成器》,今天我们继续使用 Alfred Workflows 开发一个能够搜索本地 Git 仓库,并快速使用指定应用打开仓库目录的工具。
省流助手123# 项目开源地址,现已支持 Alfred、uTools(插件市场审核中),Raycast 扩展将于 Q2 内完成开发# Alfred 用户请进入 cheetah-for-alfred 项目的 release 下载 .alfredworkflow 直接导入使用。https://github.com/cheetah-extension
Show Time
为了给大家节省流量,录制的质量调低了一些,操作的速度也加快了。
演示中都完成了以下操作:
使用默认编辑器打开指定项目。
使用指定的 Git GUI 应用打开项目。
在项目目录下打开终端。
在 Finder 中打开项目目录。
为项目指定编辑器。
重新执行步骤 1,打开项目的编辑器为步骤 5 设置的编辑 ...
多此一举生成器 - 从开发到使用为什么做这个工具上次想到这么无厘头的项目还是在上次,今天给大家分享一个非常具有废话文学精神的项目 ——《多此一举生成器》。
想到做这个项目的起因是在跟朋友聊天的时候,经常截图自己发的话来发言,大概就是这样:
每次都要输入一遍并且发送出去才能截图,十分的不方便,所以就想到是否能做一个工具,可以在输入文字后自动生成一张聊天截图。
在地球上,每过 60 秒,就过去了 1 分钟,事不宜迟,让我们马上开始吧。
生成截图初始化项目我们将使用 Node.js 来开发这个工具,首先新建工作目录并初始化 npm 项目:
12mkdir redundant-tools && cd redundant-toolsnpm init
npm 安装 canvas 包,让 Node 支持 canvas 绘图:
1npm i canvas
tips:因为 canvas 包需要根据本地 Node 版本编译原生模块,所以需要 gcc 环境,如果环境不完整可能会安装失败,这时候需要根据 官方( https://www.npmjs.com/package/canvas )指示安装对应环境。
新建 index ...
Rust + Neon + Node 开发 VSCode 插件(磨刀篇)书接上回,在《英雄集结篇》中我们确定了这个缝合怪项目使用的技术栈,但是整体的开发流程还没有做到如丝般顺滑。
《磨刀篇》我们将对项目做一些改动,让开发更加顺手,更加智能。
代码构建插件部分VSCode 开发脚手架 yo 默认生成的插件开发项目(TypeScript),在 package.json 中提供了几个命令,用于构建项目调试、发布的代码。
123456"scripts": { "vscode:prepublish": "npm run compile", // vsce publish 发布前执行构建 "compile": "tsc -p ./", // 构建代码 "watch": "tsc -watch -p ./", // 监听代码修改进行构建 ...},
目前的构建代码比较简单,直接使用了 tsc 命令将 .ts 文件都转换成 .js 输出到 out 目录下。当插件代码越来越复杂,引入的包更多后,这么做就不是 ...
Rust + Neon + Node 开发 VSCode 插件(英雄集结篇)公司梭哈了 Protobuf,为了提效,我们开发了一套完整的工具链,转换工程、PB Mock、各语言筛选工具等等,今天主要来讲讲筛选工具的事情。
转换工程把 .proto 文件转换成各个语言,我们目前支持 java、go、js、swift、dart、python等语言,转换结果保存在各自的结果仓库。
不同的客户端需要用到的 PB 文件不尽相同,全量引用会增加代码体积,对客户端非常不友好,所以需要一个工具来做筛选工作,客户端只需要引入接口使用到的 PB 文件。工具根据一份开发人员维护的 JSON 列表从结果仓库查找指定文件,输出到指定目录下。
第一版筛选工具是用 Node开发的,使用 pkg 这个包进行可执行文件的打包,功能上满足需求,也在持续优化迭代。最大的问题就是打包后输出的可执行文件实在太大了,足足 45M ,如果上传到 git 显得很笨重,不上传的话每次新拉取项目都要去下载工具,着实有些麻烦。所以再想有没有可以优化的地方。
最近团队组织学习 Rust ,在测试以后发现,编译出来的可执行文件远远小于 Node pkg 的体积,用 Rust 来写新一代工具的想法便浮上心头。
然而就算 ...
Jenkins 参数化构建初探之前的京东自动签到、什么值得买自动签到都是放在阿里的云效,通过流水线部署,代码也是托管在云效上面。但是 8 月云效的小企业免费套餐就到期了,免费续期的条件是总人数达到 10 人,月活跃人数 3 人。孤家寡人有点难达到,就想着自己搭个 CI/CD。公司的项目用的都是 jenkins,插件多,社区活跃,非常合适。所以在 NAS 上安装了一个 docker 版的 Jenkins,目前已经把签到、博客部署等任务迁移了,工作稳定。
本篇主要讲一下构建中的参数化,出于开源考虑,有些项目在自己开发完 ok 以后希望可以提供给有需要的朋友一起使用,但是又有些敏感的数据,比如 token、cookies、id、key 等等,在代码中写标识或者引用环境变量,构建时传入敏感数据完成构建任务的做法是比较科学合理的。
目前接触较多的都是 node 相关的项目,自己写的小工具也都是基于 node,在 node 中可以直接使用 process.env.* 来引用环境变量,这时只要构建时环境变量中有对应的 key 和正确的 value 就能完成整个任务的执行。
那我们来看看怎么在 Jenkins job 中配置一个环 ...
Sip 屏幕取色工具自定义 Flutter 格式色值Sip 是一款 Mac Os 上的屏幕取色工具,功能强大并且支持自定义取到的色值格式。
官网 https://sipapp.io/
开心版需要大家自己去找哦~
运行程序后在状态栏会出现一个小图标。
在设置里面可以配置快捷键,在运行程序的时候可以使用快捷键直接唤起取色工具,鼠标点取想要的颜色即可获取颜色。
程序提供了一些常用的色值格式。选择以后下一次取色就会返回对应的格式,比如常见的 CSS Hex色值(#0099FF)等等。
当然这些色值格式并不能覆盖所有色值使用场景,程序也提供了让用户自定义格式的方法。
在色值格式选择列表的最下方有一个加号,点击后会进入自定义面板。
自定义面板顶部的 Help 会有一些示例,可以逐个打开查看、复制,看过后基本就能明白怎么自定义一个自己想要的格式。
下面是一个 Flutter 中的颜色格式配置代码:
123456789101112131415161718192021222324{ "function" : "concat", "x" : { " ...
宝塔面板 nvm 配置环境变量上一篇提到在家中网络环境里新建了一台用于对外分发内容的 Centos 7.8,在上面安装了 宝塔面板。
在宝塔面板中安装了 Nginx 以及 pm2 任务管理器。
pm2 任务管理器 其实是包含了 nvm 的,跟我之前自己安装的 nvm 产生了冲突,不能正常工作,卸载自己安装的 nvm 后就可以了。
那么在命令行中直接查看 nvm、node、npm、pm2 等命令都提示找不到命令。研究了一下怎么把宝塔面板安装的 nvm 配置到系统环境变量中。
nvm 的环境变量不像其他工具的安装,直接在 $PATH 后面加上工具所在路径就行了,首先要知道 nvm 的安装路径。宝塔面板的工作目录在 /www 下,软件、工具会被安装在 /www/server 目录下。
nvm 的目录所处位置如下图所示
找到路径以后,在 .bashrc 末尾加上
12345export NVM_DIR="/www/server/nvm";# 设置 nvm 安装路径[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.s ...