從Raphael的可滾動區域拖動圖像？

Question

我正在調查使用Raphael進行用戶研究項目的可行性。其中一項功能允許用戶將圖像拖放到畫布上，並記錄它們放置的位置。圖像庫可能非常大，我們將把它們放在工具的可滾動框中。

我整理了一個我正在研究的問題的快速線框，因爲它可能比我的解釋更清晰。

請參閱線框：

Answer 1

您可以使用拉斐爾滾動區域。

1. 創建具有固定尺寸 視口（比如800×600）
2. 畫出隨着y值之圖像。在幾張圖像之後，y值將超過600.它將被繪製，但在視口中不可見。
3. 使用raphael rects創建滾動條。將拖動事件附加到滾動條句柄矩形。

4. 當手柄移動時，相應翻譯所有圖像。

   例如，我們假設在步驟2中，您已經繪製了所有圖像，並且最終圖像的最底部的點的值爲2000.假設滾動條的長度爲500，則句柄的每個dx移動都必須翻譯2000/500 = 4dx。您可以使用比率類似地計算句柄長度。

由於單張拉斐爾紙張內的所有內容都可以無縫工作。你將不得不保持每個圖像的位置。

Answer 2

您可能會發現此演示類似 請記住，您可以隨時在放下時使用getBBox。在這種情況下，它rects但圖像是相同的..

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

Answer 3

我會堅持使用直HTML/CSS和使用jQueryUI的拖拽元素，如您在您的評論提及。

你不出現需要任何繪圖/顯示功能SVG的優惠，但如果你去這條路線，你就必須建立自己的自定義滾動行爲（而不是設置CSS溢出-Y規則）和圖片佈局算法（而不是使用CSS浮動或其他）。