Raphael - 직렬화 후 변환

Question

일부 경로를 그릴 때 Raphael을 사용하고 있습니다. 각 패스에는 연결된 상자의 크기와 위치와 연관된 직사각형 [컨테이너]이 있습니다. 두 셰이프를 끌기 위해 컨테이너를 사용하고 있습니다.

이동 콜백에서 두 위치가 모두 함께 이동하도록 두 위치를 업데이트합니다.

이 모든 것은 내가 직렬화 할 때까지 훌륭합니다. 나는 단지 경로를 직렬화하고 deserialization 후 즉시 컨테이너를 생성한다.

json으로 변환 한 직후에는 상황이 정상적으로 보입니다. 경로의 현재 변환을 인쇄 할 수 있으며 올바르게 보입니다. 이 후에 경로에서 변환을 수행하면 경로가 재설정되고 0,0으로 이동합니다.

Here is a fiddle이 문제를 보여줍니다.

rect를 움직이면 두 개체가 함께 움직이는 것을 볼 수 있습니다.

'저장/불러 오기'를 클릭하면 문제가 없으며 경로가 동일하게 인쇄됩니다.

이제 드래그하면 경로가 0,0으로 재설정됩니다. 인쇄는 변환이 0,0에서 재설정되었음을 나타냅니다.

필자는 직렬화 이전과 마찬가지로 경로 이동 방법을 찾으려고합니다. 그 과정에서 잃어버린 것이 있습니까? 또는 업데이트해야하는 내부 상태가 있습니까?

Answer 1

Raphael.JSON은 요소에 저장된 데이터를 일련 화합니다. 종이 객체에 저장된 임시 데이터를 보존하지 않으므로 R.clear()을 호출 할 때 실제로 무언가가 손실됩니다. 예를 들어 요소에 바인드 된 드래그 이벤트는 보존되지 않습니다.

그러나 여기에서 가장 중요한 문제는 드래그 기능입니다. 두 번째로 사각형을 드래그하면 용지의 왼쪽 상단에서 어떻게 변형되는지 알 수 있습니다. 이것을 처리하기 위해 Raphael.FreeTransform (당신은 이미 Fiddle에 포함 시켰습니다)을 사용하는 것이 좋습니다.

나는 Raphael.JSON과 Raphael.FreeTransform 플러그인을 모두 작성해 동일한 문제로 어려움을 겪었습니다. 나는 현재 저장 및 종이의 상태를 복원 할 수있는 응용 프로그램에서 일하고있다. 도움이 필요하시면 언제든지 open an issue on Github으로 도움을주십시오.

Answer 2

드래그가 시작될 때 요소의 초기 변형 오프셋을 캡처하여 드래그 이동 변환의 기초로 사용해야합니다. 다음 고려 : 나는 fiddle located here이를 개최했습니다

var start_x, start_y; 
cont.drag(function(x, y, e) 
    { 
     p.transform('t' + (start_x + x) + ',' + (start_y + y)); 
     cont.transform('t' + (start_x + x) + ',' + (start_y + y)); 
    }, 
    function(x, y) 
    { 
     var start_bbox = p.getBBox(); 
     start_x = start_bbox.x; 
     start_y = start_bbox.y; 
     console.log("Drag start at %s,%s", start_x, start_y); 
    }); 

.

불행히도, 경로가 여전히 문제가 있습니다. 오프셋은 경계 상자 y 값과 드래그가 사용될 때마다 y 축 (정확하게는 12의 차이)의 차이만큼 증가합니다. 그게 정확히 어디에서 왔는지 나는 잘 모르겠습니다.