Svg 序列化后的Raphael变换

我用拉斐尔画了一些路径。每个路径都有一个关联的矩形[container]，表示边界框的大小和位置。我正在使用容器来拖动这两个形状

在移动回调中，我更新了两个位置，使它们一起移动

在我序列化之前，这些都非常有效。我只是序列化路径，然后在反序列化之后动态创建容器

转换为json并返回后，事情看起来很好。我可以打印出路径的当前变换，它看起来是正确的。在此之后对路径执行任何变换都会导致路径重置并移动到0,0

这说明了问题所在

如果移动矩形，可以看到两个对象一起移动

如果单击“保存/加载”，情况看起来很好，路径也会打印相同的内容

如果现在拖动，路径将重置为0,0。打印显示变换已从0,0重置

---

我试图找出如何使路径像序列化之前那样移动。在这个过程中有什么东西丢失了吗？或者是否存在需要更新的内部状态？

您需要在拖动开始时捕获元素的初始变换偏移量，并将其用作拖动移动变换的基础。考虑以下事项：

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）而增加。我不确定这到底是从哪里来的。

Raphael.JSON将存储在元素中的数据序列化。它不会保留存储在纸张对象中的临时数据，因此在调用

R.clear（）

时，某些内容确实会丢失。例如，绑定到元素的拖动事件不会被保留

不过，这里的主要问题是拖动功能，请注意，第二次拖动正方形如何应用从纸张左上角开始的变换。我建议使用Raphael.FreeTransform（已经包含在小提琴中）来处理这个问题

---

我编写了Raphael.JSON和Raphael.FreeTransform插件，并且一直在为同样的问题而挣扎。我目前正在开发一个应用程序，它可以让您保存和恢复纸张的状态（与您正在做的类似），并且运行良好。如果你需要任何帮助，尽管来

您好，Elbert，您能否提供有关调用fromJSON后如何恢复freetransform对象的更多详细信息。谢谢你看到这个了吗？