Проблема при получении данных из 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 - выводимый текст на картинке остается и вообще если удалить текст и вписано заново - новый текст накладывается на старый. Как это исправить? |
Striker_,
Попробуйте перед записью в канву текста - сохранить исходную картинку в буфер и после нового ввода или стирания - восстанавливать из буфера исходную и накладывать на неё |
Вообще может как-то дописать функцию loader(), которая после каждого отпускания клавиши будет обновлять значение поля input?
|
Цитата:
<input style='position:absolute;z-index:10;left:260px;top:100px'> а canvas допишите z-index:1 |
Ой, не значение поля 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'; |
Цитата:
надо рендеринг канваса делать-очищать канвас и перерисовывать или сделайте текст в прямоуольнике canvas1.font = 'italic 40px sans-serif;'; canvas1.fillStyle='white'; canvas1.fillRect(175,130,100,45); $result = canvas1.strokeText(name, 180, 150); |
Цитата:
z-index уже не нужен |
Порешал вот так:
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 Слева вводим текст в поля, справа он отображается на визитке. |
Цитата:
canvasl1_new.font = 'italic 20px sans-serif'; canvasl1_new.strokeText(message, 280, 250); со своим координатами и размером шрифта а Вы все в один пишите скорее всего надо сделать 2 канваса в одном картинка в другом пишем данные- тогда будет лучше ренднринг делать-картинка все время на месте стоять будет |
vadim5june
Вообщем надо передрать полностью функционал того сервиса один в один. Есть шаблоны визиток и слева от них поля, в которые вводится информация, которая в последствии отображается на шаблоне-визитке. Можно даже код один в один передрать, но там очень много всего, путаюсь.:help: |
| Часовой пояс GMT +3, время: 22:45. |