Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Проблема при получении данных из input на JavaScript

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (2): [1] 2 »   

> Без описания
Поиск в теме | Версия для печати
Striker
Отправлено: 08 Августа, 2012 - 15:37:46
Post Id



Частый гость


Покинул форум
Сообщений всего: 128
Дата рег-ции: Июль 2011  
Откуда: Киев


Помог: 1 раз(а)

[+]
Есть поле input в которое я ввожу текст. Справа от поля input картинка, на определенных координатах которой собственно и появляется вводимый текст. Пишу на HTML5 используя элемент Canvas:

CODE (html):
скопировать код в буфер обмена
  1. <!DOCTYPE HTML>
  2. <head>
  3.         <meta http-equiv="content-type" content="text/html"; charset="utf-8" />
  4.         <title>Test HTML5</title>
  5.  
  6.     <script type="text/javascript">
  7.         function loader()
  8.         {
  9.             var name = document.getElementById('name').value;
  10.            
  11.             var canvas = document.getElementById('canvas');
  12.             var canvas1 = canvas.getContext('2d');
  13.             canvas1.font = 'italic 20px sans-serif';
  14.             canvas1.strokeText(name, 180, 150);
  15.         }
  16.                  
  17.     </script>
  18. </head>
  19.  
  20. <body onkeyup="loader()">
  21.  
  22. <p><h3>Enter text for front side</h3>
  23. <form method="post" action="">
  24.     <p>Company Name</p>
  25.     <p><input type="text" name="name" id="name"></p>
  26. </form></p>
  27.  
  28. <canvas id="canvas" width="669" height="384" style="background-image: url(img.jpg); position: absolute; left: 250px; top: 76px;"></canvas>
  29.  
  30. </body>
  31. </html>


Вводимый текст отображается в нужных координатах на картинке, но есть проблема... Если удалять текст из input'a - выводимый текст на картинке остается и вообще если удалить текст и вписано заново - новый текст накладывается на старый. Как это исправить?
 
 Top
armancho7777777 Супермодератор
Отправлено: 08 Августа, 2012 - 15:42:20
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Не по теме, но...
почему у Вас loader() повешен на onkeyup самого body ?
Почему не на поле ввода ?
 
 Top
Striker
Отправлено: 08 Августа, 2012 - 15:51:44
Post Id



Частый гость


Покинул форум
Сообщений всего: 128
Дата рег-ции: Июль 2011  
Откуда: Киев


Помог: 1 раз(а)

[+]
Цитата:
почему у Вас loader() повешен на onkeyup самого body ?
Почему не на поле ввода ?

На самом деле на странице много полей. Просто вырезал из кода только основную часть чтоб не загромождать пост. Ибо если выложу тут много кода - многим будет лень все просматривать, потому привел пример с одним инпутом.

(Отредактировано автором: 08 Августа, 2012 - 16:05:41)

 
 Top
armancho7777777 Супермодератор
Отправлено: 08 Августа, 2012 - 17:00:38
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Как-то так:
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. function loader()
  3. {
  4.         var name = document.getElementById('name').value;
  5.         var canvas = document.getElementById('canvas');
  6.         var canvas1 = canvas.getContext('2d');
  7.                   canvas1.font = 'italic 20px sans-serif';
  8.                   canvas1.strokeText(name, 180, 150);
  9.  
  10.         if(event.keyCode == 8)
  11.         canvas1.clearRect((180 + (name.length * 13)), 120, 13, 30);
  12.        
  13. }
  14.  


Суть в том, что Вы рисуете текст на холсте, и при удалении части строки в поле Вам надо стирать её с холста.
Мой пример надо доработать:
надо получать длину и высоту строки в px. и ширину удаляемого символа.
Возможно кто либо на форуме предложет лучшее решения.
Просто у меня нет опыта работы с canvas.
Ну и google в помощь ))

(Отредактировано автором: 08 Августа, 2012 - 17:05:22)

 
 Top
Striker
Отправлено: 08 Августа, 2012 - 17:16:45
Post Id



Частый гость


Покинул форум
Сообщений всего: 128
Дата рег-ции: Июль 2011  
Откуда: Киев


Помог: 1 раз(а)

[+]
armancho7777777
Уже где-то близко... Выделенный бекспейсом символ становится невидимый, но опять таки появляется после очередного нажатия клавиши backspace.

Вообще может как-то дописать функцию loader(), которая после каждого отпускания клавиши будет обновлять значение поля input?

//Updated
Ой, не значение поля input, а значение переменной result
CODE (html):
скопировать код в буфер обмена
  1. function loader()
  2.         {
  3.             var name = document.getElementById('name').value;
  4.            
  5.             var canvas = document.getElementById('canvas');
  6.             var canvas1 = canvas.getContext('2d');
  7.             canvas1.font = 'italic 40px sans-serif';
  8.             $result = canvas1.strokeText(name, 180, 150);  
  9.            
  10.         }

(Отредактировано автором: 08 Августа, 2012 - 17:25:18)

 
 Top
armancho7777777 Супермодератор
Отправлено: 08 Августа, 2012 - 17:26:47
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Striker пишет:
Вообще может как-то дописать функцию loader(), которая после каждого отпускания клавиши будет обновлять значение поля input?

Блин, ну конечно ))
Как-то сразу не догадался ))
Только не значение поля обновлять, а надо стирать всё
и перерисовывать каждый раз при событии onkeyup ))
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. function loader()
  3. {
  4.         var name = document.getElementById('name').value;
  5.         var canvas = document.getElementById('canvas');
  6.         var canvas1 = canvas.getContext('2d');
  7.         canvas1.font = 'italic 20px sans-serif';
  8.         canvas1.clearRect(0, 0, canvas.width, canvas.height);
  9.         canvas1.strokeText(name, 180, 150);
  10. }
  11.  

