Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.08.2012, 17:47
Интересующийся
Отправить личное сообщение для Striker_ Посмотреть профиль Найти все сообщения от Striker_
 
Регистрация: 08.08.2012
Сообщений: 12

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

<!DOCTYPE HTML>
<head>
        <meta http-equiv="content-type" content="text/html"; charset="utf-8" />
        <title>Test HTML5</title> 

    <script type="text/javascript">
        function loader()
        {
            var name = document.getElementById('name').value;            

            var canvas = document.getElementById('canvas');
            var canvas1 = canvas.getContext('2d');
            canvas1.font = 'italic 20px sans-serif';
            canvas1.strokeText(name, 180, 150);
        }            
    </script>
</head> 

<body onkeyup="loader()"> 

<p><h3>Enter text for front side</h3>
<form method="post" action="">
    <p>Company Name</p>
    <p><input type="text" name="name" id="name"></p>
</form></p> 

<canvas id="canvas" width="669" height="384" style="background-image: url(img.jpg); position: absolute; left: 250px; top: 76px;"></canvas> 

</body>
</html>

Вводимый текст отображается в нужных координатах на картинке, но есть проблема... Если удалять текст из input'a - выводимый текст на картинке остается и вообще если удалить текст и вписано заново - новый текст накладывается на старый. Как это исправить?
Ответить с цитированием
  #2 (permalink)  
Старый 08.08.2012, 18:02
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Striker_,
Попробуйте перед записью в канву текста - сохранить исходную картинку в буфер и после нового ввода или стирания - восстанавливать из буфера исходную и накладывать на неё
Ответить с цитированием
  #3 (permalink)  
Старый 08.08.2012, 18:16
Интересующийся
Отправить личное сообщение для Striker_ Посмотреть профиль Найти все сообщения от Striker_
 
Регистрация: 08.08.2012
Сообщений: 12

Вообще может как-то дописать функцию loader(), которая после каждого отпускания клавиши будет обновлять значение поля input?
Ответить с цитированием
  #4 (permalink)  
Старый 08.08.2012, 18:23
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Striker_
Как это исправить?
попробуйте input такой
<input style='position:absolute;z-index:10;left:260px;top:100px'>
а canvas допишите z-index:1
Ответить с цитированием
  #5 (permalink)  
Старый 08.08.2012, 18:28
Интересующийся
Отправить личное сообщение для Striker_ Посмотреть профиль Найти все сообщения от Striker_
 
Регистрация: 08.08.2012
Сообщений: 12

Ой, не значение поля input, а значение переменной result
function loader()
        {
            var name = document.getElementById('name').value;
            
            var canvas = document.getElementById('canvas');
            var canvas1 = canvas.getContext('2d');
            canvas1.font = 'italic 40px sans-serif;';
            $result = canvas1.strokeText(name, 180, 150);            
        }


vadim5june
Не помгло. Вводимый текст почему-то стал очень мелким.
Я так понимаю z-index:1 в Canvas надо добавлять сюда: canvas1.font = 'italic 40px sans-serif; z-index:1';
Ответить с цитированием
  #6 (permalink)  
Старый 08.08.2012, 18:44
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Striker_
Ой, не значение поля input, а значение переменной result
так Вы прям в канвас записываете-все предыдущие рекомендации не имеют смысла-
надо рендеринг канваса делать-очищать канвас и перерисовывать
или сделайте текст в прямоуольнике
canvas1.font = 'italic 40px sans-serif;';
canvas1.fillStyle='white';
canvas1.fillRect(175,130,100,45);
$result = canvas1.strokeText(name, 180, 150);

Последний раз редактировалось vadim5june, 08.08.2012 в 18:51.
Ответить с цитированием
  #7 (permalink)  
Старый 08.08.2012, 18:47
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Striker_
Я так понимаю z-index:1 в Canvas надо добавлять сюда: canvas1.font = 'italic 40px sans-serif; z-index:1';
нет здесь оставьте как было-из-за этого он мелким стал
z-index уже не нужен
Ответить с цитированием
  #8 (permalink)  
