设计师测量文本行距
2016-06-23 11:30
197 查看
转载请注明出处,谢谢!http://blog.csdn.net/fwt336/article/details/51741862
由于设计师在标注段落行距时,测量出来的行距不标准,或者说不精确,为什么呢?因为他们只能顶着上下两行文字进行行距的测量,所以量出来就不准了。你又或许会说,那就让他上下空出几个像素来测量不就准确了吗?但是,具体又该空出多少像素呢?老板的要求是“最多1个像素的误差,或者根本就不能有误差”,我要撞死了去!所以就只能自己写demo来研究研究了。
当我们在学习java语言时,有学习过使用canvas来绘制text的经验,所以先来讲讲text字符的绘制方式。
让我们来看看字符在绘制到画布上时的位置:
top:浅灰色
ascent:绿色
descent:黄色
bottom:瑰红
这4条线到底是什么?
top :The maximum distance above the baseline for the tallest glyph in the font
at a given text size.
ascent :The recommended distance above the baseline for singled spaced text.
descent :The recommended distance below the baseline for singled spaced text.
bottom :The maximum distance below the baseline for the lowest glyph in the
font at a given text size.
其实看完我也不知道是啥意思,但是绘制字符的这些基础线是都有的。
ascent - top 的高度就是我们需要的顶部的间距;
bottom - baseline 就是我们需要的底部的间距;
由于这两个间距的存在,直接导致了我们的设计师在标注行距的时候容易导致标注不精准的问题。
在来个图:
那么具体这个ascent和descent值的变化有什么规律呢?
只能自己写demo了。
demo在此。
上结果:
最后采用的方法是,设置好几个段落的间距值,让设计师来选择哪种间距即可。
上图:
另外,附上ios行距测量办法:http://www.jianshu.com/p/50b3d434cbc0
如有更好的办法,欢迎留言。谢谢!
由于设计师在标注段落行距时,测量出来的行距不标准,或者说不精确,为什么呢?因为他们只能顶着上下两行文字进行行距的测量,所以量出来就不准了。你又或许会说,那就让他上下空出几个像素来测量不就准确了吗?但是,具体又该空出多少像素呢?老板的要求是“最多1个像素的误差,或者根本就不能有误差”,我要撞死了去!所以就只能自己写demo来研究研究了。
当我们在学习java语言时,有学习过使用canvas来绘制text的经验,所以先来讲讲text字符的绘制方式。
让我们来看看字符在绘制到画布上时的位置:
top:浅灰色
ascent:绿色
descent:黄色
bottom:瑰红
这4条线到底是什么?
top :The maximum distance above the baseline for the tallest glyph in the font
at a given text size.
ascent :The recommended distance above the baseline for singled spaced text.
descent :The recommended distance below the baseline for singled spaced text.
bottom :The maximum distance below the baseline for the lowest glyph in the
font at a given text size.
其实看完我也不知道是啥意思,但是绘制字符的这些基础线是都有的。
ascent - top 的高度就是我们需要的顶部的间距;
bottom - baseline 就是我们需要的底部的间距;
由于这两个间距的存在,直接导致了我们的设计师在标注行距的时候容易导致标注不精准的问题。
在来个图:
那么具体这个ascent和descent值的变化有什么规律呢?
只能自己写demo了。
demo在此。
上结果:
最后采用的方法是,设置好几个段落的间距值,让设计师来选择哪种间距即可。
上图:
另外,附上ios行距测量办法:http://www.jianshu.com/p/50b3d434cbc0
如有更好的办法,欢迎留言。谢谢!
相关文章推荐
- Linux系统下如何使用SSD固态硬盘
- Linux虚拟地址空间布局
- Problem-C
- 【ImageView】android中src和background区别
- 开发者所需要知道的 iOS 10 SDK 新特性
- 【10】矩形覆盖
- Java Web基础
- Arduino SIM900 AT+CGATT=1 出错
- [leetcode] 347. Top K Frequent Elements
- JAVA Hibernate工作原理及为什么要用
- IMAP常用命令汇总
- 编写测试用例
- VS2010 学习版序列号
- Android自定义View绘制彩色圆弧
- 15.5节练习
- mysql-connector-odbc-5.3.6 安装 错误 Error 1918
- Android上从相册选择后剪裁图片
- Result Maps collection does not contain value for frontpreviewprofitManage.cdata
- zabbix手机报警,zabbix短信报警
- Ubuntu免sudo使用Docker