Как привязать курсор мыши к графику функции?

denis27 · 16 мар 2006, 08:27

Есть функция по ней строится график, выводится на экран, хочу, чтобы при движении курсора мыши вдоль графика, выводились его координаты (x,y) в отдельном окне. Можно это реализовать с помощью PHP и ее библиотек? :?:

denis27 · 16 мар 2006, 08:54

координаты чтобы выводились в отдельном поле...

Oscar · 16 мар 2006, 13:58

denis27,
далеко не у каждого сервера есть экран ;-)

Oscar · 16 мар 2006, 16:08

Я тут подумал (и мне понравилось).
Если речь идёт таки о пользовательском экране и PHP: Да, можно! :-)
(хоть без JS и не обойтись)

Значится так, на JavaScript отлавливаешь положение мышки (что уже есть не простой кроссбраузерной проблемой),
передаёшь эти координаты PHP-скрипту (делаешь нулевой фрейм, чтобы пользователю не мешало),
этот скрипт записывает данные в файл или БД (каждому пользователю, который в данный момент находится на странице, нужно присваивать ID, чтобы знать где чьи данные),
в новом окошке открываешь второй PHP-скрипт, который читает данные с сервера и выводит их на экран (самоя простая возможность, поставить в начале скрипта HTTP-хэдер для постоянного обновления страницы).

Ну вот тебе и реализация данной проблемы с помощью PHP :lol:

P.S. Только очень уж сомневаюсь, что это то, что тебе нужно ;-)

denis27 · 17 мар 2006, 15:56

Хотелось чтобы иметь привязку курсора к графику функции (обрабатывать событие при наведении курсора на график)…не знаю, возможно ли это, ведь изображение представляется в виде рисунка, а график это только кривая линия на нем….

Oscar · 17 мар 2006, 17:04

denis27,

мда ... уш ...
значит так.
Нормальные люди делают такое не на PHP, а на JavaScript.

PHP работает исключительно на сервере, и понятия не имеет ни про какой курсор.

График описывается математической ф-цией, или таблицой?

Берёшь PHP и рисуешь на нём JS-код (мат. зависимость графика, или же таблицу данных).

JS отлавливает положение мышки, относительно картинки.

И смотрит, если положение мышки совпадает с графиком (рассчёт по ф-ции, или же сравнение по таблице), тогда выводит какую-то информацию в новом окне.

Окно создаётся так же при помощи JS: window.open, с возвратом идентификатора окна.

Если знать о поставленной задачи больше, возможно есть более красивые варианты решения (вплоть до того, чтобы рисовать НЕ РИСУНОК,
а делать HTML таблицу, с ячейками в 1 пиксель. JS-ф-ции вешать не на положение мышки, а просто на mouseOver данной ячейка.

denis27 · 20 мар 2006, 05:05

График описывается математической функцией... и необходимо "исследовать" на нем промежуток порядка тысячи аргументов, сразу все в реальных пикселях не уместить (по задумке хотел увеличивать необходимую часть), придется масштабировать, а дальше наведя мышью на линию графика выводить ее координаты... в принципе, вполне это реализуется первым способом, думаю получиться, спасибо за помощь

Oscar · 20 мар 2006, 09:10

denis27,

Код: Выделить всё

<html>
<head>

<title>Graphic Function</title>

<style type="text/css">

html, body {
	margin: 0;
	padding: 0;
}

#x, #y {
	width: 102px;
	height: 30px;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	padding: 5px;
	text-align: left;
}

#input {
	width: 100px;
	height: 100px;
	border: 1px solid #CCCCCC;
}

</style>

<script type="text/javascript">

var input;
var x;
var y;

var height = 100 + 1;

function checkFunction(e) {
	var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY)
	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY)
	{
		posx = e.clientX + document.body.scrollLeft;
		posy = e.clientY + document.body.scrollTop;
	}

	posy = height - posy;


	/*
	 * Condition: posx and posy belong to function (x = y)
	 */

	if (posx == posy) {
		x.value = "x = " + posx;
		y.value = "y = " + posy;
	} else {
		clearOutput(null);
	}
}

function clearOutput(e) {
	x.value = "x = ";
	y.value = "y = ";
}

function init() {

	input = document.getElementById('input');
	x = document.getElementById('x');
	y = document.getElementById('y');

	input.onmousemove = checkFunction;
	input.onmouseout = clearOutput;

}
</script>

</head>

<body onLoad="init();">

[img]x=y.gif[/img]

<input type="button" id="x" value="x = " />

<input type="button" id="y" value="y = " />


</body>
</html>

примерно так.

Только PHP и серверная сторона тут вовсе ни при чём ..

Рисунок "x=y.gif" 100x100, с диагональю x = y.

Три загвоздки:

1. Я разместил картинку впритык к левому верхнему углу, чтобы не учитывать смещение, но это не сложно исправить.

2. Как быть, если точек нужно обследовать больше, чем пикселей на экране?
(считать ф-цию приближенно?..)

3. Если не ошибаюсь, положение мышки смещается минимум на 2 пикселя,
потому лучше было бы, чтобы рисунок был на самом деле в два раза больше оригинала.

denis27 · 22 мар 2006, 04:56

спасибо, направление понятно

остальное дело техники