美文网首页SketchSketch UI设计UI设计
巧用Sketch描边绘制饼图

巧用Sketch描边绘制饼图

作者: 夜雨y | 来源:发表于2018-08-23 08:22 被阅读73次

    在Sketch中绘制饼图有很多种方法,包括布尔运算、环形渐变和插件等,见早前的文章《最快30秒,几招用Sketch绘制饼图的方法》,今天,我们再来学习一种新的绘制饼图的方法:描边法。

    1.Sketch描边介绍

    除文本图层外,Sketch的所有图层都可以包含任意数量的边框(即描边),而且支持设置描边的颜色、位置、厚度和混合模式。

    另外,点击边框右边的设置按钮,可以看到更多的自定义设置选项,包括边框路径的起点和终点、箭头的形式以及虚线设置。

    这里的虚线设置有4个可输入数字的,用于配置虚线的文本框,这里怎么理解呢?举个例子,如果是水平的一条直线,在文本框中分别输入5-4-3-2,则该水平线将绘制5px的点距,4px的间隙,然后是3px的点距,2px的间隙,然后重复。

    2.巧用描边绘制饼图

    理解描边的属性和大致配置后,我们就可以利用描边的特点绘制饼图了,首先使用椭圆工具拉出一个圆形,取消填充,并设置描边位置为“Inside”。

    然后,我们可以设置边框的厚度“Thickness”,厚度值越大,边框就越大,我们可以发现随着厚度值的增加,圆形逐渐变成了圆环图,最后变成了实心圆。

    在实际使用中,饼图通常由几个部分组成,或者用不完全闭合的环形表示占比,这意味着我们需要开放路径的饼图,这时,我们可以使用边框的虚线设置来绘制不完全闭合的环形。先在第二个文本框(间歇)中输入1000,然后在第一个文本框中输入数字即可调节圆环的比例。


    推荐阅读:

    最新版:Sketch51正式版更新解读:更多箭头端点样式选择

    实用手册:Sketch中文手册(2018)

    好书推荐:新书《Sketch交互设计之美:从零基础到完整项目实现》上架

    相关文章

      网友评论

      • 囧小明:我记得也可以用圆周率做?
      • 滔滔涛艺坊:大家好,我是一名设计师。
        打搅一下,推荐一款我们下班时间做的SKETCH 换肤及主题管理软件

        目前支持(3+1)套主题选择,一键切换;多种图标库、让你sketch与众不同;个性图层选择、图层嵌套缩进展现、自定义画布明暗度等......
        功能免费,下载地址:
        百度网盘:https://pan.baidu.com/s/1-nK4MgOzkZBiCPH8-tb5Zg
        腾讯微云:https://share.weiyun.com/5eMyI1T
        人工索取:283227998@qq.com

        请各位设计大牛、各位同学支持一下~

        谢谢~~

      本文标题:巧用Sketch描边绘制饼图

      本文链接:https://www.haomeiwen.com/subject/lxmyiftx.html