腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
前端西瓜哥的前端文章
专栏成员
举报
141
文章
99222
阅读量
26
订阅数
订阅专栏
申请加入专栏
全部文章（141）
网站（36）
编辑器（35）
开发（29）
渲染（24）
编程算法（24）
算法（24）
前端（23）
react（21）
工具（17）
对象（14）
数据（14）
javascript（11）
github（9）
开源（9）
数组（9）
css（8）
git（8）
http（8）
设计（8）
node.js（7）
typescript（7）
网络安全（7）
https（7）
json（6）
缓存（6）
同步（6）
字符串（6）
函数（5）
事件（5）
vue.js（4）
html（4）
ide（4）
api（4）
命令行工具（4）
容器（4）
安全（4）
数据结构（4）
point（4）
transform（4）
遍历（4）
基础（4）
客户端（4）
浏览器（4）
索引（4）
拖拽（4）
打包（3）
eslint（3）
es（3）
height（3）
math（3）
tree（3）
width（3）
变量（3）
快捷键（3）
配置（3）
c++（2）
android（2）
sql（2）
svg（2）
面向对象编程（2）
npm（2）
tcp/ip（2）
markdown（2）
canvas（2）
腾讯云开发者社区（2）
autocad（2）
hex（2）
编译（2）
产品设计（2）
服务器（2）
管理（2）
架构（2）
可视化（2）
入门（2）
优化（2）
原理（2）
源码（2）
mac os（1）
java（1）
python（1）
.net（1）
ajax（1）
opengl（1）
数据库（1）
云数据库 SQL Server（1）
unix（1）
容器镜像服务（1）
文件存储（1）
访问管理（1）
腾讯云测试服务（1）
express（1）
koa（1）
存储（1）
游戏（1）
shell（1）
dns（1）
推荐系统（1）
单元测试（1）
udp（1）
微信（1）
webgl（1）
任务调度（1）
base64（1）
center（1）
count（1）
hierarchy（1）
jetbrains（1）
mutable（1）
path（1）
polygon（1）
return（1）
scale（1）
selection（1）
vite（1）
编码（1）
布局（1）
测试（1）
插件（1）
动画（1）
二进制（1）
服务端（1）
工作（1）
集合（1）
计算机图形学（1）
镜像（1）
连接（1）
模型（1）
内存（1）
排序（1）
软件（1）
数据类型（1）
数学（1）
调试（1）
通信（1）
图形学（1）
系统（1）
效率（1）
性能（1）
序列化（1）
重构（1）
搜索文章
搜索
搜索
关闭
浏览器没有鼠标连击事件，那我们自己造
浏览器
前端
事件
数组
编辑器
如果当前处于没有选中图形的状态，对于最顶层的组，对它们的直接子图形数组从上往下遍历，找出命中 hitTest 的图形，将其设置为选中状态。
前端西瓜哥
2024-06-27
64
0
Figma 的编组功能，比你想象的要复杂得多
渲染
编辑器
对象
开发
数组
最近做个人的开源编辑器项目，实现了和 Figma 一样的编组功能，期间踩了不少坑，和大家分享一下。
前端西瓜哥
2024-06-17
63
0
在两条直线相交处添加圆角，算法该如何实现？
渲染
point
return
前端
算法
然后基于圆心作两条直线的垂足得到两个点，这两个点就是圆弧起点和终点，然后确定方向就可以了。
前端西瓜哥
2024-06-17
73
0
你知道吗？圆弧有3种表达方式
渲染
math
函数
前端
调试
所以我们在原来圆形的圆心、半径参数的基础上，加上极坐标弧度表示的起点和终点，就能表达一段圆弧。
前端西瓜哥
2024-06-03
84
0
简简单单实现画笔工具，轻松绘制丝滑曲线
工具
浏览器
事件
算法
拖拽
首先是监听按下鼠标，我们记录好此时鼠标的位置，作为路径的起点，并记录此时是 “拖拽状态”。
前端西瓜哥
2024-06-03
91
0
平面几何：判断点是否在多边形内（射线法）
遍历
变量
前端
算法
原理
之前我们讲解了如何利用叉乘 判断点是否在凸多边形内。但该算法限制较大，多边形必须为凸多变形。
前端西瓜哥
2024-05-22
147
0
图形编辑器开发：网格与网格吸附
编辑器
开发
配置
前端
渲染
考虑到性能，我们 只绘制视口范围内的网格线。其他超出的部分不同绘制出来。因为是重复图案（可以视作两条线组成的 L 形的平铺），可以考虑用纹理平铺渲染以提高性能。
前端西瓜哥
2024-05-15
147
0
平面几何：判断点是否在凸多边形内
polygon
遍历
前端
数组
算法
在之前的 求两向量的夹角的文章 中我提到过，对于两个向量，我们可以利用叉积的符合右手定则，判断两个向量的位置关系。
前端西瓜哥
2024-05-15
78
0
图形编辑器开发：基于 transfrom 对多个图形进行缩放
height
transform
width
编辑器
开发
上篇文章我们讲解如何基于 transform 缩放但个矩形，实现了 resizeRect 方法。
前端西瓜哥
2024-05-07
94
0
图形编辑器开发：基于 transfrom 的图形缩放
开发
height
transform
width
编辑器
上一篇文章我们讲了为什么以及如何用 transform、width 和 height 表达图形。
前端西瓜哥
2024-04-28
125
0
图形编辑器开发：为什么我选择用 transform 矩阵表达图形的变形？
编辑器
基础
开发
算法
transform
改用 transform 表达图形的变形，并废弃掉了原来的 rotation、x、y 属性。
前端西瓜哥
2024-04-28
107
0
图形编辑器开发：钢笔工具的实现
工具
开发
渲染
path
编辑器
像是 SVG 的 Path 的元素，单段的线有直线、圆弧、椭圆弧、二阶贝塞尔曲线、三阶段贝塞尔曲线等。
前端西瓜哥
2024-04-19
72
0
关于包围盒，你需要知道的那些事
编辑器
开发
前端
算法
渲染
实际上包围形状的图形某些情况下会使用多边形（凸包、凹包）或是圆形或是其他，不仅限于矩形的更泛用的叫法应该是 “包围体”（bounding volume）。
前端西瓜哥
2024-04-03
176
0
个人开源图形编辑器 Suika 的 2024 年二季度开发计划
编辑器
工具
算法
重构
开源
一开始功能很简陋，但我一有时间就往上面加功能，不断思考写代码要怎么写才能更优雅，更容易维护，不断地推敲一些算法和交互，一行行用代码实现和重构，最终变成了这么一个 相对来说功能较为丰富的图形编辑器 了。
前端西瓜哥
2024-04-03
104
0
CRDT 协同编辑：如何确定操作时序？
客户端
同步
系统
对象
服务器
CRDT 协同编辑中，我们经常会使用 Last-Writer-Win 的策略解决冲突。即对于多个冲突的操作，哪个操作是最后修改的，就应用哪个操作。
前端西瓜哥
2024-04-03
110
0
平面几何：求内接或外切于圆的正多边形
point
前端
算法
center
count
思路是，让起点基于圆心旋转 PI * 2 / count 度数的倍数，执行 count - 1 次，拿到所有的点。
前端西瓜哥
2024-04-03
96
0
平面几何：求向量 a 到向量 b扫过的夹角
math
可视化
前端
算法
图形学
今天我们来学习如何求向量 a 到向量 b扫过的弧度，或者也可以说是角度，转换一下就好了。
前端西瓜哥
2024-03-22
109
0
CRDT 协同编辑：修改树的节点层级 Mutable Tree Hierarchy
同步
hierarchy
mutable
tree
算法
本文来讲讲一个 CRDT 协同算法：修改树节点层级的操作后，保持多人协作时的数据最终一致，且不会出现环。
前端西瓜哥
2024-03-12
140
0
平面几何算法：求点到直线和圆的最近点
算法
动画
可视化
前端
数学
比如精细的图形拾取（尤其是一些没有填充只有描边的图形）。如果光标点到最近点的距离小于某个阈值，计算图形就算被选中。
前端西瓜哥
2024-03-04
182
0
Figma 的画布缩放功能说明
快捷键
前端
设计
数组
函数
画布缩放是图形编辑器的基础功能，作用是放大图形编辑细节，缩小总览全局。我们来看看 Figma 是如何做画布缩放设计的。
前端西瓜哥
2024-02-23
1.1K
0
点击加载更多
社区活动
AI代码助手快速上手训练营
鹅厂大牛带你玩转AI智能结对编程
立即学习
Python精品学习库
代码在线跑，知识轻松学
立即查看
博客搬家 | 分享价值百万资源包
自行/邀约他人一键搬运博客，速成社区影响力并领取好礼
立即体验
技术创作特训营·精选知识专栏
往期视频·千货材料·成员作品 最新动态
立即查看
领券
问题归档
专栏文章
快讯文章归档
关键词归档
开发者手册归档
开发者手册 Section 归档