Перетаскивание изображений из прокручиваемого региона в Рафаэле?

Question

Я изучаю возможность использования Рафаэля для проекта исследования пользователей.Одна из функций позволяет пользователям перетаскивать изображения на холст, и мы записываем, где они его разместили.Пул изображений потенциально довольно большой, и мы будем иметь их в прокручиваемом блоке в инструменте.

Я собрал краткое описание проблемы, с которой я столкнулся, поскольку она, вероятно, будет яснее, чеммое объяснение.

Пожалуйста, смотрите каркас:

Answer 1

Я бы придерживался простого HTML / CSS и использовал бы перетаскиваемые jQueryUI, как вы упоминаете в своем комментарии.

Вам не нужно появляться , чтобы нуждаться в каких-либо функциях рисования / отображения, которые предлагает SVG, однако, если вы пошли по этому пути, вам пришлось бы создать свой собственный режим прокрутки (вместоустановка правила CSS-переполнения-y) и алгоритмы компоновки изображения (опять же вместо использования CSS-плавающих объектов или чего-то подобного).

Answer 2

Вы можете найти эту демоверсию похожей. Помните, что вы всегда можете использовать getBBox, когда бросаете.В этом случае это rects, но изображения будут такими же ..

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

Answer 3

Вы можете создать область с прокруткой, используя Raphael.

1. Создать область просмотра с фиксированными размерами (скажем, 800x600)
2. Нарисуйте изображения с возрастающим значением y.После нескольких изображений значение y превысит 600. Оно будет отображено, но не будет отображаться в области просмотра.
3. Создайте полосу прокрутки, используя рефералы Рафаэля.Прикрепите события перетаскивания к прямоугольнику ручки полосы прокрутки.

4. Когда ручка перемещена, переведите все изображения соответственно.

   Например, предположим, что на шаге 2 вы нарисовали все изображения, а самая нижняя точка конечного изображения имеет значение y 2000. Предполагая, что полоса прокрутки имеет длину 500, каждое движение ручки dx будет иметьперевести 2000/500 = 4dx.Вы можете рассчитать длину маркера аналогичным образом, используя соотношения.

Поскольку все внутри одной бумаги Рафаэля, перетаскивание изображений будет работать без проблем.Вы должны будете поддерживать позиции каждого изображения.