Skip to content

【DoKit&北大开源实践】-【DoKit For Web】- 布局边框 - #1048

Open
Esther-Guo wants to merge 1 commit into
didi:masterfrom
Esther-Guo:master
Open

【DoKit&北大开源实践】-【DoKit For Web】- 布局边框#1048
Esther-Guo wants to merge 1 commit into
didi:masterfrom
Esther-Guo:master

Conversation

@Esther-Guo

Copy link
Copy Markdown

布局边框

功能背景

为界面中的所有元素添加边框,方便开发者了解元素的布局和尺寸。

实现效果

插件归属于“视觉功能”下
image
点击“取消边框“将插件移除,点击”刷新边框“可以为动态增加的元素添加边框。
image

实现原理简述

为了不修改页面元素本身,采取在蒙层上绘制边框的方式。

  • 首先获取当前文档中所有元素的位置和大小,计算它们对应的边框位置
  • 考虑页面滚动,监听页面滚动事件,持续更新边框的绘制信息
  • 在蒙层上绘制边框
@Esther-Guo Esther-Guo changed the title DoKit&北大开源实践】-【DoKit For Web】- 布局边框 Jun 23, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant