raphaeljs 제한된 동작으로 요소 끌기를 제한하는 방법 (부모 경계 상자 내에서)

Question

이 예인 http://raphaeljs.com/graffle.html을 조정하여 컨테이너 svg 내로 끌기를 제한하려고합니다.

다소 비슷합니다 http://bl.ocks.org/1557377 또는 http://jqueryui.com/demos/draggable/#constrain-movement 기본적으로 드래그하는 동안 경계 상자에서 밖으로 나가는 객체를 제한하고 싶습니다.

여기에 불통 코드 직사각형 경계를 넘어 이동이 종류의 가장자리에 춤 때 함수 (http://jsfiddle.net/f4mFQ/1/)

if(thisBox.x < 0){ 
     ddx = 0; 
    }else if(thisBox.x>width-thisBox.width){ 
     ddx = width-thisBox.width; 
    }else { 
     ddx = this.ox + dx; 
    } 

    if(thisBox.y < 0){ 
     ddy = 0; 
    }else if(thisBox.y>height-thisBox.height){ 
     ddy = height-thisBox.height; 
    }else{ 
     ddy = this.oy + dy; 
    } 

이 부분적으로 작품을 이동 첨가! 원과 타원은 가장자리에 붙어 있습니다.

그래서이 경우 SVG에서 상위 경계 상자 내에서 제한된 움직임 요소의 드래그를 제한하는 방법을

Answer 1

하나의 문제는 당신이 ddx 또는 ddy이 측에 위치하도록 설정하면 그 값을 피드백 할 때 걸이다 타원의 중심점으로 사용하여 측면에 '스냅'합니다.

두 번째로이 계산의 실제 위치가 아닌이 경계 상자의 왼쪽 상단에서 계산을 수행하는 것입니다 (ox + dx). 이것이 혼란의 원인입니다.

이 예쁜 구현하지 않습니다하지만, 코드의 변경을 최소화 이것과 이동 기능을 대체하고 싶었 : 기반으로 우리가 ddx 왼쪽 상단으로 ddy 계산 시작시

move = function (dx, dy) { 
    var width =this.paper.width, 
    height = this.paper.height, 
    thisBox = this.getBBox() 
    //, box = { 
    //  "x"  :thisBox.width, 
    //  "y"  :thisBox.height, 
    //  "x2"  :width-thisBox.width, 
    //  "y2"  :height-thisBox.height, 
    //  "width" :width-thisBox.width, 
    //  "height" :height-thisBox.height 
    // }; 
    // var outOfBound=!Raphael.isBBoxIntersect(thisBox,box) 
    ; 

    console.log(thisBox.width,width,thisBox.x,thisBox 
       ,this.ox); 

    var ddx = this.ox + dx; 
    var ddy = this.oy + dy; 
    if (this.type == 'ellipse') { 
     ddx -= thisBox.width/2; 
     ddy -= thisBox.height/2; 
    } 

    if(ddx < 0){ 
     ddx = 0; 
    }else if(ddx>width-thisBox.width){ 
     ddx = width-thisBox.width; 
    } 

    if(ddy < 0){ 
     ddy = 0; 
    }else if(ddy>height-thisBox.height){ 
     ddy = height-thisBox.height; 
    } 

    var att = this.type == "rect" ? {x: ddx, y: ddy} : {cx: ddx + (thisBox.width/2), cy: ddy + (thisBox.height/2)}; 
    this.attr(att); 


    for (var i = connections.length; i--;) { 
     r.connection(connections[i]); 
    } 
    r.safari(); 
} 

this의 위치에 (타원이면 ox 및 oy이 중심 좌표입니다.)

그렇다면 값을 다시 설정할 때 타원 값을 다시 조정하더라도 이전과 거의 같습니다. 중복 계산을 피하기 위해 저장되는 값/사용 된 값을 변경할 수 있습니다.

저에게 도움이됩니다. fiddle 그 자체로

편집

복사 코드입니다.

Answer 2

안녕하세요

이 코드는 내가 업데이트 한

 if (thisBox.x < 0) { 
      ddx = 0 + thisBox.width/2;//the position 0 was problem 
     } else if (thisBox.x > width - thisBox.width) { 
      ddx = width - thisBox.width; 
     } else { 
      ddx = this.ox +dx; 
     } 

     if (thisBox.y < 0) { 
      ddy = 0+thisBox.height/2;//the position 0 was problem 
     } else if (thisBox.y > height - thisBox.height) { 
      ddy = height - thisBox.height; 
     } else { 
      ddy = this.oy + dy; 
     } 

변경이 완벽하지 않지만 작업 보인다,이 코드로 바이올린을 업데이트 한 나는 약간의 CSS를 업데이트 또한 fiddle

더 명확하고 오류가 없도록하십시오.

업데이트 : 진동,

나는 상단과 왼쪽에 진동을 제거 fiddle2를 업데이트 한

또한 잘 원/타원 작동이 fiddle3을보고 확인하고

을 회신 해 주시기 바랍니다 사각형에 문제가 있습니다. 놓쳐 버렸음에 틀림없는 것이 있다고 생각하지만, 타원으로 잘 작동하므로 도움이됩니다.