Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Canvas - изменить размер холста (https://javascript.ru/forum/dom-window/64041-canvas-izmenit-razmer-kholsta.html)

Сергей16 16.07.2016 20:42

Canvas - изменить размер холста
 
Пример выложил здесь-http://plnkr.co/edit/QDvD1kiiuDljbnjSlWX6?p=preview, работает только перетаскивание,. если
раскоментировать строки - то размеры холста будут менятся(при изменении в импутах), но старый холст 100*100 не стирается, и
перетаскивание картинки работает не корректно.
Пожалуйста, помогите разобраться.

Spass 17.07.2016 11:46

Думаю проблема в том что у тебя там 2 холста

$('#digit01').on('input', function() {
   $('canvas').width(this.value)
});
$('#digit02').on('input', function() {
   $('canvas').height(this.value)
});


так работает

Сергей16 17.07.2016 17:19

Да, работает, но картинка растягивается

Spass 17.07.2016 18:33

Совершенно верно, ты растягиваешь хост, картинка в нем тоже растягивается. :)

Сергей16 17.07.2016 19:00

После долгих экспериментов , я все таки уверен, что растягивание как-то связано с масштабированием, а здесь его нет. Это странно. Наверняка должен быть способ, чтобы это обойти.

Spass 17.07.2016 19:30

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

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

Сергей16 17.07.2016 20:34

Spass
Подскажи, как переопределить координаты, или что читать.

Spass 17.07.2016 20:45

Я не знаком с используемыми библиотеками (кроме jQuery) и возможно canvas можно настроить в них.

здесь ресайзят холст средствами js
http://stackoverflow.com/questions/1...-to-fit-window


Часовой пояс GMT +3, время: 22:55.