一筐星光

前端开发

一个纯粹的，没有脱离低级趣味的人。

获得徽章 22

赞

317

|

搜索文章

手把手教你实现拖拽新增替换元素

背景最近产品提了个需求，要实现往画布拖拽图片、svg，在同类组件上松开鼠标时进行替换操作，反之进行新增。最终效果如下：功能分析要实现本功能，可以简单拆解成以下几点：要拖拽元素区域绑定鼠标事件

1年前
615
8
9

手把手教你实现拖拽新增替换元素

一文读懂 UnoCSS：手牵手入门教程

〔1〕背景公司准备对之前的一个非前后端分离项目进行UI的全面改版，借此机会直接使用vue3对项目进行全面改造。但是页面非常之多，光是写样式想想就头疼。于是就在探寻一些可以简化样式开发的方案。

1年前
6.5k
66
16

一文读懂 UnoCSS：手牵手入门教程

canvas插值优化笔触连贯性

一、背景前段时间根据业务需要，通过canvas实现一个图片擦除、修复的功能。具体效果如下图：左侧修复和擦除的效果，主要使用canvas的arc函数不断绘制圆形来进行清除和绘制。二、绘制时的问题

2年前
249
1
评论

canvas插值优化笔触连贯性

可视化编辑器之多元素组合功能解析

何为组合，我的理解为使多个独立的个体形成一个统一的整体，就好像 ‘草帽海贼团’ 就是由路飞和多名船员一起组成的。为何需要组合通常在可视化编辑器中，编辑区域会存在许多元素。当我们想对多个元素进行统一

2年前
1.2k
10
1

一个由合成层(composite layer)引发的神奇bug

背景公司开发的产品会产出类似于婚礼纪的h5电子请柬，h5有很多页，每一页都有许多css动画。从前一阵开始，陆陆续续有用户反馈页面上会出现未知线条。如下图：红框标记处就是出现的未知黑色线条，线条

2年前
1.5k
5
4

一个由合成层(composite layer)引发的神奇bug

可视化编辑器之元素拖拽位置、大小、旋转解析

一、元素拖拽元素拖拽相对比较简单，主要就是通过监听元素的mousedown和mousemove事件，在拖拽过程中不断设置元素的left和top实现位移。鼠标在拖动元素的时候，无非就是上、下、左、

2年前
2.0k
15
10

可视化编辑器之元素拖拽位置、大小、旋转解析

可视化编辑器之辅助线生成、自动吸附原理解析

背景本文分析要点辅助线生成逻辑辅助线显示优化辅助线吸附逻辑效果展示一.辅助线生成原理首先我们要知道，辅助线就是为了方便对齐某个元素而生成的参考线，看上图通常我们会对一个元素的左、中、

2年前
6.3k
152
18

vue配置命令区分构建环境

背景公司某项目分测试环境和正式环境，git有三个分支dev:开发分支、preview:测试分支、master:正式分支，测试环境构建出来的的静态资源要放到当前服务器也就是测试服务器，而正式环境构建

3年前
251
点赞
评论

构建全屏web应用

构建全屏web应用全屏UI设计通过消除一些无效干扰来提高用户对内容的专注度. 因此, 在当下的一些web应用中，出现了越来越多的全屏化UI设计。因此，在本文中我们将讨论JavaScript的全屏A

3年前
481
点赞
评论

React Native 实(tū)战(toú)手记

因公司需要采用RN开发App，故在一场新的秃头之旅中，总结了些许知识点整理分享一下，希望有能帮到大家的地方。运行以上命令并在命令行确认后，网页会弹出一个要求登陆的页面，登陆后，会得到一串Access code，复制粘贴回命令行，成功的话会返回登陆账号。将已添加的app部署热…

4年前
1.0k
3
5

个人成就

文章被点赞 260

文章被阅读 20,164

掘力值 1,062

加入于

2017-10-30