Перетаскиваемое масштабируемое изображение в HTML5 Canvas

Question

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

В любом случае, вот мое демо: http://persturesson.com/demo/

Прямо сейчас, как вы можете видеть, изображение (да, это изображение, а не нарисованный объект, изображение изменится для окончательной версии, так что не стоит слишком сильно это перетаскивать). Но я хотел бы иметь возможность изменить размер изображения на лету, как это: http://simonsarris.com/project/canvasdemo/demo2.html

Кто-нибудь, у кого есть идея, как включить функциональность из этой демонстрации в мою?

Все отзывы приветствуются, спасибо.

Answer 1

Я написал демонстрацию, на которую вы смотрели

Итак, соответствующий drawImage выглядит следующим образом:

context . drawImage(image, dx, dy, dw, dh)

Это пункт назначения x, y, ширина и высота.Это означает, что независимо от размера исходного изображения, вы можете нарисовать его больше или меньше на холсте.В моем примере с боксом вы меняете ширину и высоту fillRect, вместо этого вам просто нужно изменить значения dw и dh drawImage.

Итак, в строке 32 вашего transform.js file, вместо 150,150 для значений dw,dh, должен быть эквивалент сохраненной (и измененной) ширины и высоты, как в моей демонстрации.

Все остальное (получение ручек дляработа и т. д.) должны быть примерно такими же.

Если есть еще вопросы, дайте мне знать!