Raphael - 序列化後轉換

我正在使用Raphael繪製一些路徑。每個路徑都有一個關聯的矩形[容器]邊界框的大小和位置。我正在使用容器拖動這兩個形狀。Raphael - 序列化後轉換

在移動回調中，我更新了兩個位置，以便它們一起移動。

這一切都很好，直到我序列化。我只是序列化該路徑，然後在反序列化後即時創建容器。

立即轉換爲json並返回後，事情看起來很好。我可以打印出路徑的當前變換，看起來是正確的。在路徑被重置並移動到0,0之後，在路徑上進行任何變換。

Here is a fiddle顯示問題。

如果您移動矩形，您可以看到兩個物體一起移動。

如果點擊「保存/加載」，事情看起來很好，路徑打印相同。

如果現在拖動，路徑將重置爲0,0。打印顯示變換已從0,0重置。

我想了解如何使路徑像序列化之前一樣移動。在這個過程中有什麼東西迷失了嗎？或者是否有需要更新的內部狀態？

來源

2012-06-26 AdamC

Raphael.JSON將存儲在元素中的數據序列化。它不保存存儲在紙張對象中的臨時數據，因此在調用R.clear()時，確實會丟失某些內容。例如，綁定到元素的拖動事件不會被保留。

但是，這裏的主要問題是您的拖曳功能，請注意第二次拖拽方塊是如何應用紙張左上方的轉換。我建議使用Raphael.FreeTransform（你已經包含在小提琴中）來處理這個問題。

我寫了Raphael.JSON和Raphael.FreeTransform插件，並一直在努力解決相同的問題。我目前正在開發一款應用程序，可以讓您保存並恢復紙張的狀態（類似於您正在做的），並且工作正常。如果您需要任何幫助，請隨時撥打open an issue on Github。

來源

2012-06-30 00:40:23

您好，埃爾伯特，你可以給出更多的細節，如何從JSON調用後恢復freetransform對象。謝謝 –

你見過這個嗎？ https://github.com/ElbertF/Raphael.JSON#rapha%C3%ABljson-and-rapha%C3%ABlfreetransform –

當拖動開始時，您需要捕獲元素的初始變換偏移量，並將這些偏移量用作拖動移動變換的基礎。考慮以下幾點：

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); 
    });

我已經在fiddle located here上演了這個。

不幸的是，路徑還存在一個問題 - 每次使用拖動時，偏移量都會因其邊界框y值與y軸之間的差值（精確地說是12）而遞增。我不確定那是從哪裏來的。

來源

2012-06-26 19:55:48

Raphael - 序列化後轉換

回答

相關問題