使用raphael.pan-zoom.js库,如何重置我的可拖动函数

时间:2017-03-23 05:17:59

标签: javascript svg raphael

我做了一个draggalbe函数,它运行良好,但是当我使用raphael.pan-zoom.js库放大\缩小时,我的可拖动函数不同步地移动对象,以下是我的可拖动函数:

(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);
        event.stopPropagation();
    };   
    this._ui.onStart = R.is(start, 'function') ? start : function(x, y) {
        event.stopPropagation();
    };   
    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();
        event.stopPropagation();
    };   
    function onStart(x, y) {
        that._ui.lastX = x;
        that._ui.lastY = y;
        that._ui.onStart(x, y);
        event.stopPropagation();
    };   
    return this.drag(onMove, onStart, up);
};

})(圣拉斐尔);

我该如何解决?

1 个答案:

答案 0 :(得分:0)

我知道该怎么做

(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);
            event.stopPropagation();
        };   
        this._ui.onStart = R.is(start, 'function') ? start : function(x, y) {
            //event.stopPropagation();
        };   
        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;
            //console.log("before deltaX:"+deltaX+" deltaY:"+deltaY);
            // 根据raphael.pan-zoom.js 提供的zoom值 计算当前 缩放比例下的 移动值
            deltaX=deltaX*(1-that.paper.zoom.currZoom/10);
            deltaY=deltaY*(1-that.paper.zoom.currZoom/10);

            console.log("after deltaX:"+deltaX+" deltaY:"+deltaY);
            that._ui.onMove(distanceX, distanceY, x, y, deltaX, deltaY);
            //that.paper.safari();
            event.stopPropagation();
        };   
        function onStart(x, y) {
            that._ui.lastX = x;
            that._ui.lastY = y;
            that._ui.onStart(x, y);
            event.stopPropagation();
        };   
        return this.drag(onMove, onStart, up);
    }})(Raphael);