最近有20个想法查看我全部的135个想法→
9月19日
星期四
3分钟

Airglass.js开发笔记:处理端口逻辑

airglass.js最佳实践

在输入端口与输出端口连通的一瞬间,除视觉形式外,更大的意义是执行相应的逻辑。更严谨地说,端口之间并不是瞬间连通的,这取决于逻辑执行的时间长短,我规定,只有端口处理器将逻辑成功执行完毕才可以将输入端口与输出端口连接。从视觉上能直观反应出逻辑执行成功与否。

9月16日
星期一
2分钟

airglass开发笔记:节点间端口连通与断连

节点连接airglass.js最佳实践

到目前为止,实现了通过已有数据渲染节点连接,还实现了从节点的输出端口拖出一条临时连线。在节点的输入端释放鼠标完成节点间端口对端口的关联关系。并解决如何断连端口之间的连线。

9月15日
星期日
4分钟

airglass.js最佳实践:创建模块连线

airglass.js最佳实践

编辑模块间的关联关系。模块的输出端口是连线的起始位置,模块的输入端口是连线的终止位置。从任意输出端口拖拽出一条曲线去连接另一个模块的输入端口,从而建立起模块与模块之间的连接关系。除了创建关联,如何解除关联关系,以及如何给模块创建新端口或删除模块的多余端口。

9月14日
星期六
3分钟

Airglass.js开发笔记:可视化模块连接

模块连接可视化airglass.js最佳实践

我特别为airglass.js新增了Module和BezierLine两个类。我所理解的模块就像一个个小黑匣子,黑匣子一面从输入端口接收外界信息,一面向外界环境中通过输出端口发送信息,每一个黑匣子都能相互连接。无需关心黑匣子内部如何运作,只需关心模块的输入和输出以及模块之间的关联关系。

9月13日
星期五
4分钟

标注预览与标注结果的导入导出

标注数据导入格式导出多边形标注airglass.js最佳实践

使用Airglass.js第一个最佳实践标注了许多多边形标注区域,下一步就是将这些标注数据导出用于下一步工序。以及将标注数据导入继续编辑标注。统一数据导出格式,是实现正确导入导出的关键。

9月12日
星期四
5分钟

Airglass.js最佳实践:优化多边形标注体验

多边形标注颜色canvas编辑多边形区域airglass.js最佳实践

我用airglass.js初步完成了第一个最佳实践:创建和编辑多边形标注区域。做Demo的同时完善Airglass.js。我给渲染器类新增了击中检测实例方法,还增加了链式调用提升开发效率。同时新增多边形Polygon类,它是继矩形圆形后Airglass.js出现的第3个基本形状。接下来是对Demo无止境优化的漫漫长路。

9月11日
星期三
4分钟

Airglass.js最佳实践:标注多边形区域

canvas拖拽多边形canvas标注多边形airglass最佳实践

我打算用Airglass.js重新实现网页版图像区域标注切割工具作为Airglass.js的第一个最佳实践。为此我为Airglass.js新增了Polygon类用来创建多边形。

9月10日
星期二
6分钟

Airglass.js开发笔记:最佳实践的前奏

airglass.js最佳实践Airglass开发笔记

我把Glass的集合称作舞台。理论上每一个舞台中Glass的数量是无上限的。我并不推荐一个舞台上有超过3个Glass。最理想的情况是,顶层Glass用来捕获外部事件与放置可交互元素,下层Glass用来放置数据驱动型的元素。

9月9日
星期一
3分钟

Airglass.js开发笔记:订阅

订阅canvas合成事件airglass的故事

Airglass有层叠玻璃的概念,为此我创建了Glass类,并让Renderer类继承Renderer。Glass类实现了处理原生与非原生的合成事件的订阅与退订功能。每一层渲染器都可以订阅其他任何渲染器发生的事件。最顶层的渲染器用来捕获和发布外部原生事件,就像最上层玻璃能感知光线穿过,层层传递给下层玻璃。

9月8日
星期日
6分钟

Airglass.js开发笔记:监听

canvas虚拟事件委托JS类的继承airglass的故事

Airglass要做的是FUI/HUD风格UI组件库。用户界面自然少不了对界面交互的支持。利用事件委托的方式,canvas将监听到的鼠标和触摸事件派发给canvas中绘制的虚拟元素。我甚至让开发者能够订阅虚拟元素触发的各种定制化事件。从而实现用户操作canvas画布上虚拟UI的可能。

9月7日
星期六
2分钟

图解《自私的基因》

图解自私的基因不朽的双螺旋基因的生存机器

