Делать изображение, нарисованное на холсте, перетаскиваемым / изменяемым размером? - PullRequest
Новая
       20

Делать изображение, нарисованное на холсте, перетаскиваемым / изменяемым размером?

2 голосов
/ 16 декабря 2011

Я сделал это JSFiddle, чтобы вам было легче объяснить.

http://jsfiddle.net/eAV6w/30/

Есть два изображения, одно сверху, которое представляет собой серое окружение с прозрачным прямоугольником в середине.Также картина позади того, который является просто белым с красными квадратами.Я хочу, чтобы пользователь мог перетаскивать изображение позади (красные квадраты) и изменять его размер.У меня есть несколько проблем:

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

  2. Изображение находится за статическим изображением, при щелчке будет просто щелкнуть верхнее изображение, а не то, что позади.

  3. Изображение позади иногда рисуется после изображения впереди, поэтому я думаю, что мне нужно задержать отрисовку переднего изображения.Я тоже не уверен, как это сделать.

Очевидно, изображения просто созданы для вашей цели.Как только пользователь изменит размер своего изображения и переместит его в правильную позицию, он будет нажимать на загрузку, где холст преобразуется в png и сохраняется на сервере, а затем загружается для пользователя.Используя PHP, пока не знаю, как это сделать, но я думаю, что смогу с этим разобраться .. Может быть :) В основном меня раздражает бит перетаскивания и изменения размера.

Если кто-то может помочь, это было бы удивительно, и я буду вам благодарен.:) Это мой первый опыт, когда задаю вопрос здесь.

1 Ответ

0 голосов
/ 16 декабря 2011

Добро пожаловать в StackOverflow:)

Есть много способов, которыми вы можете подойти к этому. Вы можете сделать это с помощью чистого HTML, SVG или Canvas. Для холста вам нужно создать свои собственные постоянные объекты и перетаскивать код. Я сделал учебника по созданию и перемещению выбираемых фигур на холсте. (Хотя я на самом деле в процессе их изменения, чтобы их было легче понять, поэтому следите за обновлениями через день или два) .

SVG может быть немного проще, чтобы заставить все это работать, потому что события уже встроены в каждый объект SVG. Учебники по перетаскиваемым объектам SVG должны быть легко найдены.

Вам понадобится код, который будет проверять каждый раз, когда объект отпускается, чтобы увидеть, находится ли он правильно в пределах, в которых вы хотите, чтобы он был, или нет. Будьте готовы отслеживать множество положений x, y, ширину и высоту каждого объекта.

Что касается 3: это происходит потому, что вы не используете событие загрузки изображения. См. Другие вопросы о StackOverflow, например этот, для получения справки: Изображение, нарисованное в HTML5 Canvas, не отображается правильно при первой загрузке

...