2011-02-11 2 views
1

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

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

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

enter image description here

ответ

0

Вы можете создать прокручивать область с помощью Рафаэля.

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

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

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

+0

Спасибо TigrisC. Я не думал о внедрении собственных полос прокрутки, но я следую тому, что вы описываете. Я предполагаю, что мне нужно решить, стоит ли это направление усилий по сравнению с более реалистичной реализацией javascript jQueryUI. – jasonlong

0

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

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

+0

Получил ваш ответ. Каждый из ящиков и изображений «знает», где они находятся и каковы их размеры 2. Я не против помогать, поэтому дайте нам крик, у вас есть письмо. Также было бы разрешено/возможно использовать php на стороне сервера? Возможно, вам необходимо загрузить эти изображения? – Chasbeen

1

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

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

Смежные вопросы