Raphael JS（一）

Ck_Null

于 2017-08-04 13:34:51 发布

阅读量397

点赞数

分类专栏： jQuery，Raphael JS 文章标签： javascript 矢量图 html

本文链接：https://blog.csdn.net/qq_38594215/article/details/76680487

版权

jQuery，Raphael JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Raphael JS是一个轻量级和超性感的JavaScript框架，

可以让您在浏览器中绘制矢量图形！

官网下载 - - http://dmitrybaranovskiy.github.io/raphael/

1. HTML格式

<html>
      <head>
          <title>Raphael Play</title>
          <script type="text/javascript" src="path/to/raphael.js"></script>
          <style type="text/css">
                #canvas_container {
                                   width: 500px;
                                   border: 1px solid #aaa;
                                 }
          </style>
     </head>
         <body>
             <div id="canvas_container"></div>
     </body>
</html>

2. 创建想要的图形

-- canvas_container div中创建一个500px×500px的画布：

window.onload = function() {    //Raphael JS 可以直接获取到id
         var paper = new Raphael('canvas_container', 500, 500);
}

1.--创建一个圆形 在paper画布中 x轴为100，Y轴为100的地方绘制一个半径为80的圆

var circle = paper.circle(100, 100, 80);

2.--创建一个矩形 在paper画布中 x轴为200，Y轴为200的地方绘制一个高和宽都为200的矩形

var rectangle = paper.rect(200, 200, 200,200);

3.--创建一个椭圆 在paper画布中x轴为400，Y轴为400绘制一个横向半径100，竖向半径50的椭圆

var ellipse = paper.ellipse(400, 400, 100, 50);

4.--自定义一个图形 
  --'M'意味着我们要移动没有绘图，后跟x和y坐标。使用小写'L'命令'l'相对于这一点画一条线。这将在y方向上画一条线上50px。
  --'z'命令表示路径关闭 - 它将从我们到达我们的初始'M'命令指定的点加入一条线
  -- 我们可以通过这样来画出自己想要的图形
  --效果如下

之前的

3. 给创建的图形加上样式

--通过attr() 来给添加的图形或字体添加样式

tetronimo.attr({fill: '#9cf', stroke: '#ddd', 'stroke-width': 5});

–添加样式以后效果如下

添加样式以后

--我们可以通过下列的参数类给不同的图形添加样式

    stroke -- 边框颜色    
    fill   -- 内容颜色      
    fill-opacity  -- 内容透明度
    stroke-width  -- 边框宽度...
    stroke-opacity    -- 边框透明度  
    stroke-miterlimit -- 斜接长度 5 绘制线条
    stroke-linejoinstring   -- bevel-创建斜角。 round-创建圆角。miter-默认。创建尖角。
    stroke-linecap    -- 定义不同类型的开放路径的终结 butt-尖角 square-默认 round-圆角
    stroke-dasharray  -- 用于创建虚线  
    src -- 图像URL 
    font-weight -- 字体加粗
    font-size   -- 字体大小
    font-family -- 不同字体
    cursor  -- pointer-小手 crosshair-十字线 ...
    height  -- 高度
    width   -- 宽度
    clip-rect -- 剪裁 逗号或空格分隔值：x，y，width和height
    cx -- 椭圆横轴的半径
    cy -- 椭圆纵轴的半径
    r  -- 矩形圆角的半径
    rx -- 圆心相对于原点(0,0) 的坐标；
    ry -- 圆心相对于原点(0,0) 的坐标；
    x  -- 矩形相对于原点(0,0)的坐标
    y  -- 矩形相对于原点(0,0)的坐标
    text -- 文本
    text-anchor -- 用于对齐
    taiget -- 打开新窗口
    title -- 提示文本

4. 创建文本

--创建文本 在paper画布中x轴为150，Y轴为150的位置绘制 Hello，酷狗 的文本

var t=paper1.text(150,150,"Hello，酷狗");

5. 对象变换

--Raphael 对象变换有四个命令：  
        t – translate  
        r – rotate  
        s – scale  
        m – matrix 

//对象水平方向平移100--垂直方向平移100-- 旋转45度--水平方向往负方向平移100--缩小图形到原来的一半

 rect.transform("t100,100r45t-100,0s.5");

6. 动画animate（）

--和css3的动画一样，比如给创建的对象hover的时候添加动画效果

circle.animate({"fill": "pink", "stroke-width": 8,},2000,function(){})

Raphael.js 还可以给对象绑定事件，比如单击、双击、拖动、鼠标移入、鼠标移出等。除此以外还提供了很多方法供我们使用

7. 举例–hover

 var circle = paper.circle(100, 100, 80);
         circle.attr({
            "stroke": "red",        //颜色
            "stroke-width": 4,      //边框宽度
            "fill": "blue"          //内容颜色
        });

     circle.hover(function(){
             circle.animate({"fill": "pink",},1000)
    },function(){
            circle.animate({"fill": "blue",},1000)          
    })