Raphael.js--基础1

Posted I am 卫辰

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Raphael.js--基础1相关的知识，希望对你有一定的参考价值。

Raphael.js

特点：

　　1.兼容VML和SVG
　　2.扩展功能——动画

用法：

　　//1.创建画布
　　let paper=Raphael(x,y,width,height);

　　//2.创建形状
　　let rect=paper.rect(x,y,width,height);

　　//3.设置属性(样式)
　　rect.attr({fill: \'red\', stroke: \'green\'});

　　//4.事件
　　rect.click(fn);
　　rect.unclick(fn);

参数说明：https://www.cnblogs.com/cxmSuperman/p/10582248.html

例子：

 1 <script>　　　　　　//基础用法
 2 window.onload=function (){
 3 let paper=Raphael(0,0,800,600);
 4 
 5 //图形
 6 let rect=paper.rect(100,100,400,300);
 7 
 8 //属性&样式
 9 rect.attr(\'fill\', \'#CCC\');
10 
11 //事件
12 rect.click(function (){
13 //this.attr(\'fill\', \'red\');
14 //alert(this.attr(\'fill\'));
15 
16 this.attr({fill: \'red\', width: \'200\', height: \'150\'});
17 });
18 };
19 </script>

 

 

1 <script>    //圆角矩形
2     window.onload=function (){
3       let paper=Raphael(0,0,800,600);
4 
5       //图形
6       let rect=paper.rect(100,100,400,300, 10);
7     };
8 </script>

 

 

1     <script>   //椭圆 
2     window.onload=function (){
3       let paper=Raphael(0,0,800,600);
4 
5       //图形
6       let rect=paper.ellipse(400, 300, 250, 150);
7     };
8     </script>

 

 

    <script>    //图片
    window.onload=function (){
      let paper=Raphael(0,0,800,600);

  </span><span style="color: #008000;">//</span><span style="color: #008000;">图形</span>
  let rect=paper.image(\'bd_logo.png\', 50, 50,540,258<span style="color: #000000;">);
};
</span>&lt;/script&gt;</pre>

 

 

    <script>      //path
    window.onload=function (){
      let paper=Raphael(0,0,800,600);

  </span><span style="color: #008000;">//</span><span style="color: #008000;">图形</span>
  let rect=paper.path("M 100 100 L 400 100 400 300 100 300 Z"<span style="color: #000000;">)
};
</span>&lt;/script&gt;</pre>

 

 

    <script>     //事件
    window.onload=function (){
      var paper=Raphael(0,0,800,600);

  </span><span style="color: #008000;">//</span><span style="color: #008000;">图形</span>
  <span style="color: #0000ff;">var</span> path=paper.path("M 100 100 L 400 100 400 300 100 300 Z"<span style="color: #000000;">);
  path.attr(</span>\'fill\', \'yellow\'<span style="color: #000000;">);

  path.hover(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){
    </span><span style="color: #0000ff;">this</span>.attr(\'fill\', \'green\'<span style="color: #000000;">);
  }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){
    </span><span style="color: #0000ff;">this</span>.attr(\'fill\', \'yellow\'<span style="color: #000000;">);
  });

  setTimeout(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){
    path.unhover();
  }, </span>5000<span style="color: #000000;">);
};
</span>&lt;/script&gt;</pre>

 

 

    <script>  //transform
    window.onload=function (){
      var paper=Raphael(0,0,800,600);

  </span><span style="color: #008000;">//</span><span style="color: #008000;">图形</span>
  <span style="color: #0000ff;">var</span> rect=paper.rect(100, 100, 300, 200<span style="color: #000000;">);
  rect.attr(</span>\'fill\', \'yellow\'<span style="color: #000000;">);

  rect.click(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){
    </span><span style="color: #0000ff;">this</span>.attr(\'transform\', \'s2,1 r30\'<span style="color: #000000;">);
  });
};
</span>&lt;/script&gt;</pre>

 

 

<!DOCTYPE html>    //动画
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="raphael.js" charset="utf-8"></script>
    <script>
    window.onload=function (){
      let paper=Raphael(50,50,800,600);
      let types=[\'linear\', \'easeIn\', \'easeOut\', \'easeInOut\', \'backIn\', \'backOut\', \'elastic\', \'bounce\'];
      let oBtn=document.getElementById(\'btn1\');

  </span><span style="color: #008000;">//</span><span style="color: #008000;">图形</span>
  let rects=types.map((type,index)=&gt;<span style="color: #000000;">{
    </span><span style="color: #0000ff;">var</span> rect=paper.rect(0, 60*index, 50, 50<span style="color: #000000;">);
    rect.attr(</span>\'fill\', \'yellow\'<span style="color: #000000;">);

    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> rect;
  });

  </span><span style="color: #008000;">//



      oBtn.onclick=function (){

rects.forEach((rect, index)=>{

rect.animate({\'x\': 600}, 3000, types[index]);

});

};

};

</script>

</head>

<body>

<input type="button" name="" value="走" id="btn1">

</body>

</html>

 

 

    <script>    //   好玩的东西 
    window.onload=function (){
      let paper=Raphael(50,50,800,600);

  let path</span>=paper.path(\'M 100 100 L 400 100 400 300 100 300 Z\'<span style="color: #000000;">);
  path.attr(</span>\'fill\', \'yellow\'<span style="color: #000000;">);

  path.hover(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){
    </span><span style="color: #0000ff;">this</span>.animate({\'path\': \'M 250 100 L 250 100 400 300 100 300 Z\'}, 700, \'bounce\'<span style="color: #000000;">);
  }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){
    </span><span style="color: #0000ff;">this</span>.animate({\'path\': \'M 100 100 L 400 100 400 300 100 300 Z\'}, 700, \'bounce\'<span style="color: #000000;">);
  });
};
</span>&lt;/script&gt;</pre>

 

以上是关于Raphael.js--基础1的主要内容，如果未能解决你的问题，请参考以下文章

raphael.js 使用指南

Raphael JS：如何从 Dom 对象（Element.node）中获取 Raphael 元素？

vue中使用raphael.js实现地图绘制

raphael.js的使用

剪辑矩形区域旋转 raphael.js

raphael.js 与 paper.js