Raphael

最新推荐文章于 2015-03-31 10:08:52 发布

wawa129

最新推荐文章于 2015-03-31 10:08:52 发布

阅读量87

点赞数

分类专栏： Raphael 文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/wawa129/article/details/84612385

版权

Raphael 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、路径简介

Paper.path(pathString)：绘制路径；

参数含义：

pathString：描述路径的字符串；

下面详细描述一下路径字符串的内容和书写风格。

路径由2部分组成：命令和坐标。

（1）命令：单个大（小）写字母。大写字母表示绝对坐标，小写字母表示相对坐标；

（2）坐标：一个或多个数字。多个数字之间使用逗号或者空格隔开；

（3）命令和坐标之间可以有空格，也可以省略空格；

移动坐标 M(m)moveto(x y)+

结束路径 Z(z)closepath(none)

直线 L(l)lineto(x y)+

水平直线 H(h)horizontal linetox+

竖直直线 V(v)vertical linetoy+

3次贝塞尔曲线 C(c)curveto(x1 y1 x2 y2 x y)+

平滑3次贝塞尔曲线 S(s)smooth curveto(x2 y2 x y)+

2次贝塞尔曲线 Q(q)quadratic Bézier curveto(x1 y1 x y)+

平滑2次贝塞尔曲线 T(t)smooth quadratic Bézier curveto(x y)+

椭圆曲线 A(a)elliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

绘制光滑的2次、3次贝塞尔曲线需要注意：

（1）后一段曲线的起点必须是前一段曲线的终点；

（2）前后2段曲线必须对称；

关于贝赛尔曲线的知识，可以参考下面的文章：canvas中的贝赛尔曲线。

2、绘图实例

下面让我们看看代码的书写：

     Js代码   
     
   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head>  
    <script type="text/javascript" src="js/raphael.js"></script>  
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>  
  
    <style type="text/css">  
        .wraper {  
            position: relative;  
            float: left;  
            width: 400px;  
            height: 400px;  
            margin-left: 10px;  
            margin-top: 10px;  
            border: 1px solid orange;  
        }  
    </style>  
    <script type="text/javascript">  
        $(document).ready(function(){  
            var raphael = new Raphael('raphael_1',400,400);  
  
            //绘制路径(三角形)  
            raphael.path('M 160,100 L270,130 L200,170 z');  
            //绘制路径(T型)  
            raphael.path('M 50,190 H80 V220 H110 V250 H20 V220 H50 z');  
  
        });  
          
    </script>  
  </head>   
    
  <body>  
      
    <div id="raphael_1" class="wraper"></div>  
  
  </body>  
</html>  

实现的效果：

wawa129

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Raphael

1、路径简介 Paper.path(pathString)：绘制路径；参数含义： pathString：描述路径的字符串；下面详细描述一下路径字符串的内容和书写风格。路径由2部分组成：命令和坐标。（1）命令：单个大（小）写字母。大写字母表示绝对坐标，小写字母表示相对坐标；（2）坐标：一个或多个数字。多个数字之间使用逗号或者空格隔开；（3）命令和坐标之间可...
复制链接

扫一扫