• 使用SVG Path绘图


    最近一个项目,需要做个Web版本的设计器,用来进行工厂流水线布局的设计。

    项目中采用了SVG.JS来做,但是以前流水线是采用单纯的画线的方式实现。客户提出希望用不同的底纹表示不同的流水线,经过一番调查,最终决定采用Path,用pattern的方式来填充底纹。

    但是文档中对pattern的使用描述的比较含糊,通过一些实验,终于弄的比较清楚了。总结一下:

    1、path中的X、Y参数是指以整个画面的左上角为(0,0),来设置偏移的。如果设为0,就是从(0,0)进行填充。如果在(20,20)为起点的地方,画一个RECT的PATH,里面用pattern填充30,30大小的方块。那么在这个RECT的左上角,会出现填充了10,10的一个方块,其他的部分在这个RECT之外。

    2、pattern中的width、height,分别是用来设置平铺时元素的x、y轴的间隔距离的。但是要注意,这个值包含了填充形状本身的大小。同上,要想内部的填充方块的上下间距都是10。则要设置width、height分别为40(方块本身为30,30)。

    3、patternTransform,用来设置填充形状的翻转角度。例如设想在一个RECT中填充一些小方块作为底纹。但RECT旋转45°时,这些小方块还是保持水平描画,就会看起来很奇怪。那么就需要用到这个参数了。设置后,填充形状也会进行对应的翻转。使用patternTransform="rotate(45)"这样的方式来指定翻转角度。

    用图来说明更清楚些,但截图太麻烦,直接上代码,自己改着试试就知道了。

    <?xml version="1.0"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
    <pattern id="notes" x="20" y="20" width="50" height="25" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
    <rect width="20" height="20" style="fill:rgb(0,0,255);stroke-1;stroke:rgb(0,0,0)"/>
    </pattern>
    <path stroke="lightgrey" stroke-linecap="round" stroke-width="1" d="M0 0 L250 0 L250 250 L0 250 Z" />
    <path style="fill:url(#notes)" stroke="lightgrey" stroke-linecap="round" stroke-width="1" d="M20 20 L200 20 L200 150 L20 150 Z" />
    </svg>

    另外,由于是要动态画图,所以采用了DOM的方式操纵。

    具体来说,就是要先创建相应的SVG对象:

    var path = document.createElementNS("http://www.w3.org/2000/svg", "path");

    然后设置相应的属性:

    path.setAttribute("fill", "notes");

  • 相关阅读:
    10分钟教你用VS2017将代码上传到GitHub
    【算法】C++用链表实现一个箱子排序附源代码详解
    【智能算法】粒子群算法(Particle Swarm Optimization)超详细解析+入门代码实例讲解
    【C/C++】10分钟教你用C++写一个贪吃蛇附带AI功能(附源代码详解和下载)
    【python】10分钟教你用python如何正确把妹
    【python】10分钟教你用python一行代码搞点大新闻
    【python】10分钟教你用python下载和拼接微信好友头像图片
    3. powerdesigner 生成mysql脚本,要求字段、表名有注释
    5. 回填表格复选框
    14. js字符串截取substring用法
  • 原文地址:https://www.cnblogs.com/dancetime/p/3835579.html
Copyright © 2020-2023  润新知