Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

Esther-Guo
Copy link

布局边框

功能背景

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

实现效果

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

实现原理简述

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

  • 首先获取当前文档中所有元素的位置和大小,计算它们对应的边框位置
  • 考虑页面滚动,监听页面滚动事件,持续更新边框的绘制信息
  • 在蒙层上绘制边框

@Esther-Guo Esther-Guo changed the title DoKit&北大开源实践】-【DoKit For Web】- 布局边框 【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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant