强大的svg操作库——Raphael

Posted 2020-10-17 张啊咩

先常规先引入Raphael库：

<script src="raphael.js" type="text/javascript"></script>

然后就很简单了，直接操作，也不用再手动写svg什么的。

1.新建画布

//x,y是画布的定位，w,h是画布的宽高
let paper = Raphael(x,y,w,h);

2.建立图形

// Raphael总共有6种图形画，其中path是万能的
let rect = paper.rect(50,50,200,100);
let circle = paper.circle(400,200,50);
let ellipse = paper.ellipse(750,200,100,80);
let path = paper.path(‘M 250,250 L 250,250 450,400 50,400 Z‘);
let img= paper.image(‘1.jpg‘,550,250,428,252);
let text= paper.text(250,500,‘哈哈哈‘);

3.改变图形属性和样式

//Rapheal有两种改变属性样式的方法attr和animate

//attr和jq的一样，既可以传json又可以传单个
circle.attr(‘fill‘,‘#a00‘);
ellipse.attr({‘fill‘:‘blue‘,‘stroke-width‘:‘10‘});

//animate先传改变的属性样式的json，再传动画时间，再传动画插值方法
//插值方法大概有linear,easeIn,easeOut,bounce,elastic,backIn,backOut
rect.animate({stroke:‘#a33‘,fill:‘green‘,‘stroke-width‘:‘20‘,‘stroke-opacity‘:‘.5‘,width:‘100‘,rx:‘20‘,rt:‘40‘},800,‘bounce‘);

4.图形绑定事件

事件大概有click、hover、mousedown、mousedown、mousemove、mouseup、touchstart、touchmove、touchend。。。。

//和jq绑定事件差不多，例如下面下这个，hover就执行第一个，buhover就执行第二个
path.hover(function(){
     path.animate({path:‘M 450,250 L 450,300 450,600 80,500 Z‘,‘fill‘:‘#fc0‘},800,‘bounce‘);
},function(){
     path.animate({path:‘M 250,250 L 250,250 450,400 50,400 Z‘,‘fill‘:‘#0fc‘},800,‘bounce‘);
})

5.变形

transform是被集成到了attr和animate里面了

img.attr({‘transform‘:‘t50,200 r30 s1.2,1‘})
img.animate({‘transform‘:‘t50,200 r30 s1.2,1‘},800,‘linear‘)

对应变换字母 translate:t———rotate:t———scale:s，变换都是不带单位的（所有svg操作都不应该带单位）,和css3的变换是一样都是自身坐标轴变换，和原生的svg不一样