Старый 08.08.2012, 18:54
Интересующийся
Отправить личное сообщение для Striker_ Посмотреть профиль Найти все сообщения от Striker_
 
Регистрация: 08.08.2012
Сообщений: 12

Порешал вот так:
function loader()
        {
            var name = document.getElementById('name').value;
            var canvas = document.getElementById('canvas');
            var canvas1 = canvas.getContext('2d');
            canvas1.font = 'italic 20px sans-serif';
            canvas1.clearRect(0, 0, canvas.width, canvas.height);
            canvas1.strokeText(name, 180, 150);   
        }

Но теперь всплыла другая проблема... Дело в том что полей input на странице много, просто в примере в первом посте привел пример с одним инпутом.

Когда вношу информацию во второй инпут, текст на картинке из первого инпута пропадает и выводится текст из второго.
<script type="text/javascript">
        function loader()
        {
            var name = document.getElementById('name').value;
            var canvas = document.getElementById('canvas');
            var canvas1 = canvas.getContext('2d');
            canvas1.font = 'italic 20px sans-serif';
            canvas1.clearRect(0, 0, canvas.width, canvas.height);
            canvas1.strokeText(name, 180, 150);   
        }
        
        function loader2()
        {
            var message = document.getElementById('message').value;
            var canvas_new = document.getElementById('canvas');
            var canvasl1_new = canvas_new.getContext('2d');
            canvasl1_new.font = 'italic 20px sans-serif';
            canvasl1_new.clearRect(0, 0, canvas_new.width, canvas_new.height);
            canvasl1_new.strokeText(message, 280, 250);   
        }                  
    </script>


Вообщем надо реализовать функционал так как сделно тут:
http://www.vistaprint.com/vp/ns/bcfr...ds&xnav=TopNav
Слева вводим текст в поля, справа он отображается на визитке.
Ответить с цитированием
  #9 (permalink)  
Старый 08.08.2012, 19:16
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Striker_ Посмотреть сообщение
Вообщем надо реализовать функционал так как сделно тут:
http://www.vistaprint.com/vp/ns/bcfr...ds&xnav=TopNav
Слева вводим текст в поля, справа он отображается на визитке.
там на каждый инпут 2 строчки
canvasl1_new.font = 'italic 20px sans-serif';
 canvasl1_new.strokeText(message, 280, 250);

со своим координатами и размером шрифта
а Вы все в один пишите
скорее всего надо сделать 2 канваса в одном картинка в другом пишем данные-
тогда будет лучше ренднринг делать-картинка все время на месте стоять будет

Последний раз редактировалось vadim5june, 08.08.2012 в 19:31.
Ответить с цитированием
  #10 (permalink)  
Старый 09.08.2012, 00:32
Интересующийся
Отправить личное сообщение для Striker_ Посмотреть профиль Найти все сообщения от Striker_
 
Регистрация: 08.08.2012
Сообщений: 12

vadim5june
Вообщем надо передрать полностью функционал того сервиса один в один. Есть шаблоны визиток и слева от них поля, в которые вводится информация, которая в последствии отображается на шаблоне-визитке. Можно даже код один в один передрать, но там очень много всего, путаюсь.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема вставки ссылок при копировании из MSWORD frizbi jQuery 10 05.07.2012 15:46
Двойная Фильтрация данных таблицы David0707 Общие вопросы Javascript 0 19.03.2012 13:00
Проблема при воспроизведении аудио при использовании jplayer nemish Events/DOM/Window 0 01.12.2011 16:15
Вывод данных единожды, при открытии окна? Ggorsh Events/DOM/Window 1 28.04.2009 01:04
Проблема в document.write при использовании setInterval() GOll Общие вопросы Javascript 21 06.10.2008 17:38