1

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

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

在我序列化之前，这一切都很好。我只是序列化路径，然后在反序列化后动态创建容器。

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

这是一个显示问题 的小提琴。

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

如果单击“保存/加载”，一切看起来都很好，并且路径打印相同。

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

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

4

2 回答 2

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

我已经在位于此处的小提琴中上演了这个。

不幸的是，路径仍然存在问题 - 每次使用拖动时，它的偏移量都会增加它的边界框 y 值和 y 轴之间的差异（准确地说是 12 的差异）。我不确定这到底是从哪里来的。

于 2012-06-26T19:55:48.750 回答
1

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

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

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

于 2012-06-30T00:40:23.107 回答