(Отредактировано автором: 08 Августа, 2012 - 17:36:52)

 
 Top
Striker
Отправлено: 08 Августа, 2012 - 17:34:18
Post Id



Частый гость


Покинул форум
Сообщений всего: 128
Дата рег-ции: Июль 2011  
Откуда: Киев


Помог: 1 раз(а)

[+]
armancho7777777
Красава! Спасибо большое! По пиву! Жаль не могу репу повысить, мало постов у меня)
 
 Top
armancho7777777 Супермодератор
Отправлено: 08 Августа, 2012 - 17:38:14
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Да не за что Подмигивание
 
 Top
Striker
Отправлено: 08 Августа, 2012 - 17:40:41
Post Id



Частый гость


Покинул форум
Сообщений всего: 128
Дата рег-ции: Июль 2011  
Откуда: Киев


Помог: 1 раз(а)

[+]
Ага... теперь появилась друга проблема. Ввожу данные в одно поле - все ок, ввожу в другое поле - информация на картинке из первого поля удаляется и отображается только то что ввел во второе поле.

Вообщем надо реализовать вот какой функционал:
http://www[dot]vistaprint[dot]com/vp/ns/[dot][dot][dot]&xnav=TopNav
(на http://www[dot]vistaprint[dot]com в верхнем меню выбрать Business Cards, затем кликнутся на Free Business Card)

Слева вводится текст, справа на картинке он отображается.

(Отредактировано автором: 08 Августа, 2012 - 17:57:14)

 
 Top
armancho7777777 Супермодератор
Отправлено: 08 Августа, 2012 - 18:31:35
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
А, вот что Вы хотите реализовать )
Так с этого и надо было ничинать )
Сей час подумаю.
________
Блин, я благодаря Вам, за ночь освою работу с canvas Радость

(Отредактировано автором: 08 Августа, 2012 - 19:03:52)

 
 Top
Stierus Супермодератор
Отправлено: 08 Августа, 2012 - 18:37:44
Post Id



Рекордсмен по количеству сообщений за 7 дней


Покинул форум
Сообщений всего: 2132
Дата рег-ции: Дек. 2008  
Откуда: Москваль


Помог: 52 раз(а)
Я, может, глупость сморожу, но почему нельзя сделать canvas (читай как img) и div поверх него в нужном месте (в вашем случае несколько дивов)? Содержимое дива менять много проще, имхо Улыбка
 
My status
 Top
armancho7777777 Супермодератор
Отправлено: 08 Августа, 2012 - 18:57:46
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Stierus, я тоже думал предложить это, и согласен, так проще ))
Но, спортивный интерес ))

Striker

CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. function loader(e, top, left)
  3. {
  4.         var name = e.value;
  5.  
  6.         var line_height = 12; // Высота строки
  7.  
  8.         var canvas = document.getElementById('canvas');
  9.         var canvas1 = canvas.getContext('2d');
  10.         canvas1.font = 'italic 20px sans-serif';
  11.         canvas1.clearRect(0, top - line_height, canvas.width, line_height);
  12.         canvas1.fillStyle = "#FFF";
  13.         canvas1.fillText(name, left, top);
  14. }
  15.  
  16.  
  17. window.onload = function()
  18. {
  19.         document.getElementById('name').onkeyup = function()
  20.         {
  21.                 loader(this, 100, 180);
  22.         }
  23.  
  24.         document.getElementById('name2').onkeyup = function()
  25.         {
  26.                 loader(this, 120, 180);
  27.         }
  28. }
  29.  

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <form method="post" action="" id="form">
  3.  
  4.     <p><input type="text" name="name" id="name"></p>
  5.     <p><input type="text" name="name" id="name2"></p>
  6.  
  7. </form>
  8.  
  9. <canvas id="canvas" width="669" height="200" style="background-color:#06F;"></canvas>
  10.  


Единственное, что то надо придумать с высотой строки.
Используйте fillText вместо strokeText: он чётче прорисовывает.

(Отредактировано автором: 08 Августа, 2012 - 19:15:29)

 
 Top
Stierus Супермодератор
Отправлено: 08 Августа, 2012 - 19:20:36
Post Id



Рекордсмен по количеству сообщений за 7 дней


Покинул форум
Сообщений всего: 2132
Дата рег-ции: Дек. 2008  
Откуда: Москваль


Помог: 52 раз(а)
armancho7777777 пишет:
Но, спортивный интерес ))
У меня коллега из спортивного интереса на канвасах дьяблу начал писать Улыбка https://github[dot]com/mitallast/diablo-js ... жаль, охладел быстро - запал пропал.
 
My status
 Top
armancho7777777 Супермодератор
Отправлено: 08 Августа, 2012 - 19:21:57
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Сам бы я сделал для себя как предложили Вы, Stierus, но без canvas + с возможностью перетаскивания текстовых блоков для позиционирования + кнопка для выравнивания текста по левому, по правому, по центру.Ну и по клику кнопки "сохранить" отправлять аяксом все нужные данные в обработчик. Ну а там уже GD Подмигивание

Stierus пишет:
дьяблу начал писать

Что такое дьябла ?
В двух словах )

(Отредактировано автором: 08 Августа, 2012 - 19:23:58)

 
 Top
Stierus Супермодератор
Отправлено: 08 Августа, 2012 - 19:23:56
Post Id



Рекордсмен по количеству сообщений за 7 дней


Покинул форум
Сообщений всего: 2132
Дата рег-ции: Дек. 2008  
Откуда: Москваль


Помог: 52 раз(а)
Ты хотел сказать imagic Улыбка
 
My status
 Top
Поиск в теме | Версия для печати
Страниц (2): [1] 2 »
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Напишите за меня, пожалуйста »


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



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB