Raphael.js--基础1

时间:2023-03-10 03:01:47
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

例子:

 <script>      //基础用法
window.onload=function (){
let paper=Raphael(0,0,800,600); //图形
let rect=paper.rect(100,100,400,300); //属性&样式
rect.attr('fill', '#CCC'); //事件
rect.click(function (){
//this.attr('fill', 'red');
//alert(this.attr('fill')); this.attr({fill: 'red', width: '200', height: '150'});
});
};
</script>
 <script>    //圆角矩形
window.onload=function (){
let paper=Raphael(0,0,800,600); //图形
let rect=paper.rect(100,100,400,300, 10);
};
8 </script>
     <script>   //椭圆
window.onload=function (){
let paper=Raphael(0,0,800,600); //图形
let rect=paper.ellipse(400, 300, 250, 150);
};
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>