首页
AI Coding
数据标注
NEW
沸点
课程
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
从零实现2D绘图引擎
irises
创建于2025-12-03
订阅专栏
本专栏将从零实现一个mini版本的ZRender,ZRender是Echarts的绘图核心。
等 2 人订阅
共8篇文章
创建于2025-12-03
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
从零实现2D绘图引擎:6.动画系统的实现
动画系统 (Animation System)。 这是让静态图表变成“活”图表的关键。我们的目标不是写死 requestAnimationFrame,而是构建一个声明式的动画库。
从零实现2D绘图引擎:5.5.简单图表demo
我们将利用目前 MiniRender 已经具备的图形能力(Rect, Text)、层级管理(Group, z-index) 和 交互能力(Hover, Click),构建一个经典的柱状图
从零实现2D绘图引擎:5.鼠标悬停事件
我们开始 悬停事件 (Hover Events) 的实现。 这是交互体验中质的飞跃。目前的点击是“瞬间”的,而悬停是“连续”的状态管理。
从零实现2D绘图引擎:4.矩形与文本的实现
矩形 (Rect):这是所有 UI 组件(按钮、卡片、背景)的基础。 文本 (Text):这是信息展示的核心。 相较于圆,文本的难点在于“包围盒计算”(为了支持点击检测)
从零实现2D绘图引擎:3.交互系统(Handle)的实现
要实现交互,我们需要解决三个层面的问题: 数学层:矩阵求逆(为了把鼠标点转换到图形内部坐标系)。 基类层:事件订阅机制(On/Off)和包含判断接口(Contain)。 控制层:监听 DOM 事件并分
从零实现2D绘图引擎:2.Storage和Painter的实现
仓库 (Storage) 与 渲染器 (Painter) 的实现。 这一步的目标是把“手动挡”变成“自动挡”。
从零实现2D绘图引擎:1.实现数学工具库与基础图形类
数学工具与基础图形类是整个引擎的基石。在这里我们将会完成矩阵运算模块以及能够绘制各种变换后的圆图案。
从零实现2D绘图引擎:0.整体结构设计与实现规划
为了从零实现一个精简版 MiniRender,我们需要先跳出具体的代码细节,从架构设计和类型定义入手