как можно переместить ребенка только внутри родителя? - PullRequest
0 голосов
/ 04 февраля 2010

Недавно я работал в проекте с использованием Flex. Это проект редактирования фотографий. Я взял Canvas и сделал снимок на этом холсте, используя код canvas.addChild(image). Теперь я могу свободно перемещать изображение с помощью движущегося кода. Изображение перемещается внутри холста и вне холста. Я хочу переместить изображение / ребенка только внутри холста, а не снаружи. Как я могу это сделать?

1 Ответ

1 голос
/ 04 февраля 2010

Есть два способа сделать это:

  • Ограничивающий прямоугольник
  • Прямоугольник прокрутки (или маска)

Предполагая, что ваш "движущийся код" похож на обработчик Event.ENTER_FRAME, инициализированный в onClick, вы хотите сделать так, чтобы изображение не могло выходить за пределы родительского Canvas.

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

Чтобы создать ограничивающий прямоугольник, вам нужно написать довольно подробный метод, но идея этого проста. Просто возьмите ограничивающий прямоугольник с холста и не позволяйте image.x опуститься ниже 0 и не позволяйте image.x + image.width выйти за пределы canvas.width. То же самое с высотой. Вот пример Image Cropper в Flex источник ). Проверьте, как они сделали это для деталей.

Во втором случае (прямоугольник прокрутки) вы можете создать больше контейнера, подобного панорамированию / масштабированию, как вы видите на этой карте Flex Pan / Zoom (здесь источник ) , Кроме того, большое изображение в Flex Image Cropper справа является примером этого второго случая, но у них нет перетаскивания. Это требует, чтобы вы манипулировали положением свойства scrollRect на холсте. Свойство scrollRect является flash.geom.Rectangle, определяющим «область просмотра» Canvas. Затем вы изменяете / обновляете свойства verticalScrollPosition и horizontalScrollPosition, чтобы они были обратными (по сравнению с ограничивающим прямоугольником).

Я думаю, что если вы установите для clipAndEnableScrolling значение true на холсте и перетащите дочернее изображение вокруг него (и image.includeInLayout = true), оно должно обрезать изображение, чтобы оно отображалось только внутри холста. Но я предполагаю, что вам нужен случай 1. Просто найдите эти свойства, и вы найдете несколько хороших примеров в Google.

Удачи, должен быть веселый проект.

Lance

...