zoukankan      html  css  js  c++  java
  • 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()

    常用命令及解释

  • 相关阅读:
    ASP.NET Web API模型验证以及异常处理方式
    Javascript基础恶补
    求一个集合的集合下所有集合元素求值
    C#创建唯一的订单号, 考虑时间因素
    git的几十个基本面
    报错:ASP.NET Web API中找不到与请求匹配的HTTP资源
    使用RAML描述API文档信息的一些用法整理
    Postman测试Web API
    Javascript中的Prototype到底是啥
    AngularJS和DataModel
  • 原文地址:https://www.cnblogs.com/hss-blog/p/9802185.html
Copyright © 2011-2022 走看看