Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.12.2018, 16:15
Новичок на форуме
Отправить личное сообщение для Bastonsv Посмотреть профиль Найти все сообщения от Bastonsv
 
Регистрация: 07.07.2018
Сообщений: 7

Блок следует за мышкой и получение координат
Всем добрый день. Начну с описания задачи которая передомной стоит.
Есть картинка, на эту картинку необходимо наносить надпись и отдавать пользователю в виде конечного файла в PDF.
Надписи каждый раз разные, но однотипные (имя + небольшой код состоящий из 3-6 символов)
Картинка может быть произвольной, пользователь должен указать на шаблоне в каком месте будет ставиться надпись. Далее координаты записываються в базу и вопросы нанесения надписи и выталкивания клиенту ложатся на php

Как видится решение.
Получение координат на картинке решаю следующим образом.
Стиль
<style type="text/css">

#el{

   position:relative;
   width: 100%; 

  background:#555;
  z-index: 2;
}
</style>

HTML:
<img id="el" src='1.png'>

JS скрпит
<script type="text/javascript">
	
var el = document.getElementById('el');

    el.addEventListener('mouseup', getClickXY, false);

function getClickXY(event)

  {

    var clickX = (event.layerX == undefined ? event.offsetX : event.layerX) + 1;

    var clickY = (event.layerY == undefined ? event.offsetY : event.layerY) + 1;
 	

    alert('Координаты отпускания: X= '+ clickX +' Y= '+ clickY);

  }

</script>


Это я на просторах интернета нарыл.
В принципе плюс/минус понимаю скрипт. Таким образом я получаю координаты где пользователь отпустит кнопку(можно поставить клик)
Вопрос вот в чем... Как прикрепить к курсору прямоугольник не большой, который будет символизировать надпись? Просто для наглядности пользователю, что б он понимал где будет расположена надпись.
По отпусканию, что бы этот прямоугольник закрепился на этом месте.

По сути мне нужно что б прямоугольник можно было перетянуть на картинке и получить координаты левого нижнего угла этого прямоугольника относительно картинки(она большая в несколько тыс пискелей по ширине и высоте). В идеале эти координаты заносятся в аттрибуты value hidden-полей(x,y) формы и отправляется из нее в скрипт, который эти координаты запишет в базу.
Помогите пожалуйста реализовать это.

Последний раз редактировалось Bastonsv, 06.12.2018 в 16:19.
Ответить с цитированием
  #2 (permalink)  
Старый 06.12.2018, 18:15
Новичок на форуме
Отправить личное сообщение для Bastonsv Посмотреть профиль Найти все сообщения от Bastonsv
 
Регистрация: 07.07.2018
Сообщений: 7

Форму уже сделал - получаю координаты - проблем нет. Теперь мне бы тягать за мышкой прямоугольник (какой нибудь DIV) и по клику его фиксировать на изображении
Ответить с цитированием
  #3 (permalink)  
Старый 06.12.2018, 18:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,420

Bastonsv,
https://javascript.ru/forum/misc/397...tml#post261336
Ответить с цитированием
  #4 (permalink)  
Старый 06.12.2018, 19:03
Новичок на форуме
Отправить личное сообщение для Bastonsv Посмотреть профиль Найти все сообщения от Bastonsv
 
Регистрация: 07.07.2018
Сообщений: 7

Спасибо за ответ...
Вобщем включился в основы JS и CSS - сделал так
<html lang="en">
<head>

<style type="text/css">

#el{
  position:relative;
  width: 100%; 
  background:#555}


 .stamp{
	width:200px;
	height:50px;
	background:#555;
	position: absolute;
	opacity:0.6;
	/*z-index: 2*/
	
}
</style>

</head>
<body>
<img id="el" src='1.png'>
<script type="text/javascript">	
var el = document.getElementById('el');
    el.addEventListener('mouseup', getClickXY, false);

function getClickXY(event)
  {
    var clickX = (event.layerX == undefined ? event.offsetX : event.layerX) + 1;
    var clickY = (event.layerY == undefined ? event.offsetY : event.layerY) + 1;
 	document.getElementById('X').value = clickX;
 	document.getElementById('Y').value = clickY;
	document.getElementById('st').style.top = clickY+'px';
 	document.getElementById('st').style.left = clickX+'px';
    //alert('Координаты отпускания: X= '+ clickX +' Y= '+ clickY);

  }

