Raphael path 拖动实现

让 Raphael 的 Path 动起来

Raphaël 是一个很实用的线上矢量图操作 Javascript 库。使用简单,一个值得一提的卖点是通过抽象出共同的接口屏蔽了 SVG 和 VML 之间的差异,做到了对主流浏览器的支持,包括很不给力的 IE6。(很可惜,并不支持手机 UC 浏览器)

Raphael 对于交互事件也有一定的支持,比如常用的鼠标的拖放操作(Drag and Drop)。在官方网站上也有拖放操作的例子。可惜的是,官方的这个例子的写法只对 Circle,Rect 等有效,但对于 Path 却不起作用。经过一番实践,终于了解了 Raphaël 对于拖放支持的原理,想出了一个通用的拖放操作的写法,支持所有的 Raphael 矢量对象,包括 path。

官方例子之所以不能让 Path 动起来是因为:Path 没有象 Circle 里面的 cx 和 cy 属性,要移动 Path,只能使用 Path.translate() 方法。还有一点要注意的是,Path 必须要先 fill 才能移动。

仿照官方的例子,下面是一个 Path 移动的代码示例:

var R = Raphael("paper", 400, 300);
var p = R.path('M0 0L100 0L50 80Z');
 
p.attr({"fill":"green", 'opacity':0.8});
 
var start = function (x, y) {
  this.attr({opacity: 1});
  this.lastX = x;
  this.lastY = y;
},
move = function (dx, dy, x, y) {
  var deltaX = x - this.lastX;
  var deltaY = y - this.lastY;
  this.translate(deltaX, deltaY);
  this.lastX = x;
  this.lastY = y;
},
up = function () {
  this.attr({opacity: 0.8});
}; 
 
p.drag(move, start, up);

运行效果如下

上面的例子有几点要说明一下

  • 回调函数 move 的第一个和第二个参数永远是鼠标所在的点距移动初始时的鼠标位置的相对位移值。而不是距离上次 move 回调时鼠标位置的相对位移值
  • 我们在 start 和 move 中记录并不断更新相对上次鼠标位置的相对位移值,并保存在 this.lastX 和 this.lastY 中
  • 我们通过 this.translate() 进行实际的移动操作
  • 在一开始,要设置 fill 属性,否则就不能进行移动操作

这个例子不但能工作,更好的是,因为所有的 Raphael 矢量对象都有 translate 方法。所以,它不仅对 path 有效,也对所有的 Raphael 矢量对象有效。那么,是不是能做出来类似 jQuery.ui 里面的 draggble 的函数呢。下面就是一个简单的扩展,为 Raphael 对象加入了 draggable 方法。

(function(R) {
    R.el.draggable = function(move, start, up) {
        this._ui = this._ui || {};
 
        var that = this;
 
        this._ui.onMove = R.is(move, 'function') ?
        move : function(distanceX, distanceY, x, y, deltaX, deltaY) {
            that.translate(deltaX, deltaY);
        };
 
        this._ui.onStart = R.is(start, 'function') ? start : function(x, y) {
        };
 
        function onMove(distanceX, distanceY, x, y) {
            var deltaX = x - that._ui.lastX;
            var deltaY = y - that._ui.lastY;
            that._ui.lastX = x;
            that._ui.lastY = y;
            that._ui.onMove(distanceX, distanceY, x, y, deltaX, deltaY);
            that.paper.safari();
        };
 
        function onStart(x, y) {
            that._ui.lastX = x;
            that._ui.lastY = y;
            that._ui.onStart(x, y);
        };
 
        return this.drag(onMove, onStart, up);
    };
})(Raphael);

上面的一段代码,扩展了 Raphael 对象的方法,让它们拥有了类似 jquery.ui 里 draggable 的能力。下面是用利用这个扩展重新写的拖放 Path 的例子。

var R = Raphael("paper", 400, 300);
R.rect(0, 0, 400, 300);
 
var p = R.path('M0 0L100 0L50 80Z');
 
p.attr({"fill":"green", 'opacity':0.5});
p.draggable();

可以看到,像 jquery.ui 提供的功能一样,只需要简单的调用 .draggable() 就可以让对象被鼠标拖拽

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏君赏技术博客

HQ移动20170317期周报

删除缓存:rm ~/Library/Caches/CocoaPods/search_index.json

1043
来自专栏跟着阿笨一起玩NET

Winfrom 如何安全简单的跨线程更新控件

来源:http://www.cnblogs.com/rainbowzc/archive/2010/09/29/1838788.html

641
来自专栏xingoo, 一个梦想做发明家的程序员

【插件开发】—— 9 编辑器代码分块着色-高亮显示!

前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知 5 SWT简单控件的使用与布局搭...

2596
来自专栏大内老A

ASP.NET MVC的Razor引擎:RazorView

Razor引擎具有两个核心的类型,一个是表示View本身的类型RazorView,另一个则是获取和创建它的RazorViewEngine,我们将用两篇文章对它们...

2167
来自专栏跟着阿笨一起玩NET

你可能不需要 jQuery!使用原生 JavaScript 进行开发

  很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery。因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery...

601
来自专栏闻道于事

Java实现word文档在线预览,读取office(word,excel,ppt)文件

3.5K6
来自专栏GIS讲堂

excel中提取中文拼音

概述:在工作时,有时候会用到汉语拼音,本文讲述如何在Excel中通过vba程序提取汉字的拼音。

1103
来自专栏JAVA高级架构

【原创】自己动手写一个服务网关

3432
来自专栏GIS讲堂

OL2中测量工具的扩展

861
来自专栏我的博客

左右滚动,带控制按钮

今天需要一个左右滚动图的js,从网上着了半天,修改调试了半天才弄好,于是就收藏了。不过以后真得看看js了 关键代码有注释:(红色部分是我加的注释) <table...

3476

扫码关注云+社区