RaphaelJS: Остановить перетаскивание, когда изображение из кадра

Question

У меня есть бумага RaphaelJS, в которой есть набор, содержащий изображение и другие элементы. Изображение больше, чем бумага, и пользователь может перетащить его. Однако я хочу, чтобы перетаскивание остановилось, чтобы граница изображения никогда не была видна, что означает, что пользователь не будет иметь белые поля. Я пробовал несколько способов, но я все время получаю странные результаты, и я наклоняю голову вокруг него. Я могу получить верхний левый угол изображения и остальные углы изображения с расчетом. Спасибо за ваше время.

UPDATE: я добавил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(); 

Answer 1

Если я понимаю, что вы ищете правильно, это выглядит, как вы только не хватает предельную роль в вашем случае сопротивления moveFnc.

Нечто подобное в месте вашего лк и 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; 
       } 
      } 

Положительный перевод позволит изображение перетащить влево и вниз. Если мы ограничиваем перевод отрицательными значениями, он останавливается в левом и верхнем краях. Для правого и нижнего краев мы ограничиваем отрицательный перевод величинами, большими ширины бумаги, за вычетом ширины изображения.