游客

标题:让 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(
[<<][[1]][2][3][>>]

查看评论(0)
发表评论



首页