Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Пробегающий кружок по графику

Автор: Ciber SLasH 25.5.2005, 07:06

Сваял скрипт, в котором пробегает шарик (gif-ка) по графику синуса.
Но вся проблема в том, что он не работает в IE, а работает в Опере. Нужно чтоб и там и сям работало. smile

Код


<html>
<head>
<meta http-equiv=Content-Type content='text/html; charset=windows-1251'>
</head>

<body>
<center>
<h3>Движение по траектории синуса</h3>
<button onClick=draw()>Вперёд</button><br><br>
<div id=graph style='position: absolute; left: 10%; width: 80%; height: 80%; background: navy'></div>
</center>

<script language='JavaScript'>
/*** Отбрасывание дробной части ***/
function trunc(fNum) {
var i, ST = fNum.toString()

  i = ST.indexOf('.')
  return (i > 0) ? parseInt(ST.substring(0, i)) : fNum
}

cnv = document.getElementById('graph')

Xmax = 6  // наибольшее значение X
Ymax = 2  // наибольшее значение Y

// Область для графика
mx = cnv.offsetWidth - 14
my = cnv.offsetHeight

// Точка отсчёта (начало координат)
cx = 0
cy = trunc(my / 2)

sx = (mx-cx) / Xmax  // масштабирование по X
sy = (my-cy) / Ymax  // масштабирование по Y

function putPixel(X, Y) {
var xx,yy,n  // xx - преобразование координаты X; yy - преобразование координаты Y

  xx = trunc(X*sx) + cx
  yy = trunc(cy - Y*sy)

  for (n = 0; n < 50000; n++) {}  // задержка
  cnv.innerHTML = '<img id=point src=d.gif style="position: absolute; left: ' + xx + '; top: ' + yy + '">'
}

function draw() {
var X,Y, step

  step = Xmax / (mx-cx) * 10  // шаг графика
  X = 0
  while (X <= Xmax) {
    Y = Math.sin(/*Math.PI / 180 **/ X)
    putPixel(X, Y)
    X += step
  }
  document.getElementById('point').removeNode(false)  // удаляем "шарик"
}
</script>
</body>
</html>

И ещё вопрос: а как вычислять координаты gif-точки, если ей поставить свойство position в relative и запихнуть DIV в таблицу ?
Если было бы так:

Код


<table id=cnvTB width=80% height=80%>
<tr><td><div id=graph style=height:100%></div>
</table>
<!--
cnvTB = document.getElementById('cnvTB')
mx = cnvTB.offsetWidth - 14
my = cnvTB.offsetHeight
-->

Автор: Aliance 25.5.2005, 16:27

Лично мне в ИЕ6 (SP2) писалось, что сценарий может тормозить процессов.
Попробуй область уменьшить...

Затем куча мелких недочетов:

переменные объвлены как глобальные (нет var)
отсутствубют точки с запятой

Цитата(Ciber @ 25.5.2005, 08:06)

а как вычислять координаты gif-точки, если ей поставить свойство position в relative и запихнуть DIV в таблицу ?

