RaphaelJS：当图像超出框架时停止拖动答案

【问题标题】：RaphaelJS : Stop drag when image out of frameRaphaelJS：当图像超出框架时停止拖动
【发布时间】：2015-12-10 16:42:06
【问题描述】：

我有一篇 RaphaelJS 论文，其中有一组包含图像和其他元素的集合。图像比纸张大，用户可以拖动它。但是我希望拖动停止，以便图像边框永远不可见，这意味着用户不会看到白色边距。我已经尝试了几种方法，但我一直得到奇怪的结果，我无法绕过它。我可以通过计算得到图像的左上角和图像的剩余角。感谢您的宝贵时间。

更新：我添加了一个 JSFiddle example

在示例中，我添加了一个条件，应该将左上角的短号保持在画布之外，但正如您所见，这存在很多故障和错误。

here is an image illustrating the desired result

代码：

Raphael.st.draggable = function(index) {
    var me = this,
            lx = 0,
            ly = 0,
            ox = 0,
            oy = 0,
            moveFnc = function(dx, dy) {
                x = set.getBBox().x;
                y = set.getBBox().y;
                console.log(x+":"+y);
                lx = dx + ox;
                ly = dy + oy;
                if(x+dx < 0 && y+dy < 0)//REMOVE THIS CONDITION FOR FREE DRAG
                    me.transform(',,320,240,'+'t' + lx + ',' + ly);

        },
        startFnc = function() {},
        endFnc = function() {
            ox = lx;
            oy = ly;
        };
    this.drag(moveFnc, startFnc, endFnc);
    };
width = 640;
height = 480;
paper = Raphael(cur_id, width, height),

image = paper.image('http://edwardtufte.com.s3.amazonaws.com/Thinking%20Eye/ParisMap.gif', 0, 0,950,805)
set = paper.set();
set.push(image);
paper.canvas.style.backgroundColor = "#FF0000"
set.draggable();

【问题讨论】：

我会尝试在 jsfiddle 上获得一个示例
@Ethan，图片怎么可能比纸还大？并且小提琴有一些错误，请检查。
JSFiddle 导入脚本出现问题。我已经手动添加了脚本，示例现在可以工作了，你会明白我的意思是图片大小比纸张大。 jsfiddle.net/8pzcawoy/53

标签： javascript svg raphael

【解决方案1】：

如果我正确理解您正在寻找的内容，那么您似乎只是缺少 moveFnc 拖动事件中的限制部分。

这样的东西代替你的 lx 和 ly 分配应该限制图像只能滚动到边缘：

           if (dx + ox <= 0){
                if (dx + ox > width - image.attrs.width){
                    lx = dx + ox;
                }
                else{
                    lx = width - image.attrs.width;
                }
            }
            if (dy + oy <= 0){
                if (dy + oy > height - image.attrs.height){
                    ly = dy + oy;
                }
                else{
                    ly = height - image.attrs.height;
                }
            }

正向平移将允许图像向左和向下拖动。如果我们将平移限制为负值，它将在左边缘和上边缘停止。对于右边缘和下边缘，我们将负平移限制为大于纸张宽度减去图像宽度的值。

【讨论】：