</script>
<form method="POST" action="">
<input type='hidden' id="X">
<input type='hidden' id="Y">
<div class="stamp" id="st"><center>AA1BB<br />Name Sirname</center></div>
</form>
</body>
</html>

Если есть ошибки критические - поправляйте. Но вроде мои задачи выполняет

Нет ошибся я. Позиционирование блока div абсолютное, отсюда ошибка возникает, если сверху над картинкой что-то выводится дополнительно. Как привязать координаты позиционирования к картинке?

Последний раз редактировалось Bastonsv, 06.12.2018 в 19:11.
Ответить с цитированием
  #5 (permalink)  
Старый 08.12.2018, 22:36
Новичок на форуме
Отправить личное сообщение для Bastonsv Посмотреть профиль Найти все сообщения от Bastonsv
 
Регистрация: 07.07.2018
Сообщений: 7

Продолжая тему)) Вдруг кому нибудь понадобится. Такое решение - полностью выполняет задачу. Конечно можно совершенствовать. Но это уже для профи в JS
Может кому-то понадобится такое решение
<!doctype html>
<html lang="en">
<head>

<style type="text/css">

#el{
  position:relative;
  width: 100%; 
 /* z-index: 2*/
  /*background:#555*/
}


 .stamp{
	width:200px;
	height:40px;
	background:#ddd;
	position: absolute;
	opacity:0.9;
	/*z-index: 2*/
	
}
.stamp2{
	width:200px;
	height:40px;
	background:#ddd;
	position: absolute;
	opacity:0.6;
	/*z-index: 2*/
	
}
 .description{
	width:100%;
	height: 100px;
	border:2px;
}
</style>

</head>
<body>
<div class="description"><form method="POST" action="">
<form action="" method="POST">

<input type='hidden' id="X">
<input type='hidden' id="Y">
<button type="submit"> Указал</button>
</form>
</div>
<img id="el" src='1.png'>
<script type="text/javascript">	
var el = document.getElementById('el');
    el.addEventListener('click', getClickXY, false);
    el.addEventListener('mousemove', moveClickXY, false);
//mouseup

function getClickXY(event)
  {
    var clickX = (event.layerX == undefined ? event.offsetX : event.layerX) + 1;
    var clickY = (event.layerY == undefined ? event.offsetY : event.layerY) + 1;
	document.getElementById('stmove').style.zindex=-1;
 	document.getElementById('X').value = clickX+12;
 	document.getElementById('Y').value = clickY;
	divkoordinateY=clickY+108;
	document.getElementById('st').style.top = divkoordinateY+'px';
 	document.getElementById('st').style.left = clickX+12+'px';
    alert('Координаты установлены' );

  }
function moveClickXY(event)
{
	//document.getElementById('st').style.top = divkoordinateY+'px';
    var clickX = (event.layerX == undefined ? event.offsetX : event.layerX) + 1;
    var clickY = (event.layerY == undefined ? event.offsetY : event.layerY) + 1;
 	divkoordinateY=clickY+108;
	document.getElementById('st').style.zindex =-1;
	document.getElementById('stmove').style.top = divkoordinateY+'px';
 	document.getElementById('stmove').style.left = clickX+12+'px';
}

</script>

<div class="stamp" id="st"><center>AA1BB<br />Name Sirname</center></div>
<div class="stamp2" id="stmove"><center>AA1BB<br />Name Sirname</center></div>

</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как мышкой перемещать Div блок? Simon Общие вопросы Javascript 25 24.10.2017 12:03
получение некого value и вывод его в определенный блок div Sprutenok000 Элементы интерфейса 28 24.03.2017 20:00
Яндекс карты получение адреса с помощью координат ACzur Events/DOM/Window 1 17.03.2017 13:19
Растягивать блок мышкой? OllBishop Элементы интерфейса 4 23.07.2013 09:31
Получение координат от картинки EmDmAl Events/DOM/Window 4 08.11.2009 14:34