我们从古老的原始汤里来,我们向更古老的时代走去。我们是基因追求长生赖以生存的机器。基因本能的自私行径,塑造一具一具各式各样的演员,粉墨登场。完成生命的延续,尘归尘土归土。活着本身毫无意义可言,活着为了活着。

9月6日
星期五
3分钟

Airglass.js开发笔记:起步

typescript构建类库设计继承类webpack构建类库airglass.js开发笔记

Airglass是我在2017年的夏天想要启动的独立项目——基于Canvas技术开发一款支撑FUI/HUD视觉风格用户界面的基于面向对象思想与方便扩展组件的基础组件库。从本篇开始我会一边开发Airglass.js一边详解开发过程。

9月5日
星期四
11分钟

在Fabricjs创建继承类与应用计算变换矩阵

fabricjs创建继承类fabricjs变换矩阵

Fabricjs提供创建继承类的主要目的是让开发者根据需要在现有类如Rect/Image的基础上自行扩展其父类的功能。矩阵变换在Fabricjs中有重要应用,比如点击位置从相对于canvas的坐标到相对于虚拟元素的矩阵变换,再如多个虚拟元素之间绑定变换关系。

9月1日
星期日
6分钟

ml5js助力前端玩转机器学习

ml5js机器学习ml5js神经网络图像识别

ml5js获取服务器上已经训练好的模型,调用ml5js提供的API即可在Web前端玩转典型机器学习案例,ml5js官方提供的机器学习案例类型有图像、声音和文本三个类别,我将体验过程记录下来。

8月30日
星期五
7分钟

交互式命令快速选择并构建前端项目

交互式命令行交互式CLINode命令行交互式构建前端项目

文接上篇。我通过将项目源代码与构建代码分离的方法,解决了我托管在GitHub上的多个项目因存在构建代码相似和各项目NPM依赖更新频繁且重复的问题。本篇我将进一步在有多个前端项目的开发场景中使用交互式命令行——能够快速选择项目并构建项目。

8月28日
星期三
9分钟

Github项目因NPM依赖包版本低存在安全漏洞

github依赖包隐患npm依赖风险源代码与构建代码分离

下午邮箱收到一连串GitHub推送的警告信息,说因为NPM依赖包版本存在安全漏洞。又由于牵扯项目太多,上次出现这一问题我是挨个项目升级NPM依赖包。于是换了一种解决思路。

8月26日
星期一
4分钟

运动前热身动作合集

热身运动

万物不会也不能骤然启动或戛然而止,这是自然规律也是养生法则。太极拳前后有起势、收势;在生命的两端,孕育和衰竭过程一样少不了,凭空出现凭空消失可还行?物体在外力作用下不会突然加速也不会突然静止;运动前须给身体发出开始信号,运动毕需给身体发出收敛信号,不可立即静止休息。

8月26日
星期一
10分钟

探索Web前端获取音视频流录制视频

html5录视频前端录视频前端获取音视频流

最近整理我的一些独立项目,考虑用音视频的形式记录感想,起初在用Mac系统自带的录屏软件,后来计划能不能用web前端技术开发一款在线录制音视频的工具,小有成果,先用文字形式记录下来。

8月22日
星期四
5分钟

在线图像标注工具

陈帅华开源项目在线图像标注在线多边形套索工具

基于canvas技术在图像上绘制多边形,最终得到包含透明通道的裁切后的base64编码图像,以及全部标注点位置坐标数据。

8月13日
星期二

体验Blender3D建模UV贴图导入Threejs

blender2.8blender uv贴图blender threejs

开源3D制作软件Blender上个月发布2.8版本,用户界面有巨大改变。迫不及待上手新版blender的3D建模与UV贴图。

[项目] 在线音/视频流录制工具
[项目] 在线音/视频流录制工具 (1幅)
[项目] Web Audio模块连接
[项目] Web Audio模块连接 (1幅)
[项目] 在线图像取色/配色工具
[项目] 在线图像取色/配色工具 (1幅)
[项目] 中国传统二十四节气
[项目] 中国传统二十四节气 (3幅)
新版个站博客体验设计
新版个站博客体验设计 (1幅)
[图解]Deno
[图解]Deno (1幅)
[脑图]规划
[脑图]规划 (3幅)
[图解]JavaScript
[图解]JavaScript (2幅)
[图解]Mithril
[图解]Mithril (6幅)
[图解]企业项目管理可视化方案
[图解]企业项目管理可视化方案 (4幅)
旧站shuaihua.cc四季概念
旧站shuaihua.cc四季概念 (4幅)
十二生肖&文章标签对应关系
十二生肖&文章标签对应关系 (3幅)