从拉斐尔的可滚动区域拖动图像？

Question

我正在调查使用Raphael进行用户研究项目的可行性。其中一个功能允许用户将图像拖到画布上，然后记录它们放置的位置。图像池可能非常大，我们将它们放在工具的可滚动框中。

我整理了一个我正在研究的问题的快速线框，因为它可能比我的解释更清晰。

请参阅线框：

Answer 1

我坚持使用直接的HTML / CSS并使用jQueryUI draggables，正如您在评论中提到的那样。

你不出现需要SVG提供的任何绘图/显示功能，但如果你走这条路线，你必须建立自己的自定义滚动行为（而不是设置一个CSS overflow-y规则）和图片布局算法（再次使用CSS浮动或其他东西）。

Answer 2

您可以使用Raphael创建可滚动区域。

1. 创建固定的视口 尺寸（比如800x600）
2. 使用增加的y值绘制图像。在少量图像之后，y值将超过600.它将被绘制但在视口中不可见。
3. 使用raphael rects创建滚动条。将拖动事件附加到滚动条手柄rect。

4. 移动手柄时，相应地翻译所有图像。

   例如假设在步骤2中，您已经绘制了所有图像，并且最终图像的最底部点具有y值2000.假设滚动条具有长度500，则句柄的每个dx移动将必须转换2000/500 = 4dx。您可以使用比率类似地计算手柄长度。

由于单张Raphael纸张中的所有内容，拖动图像都可以无缝地工作。您必须保持每张图像的位置。

Answer 3

您可能会发现此演示类似 请记住，丢弃时总是可以使用getBBox。在这种情况下它是rects但是图像将是相同的..

http://irunmywebsite.com/raphael/additionalhelp.php?q=bearbones