美文网首页
初识Raphael.js---强大的矢量图形库

初识Raphael.js---强大的矢量图形库

作者: _信仰zmh | 来源:发表于2017-11-14 13:59 被阅读0次

    首先,我和你一样很迷茫这个库,不知道它是用来干嘛的。

    只记得任务来了,顺便给了一本全英文的电子书,关于这个库的所有文档都写的清清楚楚,网站上关于它的中文文档也是少之又少,就一边看文档,一边上网上搜一下官方文档的示例,这样会比丛头看到尾好很多。

    因为即使你从头开始,把这个全英文的文档看一遍,脑子里依旧是一片浆糊,真正开始去做的时候,又无从下手,倒不如带着开发任务去看文档,需要用到什么就去翻文档,这样就事半功倍。

    1. 先来大致了解下RaphaelJS库是用来干嘛的?

    Raphael 是一个用于在网页中绘制矢量图形的Javascript 库。

    它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作。

    2. 它目前支持的浏览器有?

    Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

    3. RaphaelJS 入门的一个简单示例:

    这里简单写个画圆的示例:

    • 创建一个画布,作为我们画图的容器,参数指定坐标x,y 以及画布的宽高;
    • 类似与canvas,调用circle方法,指定圆心坐标,圆半径;
    • 填充图形、描边。
    // 在坐标(10,50)创建宽320,高200的画布
    var paper = Raphael(10, 50, 300, 200);
     
    // 在坐标(x = 50, y = 40)绘制半径为 10 的圆
    var circle = paper.circle(50, 40, 10);
     
    // 给绘制的圆圈填充红色 
    circle.attr("fill", "red");
     
    // 设置画笔(stroke)的颜色为白色
    circle.attr("stroke", "#fff");
    
    
    
    image

    这样就在页面上展示了一个圆形。

    官网更多demo示例:

    image

    4.更多可以查看文档

    相关文章

      网友评论

          本文标题:初识Raphael.js---强大的矢量图形库

          本文链接:https://www.haomeiwen.com/subject/hgbcvxtx.html