• raphael.js 使用指南


     RaphaelJS是一个用JavaScript实现的强大的矢量图形库。

        (1)使用前准备,下载RaphaelJS,到官网下载。

        (2)在相应的HTML页面引入RaphaelJS,如下示例代码:

    <!DOCTYPE html>
    <html>
    <head>
        <title>RaphaelJS Demo</title>
    </head>
    <body>
        <div id="paperDiv" style=" 140px; padding:0px; margin:0px"></div>
        <script src="raphael-min.js"></script>
    </body>
    </html>

    (3)在通过元素创建一个对象

    var elm = document.getElementById("paperDiv");
    var paper = Raphael(elm, 560, 400);

     或者,直接将元素的id传到Raphael中,如:

    var paper = Raphael("paperDiv", 650, 400);

     (4)画圆circle()

    //var cir = paper.circle(x, y, r);
    //x和y为坐标,r为圆的半径
    var cir = paper.circle(35, 25, 20);

    (5)为形状设置属性attr()

    /*
      语法如下:
      element.attr({
        "property1": value1,
        "property2": value2
      })
    */

     如画一个有填充颜色的圆:

    var coloredCircle = paper.circle(35, 25, 20).attr({
        "fill": "#17A9C6",
        "stroke": "#2A6570",
        "stroke-width": 2
    });

    (6)画矩形rect()

    //语法:
    //paper.rect(x, y, width, height, border-radius[optional]);
    //常规矩形
    var rect = paper.rect(20, 20, 170, 100);
     
    //圆角矩形
    var roundedRect = paper.rect(20, 20, 170, 100, 20);

    (7)画椭圆形ellipse()

    //语法:
    //paper.ellipse(x, y, rx, ry);
    var ellipse = paper.ellipse(195, 125, 170, 100);

       (8)画路径path()

    var tri = paper.path("M0,0L26,0L13,18L0.0");

    常用命令及解释

    (9)处理文本text()

    //语法:
    //paper.text(x, y, "text");

    (10)处理变形transform()

    常用命令及解释

  • 相关阅读:
    JS判断年月
    斐波那契数列
    webkit 控件供vb 6 调用,不错~
    webkit com wrapper 推荐!
    firefox usercontrol for donet
    [z] How can we render CSS3 in a WebBrowser Control ?
    A simple way to crack VBA password in Excel file
    putty教程
    Putty建立隧道的方法[z]
    Step By Step Hibernate Tutorial Using eclipse WTP[z]
  • 原文地址:https://www.cnblogs.com/hss-blog/p/9802185.html
Copyright © 2020-2023  润新知