zoukankan      html  css  js  c++  java
  • javascript绘图类库raphael.js学习

    相关网站

    官网:http://raphaeljs.com/

    中文参考:http://dishuostec.sinaapp.com/javascript/raphael/

    raphael是什么?

    raphael是一个在网页中绘制矢量图的javascript库,可以应用raphael在网页中轻松绘制各种图形。

    raphael使用svg w3c推荐标准和VML作为基础创建图形,这意味着创建的一个图形对象也是一个DOM 对象,可以像操作DOM对象一样操作raphael创建的图形对象。

    支持各种流行的浏览器:firefox3.0+,safari3.0+,chrome5.0+,opera9.5+,ie6.0+。

    raphael怎样使用?

    <html>

    <head>

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

    <script>

    var paper = Raphael(10, 50, 800, 600);//在(10,50)坐标位置创建大小为800*600像素的画布

    var circle = paper.circle(100, 100, 50);//在画布的(100,100)位置画50px半径的圆

    circle.attr("fill", "#f00");//圆填充红色

    circle.attr("stroke", "#fff");//圆边为白色

    </script>

    </head>

    <body>

    </body>

    </html>

    自定义图形实现拖动实例

    Raphael.fn.mygraph = function() {

      var curve = this.path("M10,20L70,80");

      var mask = this.rect(10, 20, 60, 60);

      mask.curve = curve;

      mask.drag(_move, _start, _end);

      return mask;

    }

    function _start() {

      this.lastDX = 0;

      this.lastDY = 0;

      this.animate({"fill-opacity": .2}, 100);

    }

    function _move(dx, dy) {

      var deltaX = dx - this.lastDX;

      var deltaY = dy - this.lastDY;

      this.lastDX = dx;

      this.lastDY = dy;

      this.translate(deltaX / this.matrix.a, deltaY / this.matrix.d);

      this.curve.translate(deltaX / this.matrix.a, deltaY / this.matrix.d);

    }

    function _end() {

      this.animate({"fill-opacity": 0}, 200);

    }

  • 相关阅读:
    redis 中 发布订阅 的 数据类型
    excelExport.js 导出 excel 表格
    Go 出现:err is shadowed during return(err在返回过程中被隐藏)
    Go 服务端 向 firebase Android 端 fcm 信息
    Python全栈day 03
    Python全栈day 01
    开发流程与版本管理规范
    php 魔术常量
    sql 消除重复
    重置mysql密码
  • 原文地址:https://www.cnblogs.com/feilv/p/4065140.html
Copyright © 2011-2022 走看看