Question

我正在使用Raphael绘制一些路径。每个路径都有一个关联的矩形[容器]，边界框的大小和位置。我正在使用容器拖动两个形状。

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

这一切都很有效，直到我序列化。我只是序列化路径，然后在反序列化后动态创建容器。

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

显示问题的

Here is a fiddle。

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

如果单击“保存/加载”，事情看起来很好，路径也会打印出来。

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

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

Answer 1

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

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的差值）。我不确定那是从哪里来的。

Answer 2

Raphael.JSON序列化存储在元素中的数据。它不会保存存储在纸质对象中的临时数据，因此在调用R.clear()时，某些内容确实会丢失。例如，不保留绑定到元素的拖动事件。

然而，这里的主要问题是您的拖动功能，请注意如何再次拖动方块从纸张的左上角应用转换。我建议使用Raphael.FreeTransform（你已经包含在小提琴中）来处理这个问题。

我写了Raphael.JSON和Raphael.FreeTransform插件，并且遇到了同样的问题。我目前正在开发一个应用程序，它可以让你保存并恢复纸张的状态（类似于你正在做的事情）并且它工作正常。如果您需要任何帮助，请随时open an issue on Github。

Raphael - 序列化后的转换

2 个答案: