查看标注

查看标注

标注页区域划分
标注页区域划分

标注选择

在设计图上点击元素,即可出现测量的数据,右侧面板会同时显示具体的属性信息

多选图层

Shitf 选中多个元素图层,会展示出元素的总尺寸和高度间距

显示所有图层(框架视图)

给设计图全部元素增加边框,通过边框展示设计图框架,方便快速理解布局。

临时开启的快捷键 A

百分比查看间距

将间距尺寸转换为百分比模式 Alt

显示组件父级

选中子级,显示父级组件的名称

快捷复制文本

  • 设计图里单选、多选 Shitf 文本图层, Ctrl+C即可添加到剪切板,粘贴即可使用。
  • 选中文本图层的父级 Ctrl+C,也支持文本内容到剪切板。

右键菜单

在设计图右键菜单里提供了一些功能:

  • 100% 0 :缩放到原图尺寸
  • 自适应 1 :根据浏览器视口大小,展示设计图全貌
  • 起始位置2 :从浏览器视口左上角展示设计图,从设计图的顶端开始。

标注参数

多样式文本

对于多样式文本兼容,分别显示不同的文本属性

切换颜色格式

每个填充属性旁边,都可以切换为其他格式。

格式更换会同步影响代码里的颜色显示。

切换开发平台

不用调整设计图完成多平台兼容;显示当前开发平台,和设计图的尺寸显示。

  • 像素:显示在设计软件中的原始尺寸(与上传时选中「设计倍数」无关)
  • 像素 × 2 :以「像素」选项的 2 倍显示
  • 自定义 :自行指定设计图的最终宽度,会自动计算比例(只要指定最终需要的宽度,不管设计图是按什么比例设计的)
  • 小程序 rpx
  • 网页自适应布局的 vw、vh

样式代码

切换代码类型

代码显示部分可以手动切换为其他类型

小数点位数设置

根据不同的开发平台和需求,可以手动修改小数点保留的位数。

标注设置

鼠标滚轮的操作

  • 滚动优先:查看设计图的时候,鼠标滚动是自上而下浏览
  • 缩放优先:鼠标向上滚动放大设计图,向下滚动缩小设计图,适合频繁缩放时使用

图层穿透

  • 需要的图层选不到,开启设置,会穿透一个层级选中下面的图层