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 条评论
登录 后参与评论

相关文章

来自专栏吴小龙同學

Android App Shortcuts

简介 Android 7.1允许您定义应用程序中特定操作的快捷方式。这些快捷键可以显示桌面,例如Nexus和Pixel设备。快捷键可让您的用户在应用程序中快速启...

3367
来自专栏何俊林

基于 SurfaceView 的直播点亮心形效果

本文来自zyyoona7,zyyoona7的blog链接为:http://www.jianshu.com/p/6d2cc30e4687。本文主要是直播界面中点赞...

3117
来自专栏我的博客

左右滚动,带控制按钮

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

2766
来自专栏专知

关关的刷题日记87 – Leetcode 171. Excel Sheet Column Number

关关的刷题日记87 – Leetcode 171. Excel Sheet Column Number 题目 Related to question Excel...

3618
来自专栏菩提树下的杨过

Metaball(元球)效果学习

几年前就在网上曾看见过这种效果,但一直不知道叫什么名字 ? 前一阵无意在9ria(天地会)论坛上看到了一篇专门讲这个的文章:AS3 元球(Metaball),不...

19410
来自专栏Android中高级开发

深入分析Android动画(二)

上回书说到Android动画的分类以及基本使用,这会书主要说Android属性动画的原理,对于View动画的原理本篇不做深入分析。对于Android动画的基础请...

732
来自专栏一“技”之长

iOS使用UIImagePickerController调用系统相机、相册与图库

        UIImagePickerController是系统封装好的一个导航视图控制器,使用其开发者可以十分方便的进行相机相册相关功能的调用。UIIma...

471
来自专栏CRPER折腾记

Vue 折腾记 - (5) 写一个不大靠谱的selectSearch组件

这个功能在网站中也很常见;下拉选择带搜索 基于之前的typeahead组件的基础上完善, 把过滤计算放在了computed ,其他逻辑也有所优化,代码更好理解

841
来自专栏彭湖湾的编程世界

【react】关于react框架使用的一些细节要点的思考

( _(:3 」∠)_给云友们提个建议,无论是API文档还是书籍,一定要多看几遍!特别是隔一段时间后,会有意想不到的收获的) 这篇文章主要是写关于学习react...

1918
来自专栏老司机的简书

CoreText实现图文混排

也好久没来写博客了,主要是最近也工作了,手头的事有点多,一时间也就断了,闲下来了我就来补博客了,刚好最近也做了很多东西,放在这里也算给自己做个笔记吧。

712

扫码关注云+社区