div`у пропиши id="test", и по document.getElementById('test') вычисляй...

Автор: Ciber SLasH 26.5.2005, 04:07

Всё-таки так и не смог нормально сделать отрисовку при задании position: relative...
Подправил чють скрипт:

Код


<html>
<head>
<meta http-equiv=Content-Type content='text/html; charset=windows-1251'>
</head>

<body>
<center>
<h3>Движение по траектории синуса</h3>
<button onClick=draw()>Вперёд</button><br><br>
<table width=80% height=80% cellspacing=0 cellpadding=0 style=background:navy>
<tr><td><div id=graph style=height:100%></div>
</table>
</center>

<script language='JavaScript'>
/*** Отбрасывание дробной части ***/
function trunc(fNum) {
var i, ST = fNum.toString()

  i = ST.indexOf('.')
  return (i > 0) ? parseInt(ST.substring(0, i)) : fNum
}

cnv = document.getElementById('graph')

Xmax = 6  // наибольшее значение X
Ymax = 2  // наибольшее значение Y

// Область для графика
mx = cnv.offsetWidth - 14
my = cnv.offsetHeight

// Точка отсчёта (начало координат)
cx = 0
cy = my / 2

sx = (mx-cx) / Xmax  // масштабирование по X
sy = (my-cy) / Ymax  // масштабирование по Y

function putPixel(X, Y, i) {
var xx,yy,n, content  // xx - преобразование координаты X; yy - преобразование координаты Y

  xx = trunc(X*sx + cx) - i*14
  yy = trunc(cy - Y*sy)

//  for (n = 0; n < 50000; n++) {}  // задержка
  content = '<img id=point' + i + ' src=d.gif width=14 height=14 style="position: relative; left: ' + xx + '; top: ' + yy + '">'
  cnv.innerHTML += content

/*  pt = document.getElementById('point' + i)
  alert('X: ' + X + '; Y: ' + Y + '\n\n' +
//        'X*sx: ' + X*sx + '; trunc(X*sx): ' + trunc(X*sx) + '\n' +
//        'Y*sy: ' + Y*sy + '; trunc(Y*sy): ' + trunc(Y*sy) + '\n\n' +
        'xx: ' + xx + ' (' + trunc(X*sx + cx) + '); yy: ' + yy + '\n\n' +
        'pt' + i + ':\n' +
        '  offsetParent.tagName: ' + pt.offsetParent.tagName + '\n' +
        '  offsetLeft: ' + pt.offsetLeft + '\n' +
        '  offsetTop: ' + pt.offsetTop + '\n\n' +
        'content: \n\n' + content)
*/
}

function draw() {
var X,Y, step, i

  step = Xmax / (mx-cx) * 10  // шаг графика
  i = X = 0
  while (X <= Xmax) {
    Y = Math.sin(X)
    putPixel(X, Y, i)
    X += step
    i++
  }
//  document.getElementById('point').removeNode(false)  // удаляем "шарик"
}
</script>
</body>
</html>

Как бы теперь сделать правильную отрисовку при position: relative ?

Need Help !!

ЗЫ: количество шагов уменьшил (step = <...> * 10) в 10 раз, глобальные переменные испоьзуются в 2-х функциях (не переписывать же их 2 раза), точки с запятой -- нафик, и без них всё работает (знаю что могут обламаться всякие парсеры, но до этого мне ещё далеко, а я люблю минимализм -- меньше символов -- меньше вес страницы).

Автор: Aliance 26.5.2005, 13:20

Цитата(Ciber @ 26.5.2005, 05:07)

глобальные переменные испоьзуются в 2-х функциях

А вне функции их не задать? Тогда они будут глобальными...

Цитата(Ciber @ 26.5.2005, 05:07)

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

С такими задатками далеко не уйдешь smile

Автор: Ciber SLasH 26.5.2005, 15:30

Выяснил, что при position: relative координата left отсчитывается от предыдущего элемента, поэтому приходится при вычислении новой left-координаты рисунка отнимать занимаемую ширину предыдущих рисунков. Т.е. left: x - (i * <ширина рисунка>).

C учётом этого переписал скрипт и отредактировал предыдущий пост, дабы не выкладывать снова тот же скрипт в новом посту.

Но появились другие баги (для понимания при отладке раскомментировать коммент в функции putPixel):
1) не понятно почему document.getElementById('point' + i).offsetParent.tagName указывает на BODY а не на DIV
2) теперь график рисуется правильно, но только до 56-го прохода, дальше offsetLeft контейнера принимает отрицательные значения, что и приводит к неправильной отрисовки. Хотя по идеи положительные значения offsetLeft контейнера должны продолжаться вплоть до конца DIV-а...

ещё интересные вещи творятся если:
1) из xx не вычитать (i*14)
2) а в IMG поставить в стиле вместо left -- right

Автор: Sardar 27.5.2005, 02:44

1) потому что offsetParent и parentNode это не одно и тоже, первый это блочный элемент с которого начинается отсчёт координат потомков, второе это родительский узел элемента.

2) посмотри это, наваял за пол часа: http://forum.vingrad.ru/index.php?act=ST&f=188&t=53487 smile

Автор: Ciber SLasH 27.5.2005, 17:56

10x Sardarу за плоттер, при просмотре исходника я понял почему мой график глючил -- нужно было реализовать нормальную задержку через setInterval() и кой-чего подправить с позицией.

Я всё-таки оставил свой вариант графика (он более понятен).
Вот переделанный скрипт (он лишь заточен на движение по синусу, остальное пока не нужно):

Код


<html>
<head>
<meta http-equiv=Content-Type content='text/html; charset=windows-1251'>
</head>

<body>
<center style=height:100%>
<h3>Движение по траектории синуса</h3>
<button onClick=draw()>Вперёд</button><br><br>
<!-- Контейнер для графика -->
<div id=graph style='position: relative; width: 80%; height: 80%; background: navy'></div>
</center>

<script language='JavaScript'>
cnv = document.getElementById('graph')

Xmax = 2*Math.PI  // наибольшее значение X (1 период)
Ymax = 2          // наибольшее значение Y

// Область для графика
mx = cnv.offsetWidth - 14
my = cnv.offsetHeight

// Точка отсчёта (начало координат)
cx = 0
cy = Math.floor(my / 2)

sx = (mx-cx) / Xmax  // масштабирование по X
sy = (my-cy) / Ymax  // масштабирование по Y

function draw() {
// X,Y - координаты графика в Декартовой системе; step - шаг графика; timer - время повтора отрисовки
var X,Y, step, timer

  step = Xmax / ((mx-cx) / 14)
  X = 0
  timer = setInterval(putPixel, 1)  // повторяем отрисовку каждые 10 мс

    /* Отрисовка одной точки */
    function putPixel() {
    var xx,yy

      if (X > Xmax) {        // если точка графика вылазит за область отрисовки
        clearTimeout(timer)  // снимаем таймер
        //document.getElementById('point').removeNode(false)  // удаляем "шарик"
        return
      }
      Y = Math.sin(X)  // вычисляем Y-координату графика функции синуса

      xx = Math.floor(X*sx + cx)  // преобразование координаты X
      yy = Math.floor(cy - Y*sy)  // преобразование координаты Y

      // Вставляем элемент IMG в контейнер для графика
      cnv.innerHTML += '<img id=point src=d.gif style="position: absolute; left: ' + xx + '; top: ' + yy + '">'

      X += step  // увеличиваем шаг графика
    }
}
</script>
</body>
</html>

Если раскомментировать 45 строку, а в 54-й вместо оператора += поставить просто =, то вместо отрисовки графика будет движение по графику.

Кстати этот скрипт есть модификация одной лабы на Паскале:

Код


program sinus;
uses Crt, Graph;
{$I ..\InitGr.inc}
const
  A = 1;         { амплитуда }
  F = 1000;      { частота }
  T = 1/F;       { период }
  M = 5;         { количество периодов }
  Xmax = M * T;  { наибольшее значение Х. Xmax=x2-x1=M*T-0=M*T }
  Ymax = 2;      { наибольшее значение Y. Ymax=y2-y1=1-(-1)=2 }
  cx = 10;       { Х-координата начала отсчёта }
  cy = 240;      { Y-координата начала отсчёта }
  sx = (640-cx) / Xmax;  { масштабирование по оси X }
  sy = (480-cy) / Ymax;  { масштабирование по оси Y }

{*** Преобразование матем. коор. X в граф. коор. X ***}
function CoordX(X: Extended): Integer;
var
  RezX: LongInt;
begin
  RezX := Trunc(X * sx) + cx;
  if RezX > $FFFF then
    RezX := Integer(RezX);
  if RezX < cx then
    RezX := cx
  else if RezX > 640 then
    RezX := 640;
  CoordX := RezX
end;

{*** Преобразование матем. коор. Y в граф. коор. Y ***}
function CoordY(Y: Extended): Integer;
var
  RezY: LongInt;
begin
  RezY := cy - Trunc(Y * sy);
  if RezY > $FFFF then
    RezY := Integer(RezY);
  if RezY < 0 then
    RezY := 0
  else if RezY > 480 then
    RezY := 480;
  CoordY := RezY
end;
{############################################################################}
var
  X,Y, step: Extended;
begin
  graphInit;
  SetColor(13);
  MoveTo(cx, cy);
  step := Xmax / (640-cx);
  X := step;
  while X <= Xmax do
  begin
    { Y = A*sin(wt + fi);        w = 2*Pi/T = 2*Pi*F;        F = 1/T
      где: A - амплитуда; w - круговая частота; T - период; F - частота;
      wt + fi - фаза колебаний; fi - фаза в начальный момент времени (t=0) }
    Y := A*Sin(2*Pi*F*X);
    LineTo(CoordX(X), CoordY(Y));
    X := X + step
  end;
  SetColor(15);
  Line(cx,cy,       640,cy);
  Line(cx,0,        cx,480);
  repeat until KeyPressed;
  graphClose
end.

ЗЫ: хотел выделить += и = жирным стилем -- не получилось. Хоть и стоит:

Код

[b]+=[/b]