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 - 序列化后转换

回答

相关问题