VPF::В яве я не давно, но вопросы для профи

SuperRembo

Дата 18.2.2009, 16:36 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 24.11.2008

Репутация: нет
Всего: нет

Здравствуйте!
Пишу презентационную программу для поиска экстремальных значений функции минимума и максимума и графически отображаю это с помощью Canvas.
Всё это работает на троих файлах, первый это Index.htm в нём организованы фреймы:

Код


<HTML>
<frameset cols="39%,*">
  <frame src="Dashboard.htm" name="Dashboard">
  <frame src="Graph.htm" name="Graph">
</frameset>
</HTML>

Эти два фреймы очень взаимосвязаны первый это пульт управления и инициализатор, второй отображает результат и график:
Dashboard.htm (Пульт)

Код


<HTML>
<HEAD>
  <script language = "JavaScript">
  function LoadValues()
     {
    CanvasWidth.value=parent.Graph.yc;
    CanvasN.value=parent.Graph.n;
    DelayDT.value=parent.Graph.dt;
    BorderA.value=parent.Graph.a;
    BorderB.value=parent.Graph.b;
     }
    </SCRIPT>
  </HEAD>

<BODY bgcolor="9999bb" onload="LoadValues()">

  <!-- стартовые кнопки -->
  <button onclick="parent.Graph.maindraw(1)"; style="position:absolute; top:410px; left:10">Отобразить апликацию</button>
  <button onclick="parent.Graph.maindraw(2)"; style="position:absolute; top:435px; left:10">Поиск оптимума, первая итерация</button>
  <button onclick="parent.Graph.maindraw(3)"; style="position:absolute; top:460px; left:10">Стереть</button>

  <br><br><br><br><br><br><br><br><hr>

  <form>
    <table cellpadding="0" cellspacing="0" border="0" style="position:absolute; top:10px; left:10">
    <tr>
       <td rowspan="2">
         <input type="text" onKeyUp="parent.Graph.yc=CanvasWidth.value" name="numb" id="CanvasWidth" style="width:50px;height:25px;font-weight:bold;" >
       </td>
       <td>
         <input type="button" value=" /\ " onclick="CanvasWidth.value++; parent.Graphc=CanvasWidth.value" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" >
       </td>
      <td rowspan="2">
         <b> - маштаб по y</b>
       </td>
 
    </tr>
    <tr>
       <td><input type=button value=" \/ " onclick="CanvasWidth.value--; parent.Graph.yc=CanvasWidth.value" style="font-size:7px;margin:0;padding:0;width:20px;height:12px;" ></td>
    </tr>
  </table>
  </form>

  <form>
    <table cellpadding="0" cellspacing="0" border="0" style="position:absolute; top:40px; left:10">
    <tr>
       <td rowspan="2"><input type="text" onKeyUp="parent.Graph.n=CanvasN.value" name="numb" id="CanvasN" style="width:50px;height:25px;font-weight:bold;" >
       </td>
       <td><input type="button" value=" /\ " onclick="CanvasN.value++; parent.Graph.n=CanvasN.value" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" ></td>
       <td rowspan="2">
         <b> - количество разделений отрезка a-b</b>
       </td>
       </tr>
    <tr>
       <td><input type=button value=" \/ " onclick="CanvasN.value--; parent.Graph.n=CanvasN.value" style="font-size:7px;margin:0;padding:0;width:20px;height:12px;" ></td>
       </tr>
  </table>
  </form>

  <form>
    <table cellpadding="0" cellspacing="0" border="0" style="position:absolute; top:70px; left:10">
    <tr>
       <td rowspan="2"><input type="text" onKeyUp="parent.Graph.dt=DelayDT.value" name="numb" id="DelayDT" style="width:50px;height:25px;font-weight:bold;" >
       </td>
       <td><input type="button" value=" /\ " onclick="DelayDT.value++; parent.Graph.dt=DelayDT.value" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" ></td>
       <td rowspan="2">
        <b> - скорость прорисовки (задержка)</b>
       </td>
    </tr>
    <tr>
       <td><input type=button value=" \/ " onclick="DelayDT.value--; parent.Graph.dt=DelayDT.value" style="font-size:7px;margin:0;padding:0;width:20px;height:12px;" ></td>
       </tr>
  </table>
  </form>

  <form>
    <table cellpadding="0" cellspacing="0" border="0" style="position:absolute; top:100px; left:10">
    <tr>
       <td rowspan="2"><input type="text" onKeyUp="parent.Graph.a=BorderA.value" name="numb" id="BorderA" style="width:50px;height:25px;font-weight:bold;" >
       </td>
       <td><input type="button" value=" /\ " onclick="BorderA.value++; parent.Graph.a=BorderA.value;" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" ></td>
       <td rowspan="2">
        <b> - граница a</b>
       </td>
    </tr>
       <tr>
       <td><input type=button value=" \/ " onclick="BorderA.value--; parent.Graph.a=BorderA.value" style="font-size:7px;margin:0;padding:0;width:20px;height:12px;" ></td>
       </tr>
  </table>
  </form>

  <form>
    <table cellpadding="0" cellspacing="0" border="0" style="position:absolute; top:130px; left:10">
    <tr>
       <td rowspan="2"><input type="text" onKeyUp="parent.Graph.b=BorderB.value" name="numb" id="BorderB" style="width:50px;height:25px;font-weight:bold;" >
       </td>
       <td><input type="button" value=" /\ " onclick="BorderB.value.numb++; parent.Graph.b=BorderB.value" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" ></td>
       <td rowspan="2">
        <b> - граница b</b>
       </td>
    </tr>
    <tr>
       <td><input type=button value=" \/ " onclick="BorderB.value--; parent.Graph.b=BorderB.value" style="font-size:7px;margin:0;padding:0;width:20px;height:12px;" ></td>
       </tr>
  </table>
  </form>

  </Body>
  </HTML>

и Graph.htm (график):

Код


<html>
<head>
<script type="text/javascript">
var dx = 0.05;   // сдвиг по х (качество выходной функции)
var dt = 20;     // задержка по времени в миллисекундах
var a = 2;       // начальное значение х
var b = 5;       // конечное значение х
var e = 0.01     // Необходимая точность
var n = 10       // Количество разделений в отрезке
var xc = 700;    // рамки полотна канвы по x
var yc = 700;    // рамки полотна канвы по y
var scaleX = 1;  // масштаб по x
var scaleY = 1;  // масштаб по y
var ctx;         // контекст canvas'a
var ch;          // Длина одного отрезка n


// Проэктирующая функция - анализ заданой мат. функции поиск экстермумов для маштабирования графика
function Analize(i)
{
    max = 0;
    min = f(i);
    while (i <= b)
    {
        x=f(i);
        if (x >= max) max = x;
        if (x <= min) min = x;
        i += e;
    }
    scaleY = (yc / 2) / (max - min);
    ch = (b-a)/n;
    scaleX = (xc - 200) / (b-a);
}

// Функции для вычисления
function f(x)
{
        aa = 3 * Math.cos(2*x) + 4 * Math.sin(x);
    return aa;
}

function f2(x)
{
        aa = 3 * Math.cos(2*x) + 4 * Math.sin(x);
    return aa;
}

// Функции прорисовки
// Аргумент i - начальное х, с которого мы будем рисовать линию
function draw(i)
{
    ctx.beginPath();
    ctx.moveTo(((i-a) * scaleX) + 100, f(i) * scaleY + yc / 2);    i += dx;
    ctx.lineTo(((i-a) * scaleX) + 100, f(i) * scaleY + yc / 2);
    ctx.closePath();
    ctx.stroke();
    if (i < b) { setTimeout("draw(" + i + ")", dt); }
}

function draw2(i)
{
    ctx.beginPath();
    ctx.moveTo(((i-a) * scaleX) + 100, 500);
    ctx.lineTo(((i-a) * scaleX) + 100, f(i) * scaleY + yc / 2);
    i += ch;
    ctx.closePath();
    ctx.stroke();
    if (i <= b) { setTimeout("draw2(" + i + ")", dt); }
}

function maindraw(t)
{
    var aa = a// начальное значение х (отказ от глобальной переменной в силу специфики работы с переменными в js)
    Analize(a);
    switch(t)
    {
        case 1: { draw(a);  } break;
        case 2: { draw2(a); } break;
        case 3: {ctx.clearRect(0, 0, xc, yc)} break;
    }
}

function init()
{
    var canvas = document.getElementById("canvas");
    if (canvas.getContext)
    {
        ctx = canvas.getContext("2d");
    }
    else { alert('You need Safari or Firefox 1.5+ to see this demo. Вам необходимо установить Safari или Firefox 1.5+ для полноценной работы этой страницы'); }
    }
</script>
</head>
<body onload="init()">
<canvas width="700" height="700" id="canvas" style="position:absolute; top:10px; left:10; border-style:solid; border-width:thin"></canvas>
</body>
</html>

А вот собственно проблемы.

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

2.
Проблема с маштабированием. Автомаштабирование происходит в функции Analize(); в следующих строках
scaleY = (yc / 2) / (max - min);
scaleX = (xc - 200) / (b-a);
вместо (yc / 2) должно быть просто yc, а вместо (xc - 200) - xc. xc и yc множатся на 0.8 для создания рамки, но умножение почему-то происходит не коректно

3.
Хотелось бы при создании канвы:
<canvas width="700" height="700" id="canvas" style="position:absolute; top:10px; left:10; border-style:solid; border-width:thin"></canvas>
вместо чисел 700 использовать переменные, но похоже что использование в данном случае переменных не возможно, но в подобных формах переменные я использовал, наверняка с канвой это не проходит, но если можно, то подскажите как.

4.
Можно ли опредилить расширение компютера на котором запускаеться эта программа, и автоматически подстраивать размер канвы и фрейма для коректного отображения на любых мониторах.

5.
В (пульте) используеться кнопки увеличить/уменьшить, в программе используеться инкременты и декрем., при попытки организовать таким образом:
onclick="BorderB.value.numb+=0.1" - значения слаживались как текстовые, что нужно для указания на сложение чисел?

Очень Вас прошу помочь с решением, спасибо за внимание, буду очень благодарен за помощь хоть с одной из этих проблем.
Этот же вопрос на http://forums.realcoding.net/index.php?showtopic=22509. (Были решены некоторые вопросы)

Это сообщение отредактировал(а) SuperRembo - 19.2.2009, 22:10

acdcee

Дата 24.2.2009, 19:06 (ссылка)

(голосов:1)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 42
Регистрация: 5.7.2007

Репутация: нет
Всего: 1

Для того что бы сложение двух значение

c = a + b; происходило не как сложение строк т.е "строка1"+"строка2"

нужно использовать parseInt - для целых чисел, и parseFloat - для чисел с плавающей точкой.

Код


a = parseInt(a);
b = parseInt(b);

c = a + b;

аргументы функции parseInt - parseInt(value, base) - гле value это перменная передаваемая в parseInt, а base - это система исчесления
шестадцатиричная, восмеричная или десятичная.

Если в строке "Test string" parseInt не найдет не одного числа то она вернет NaN - это можно проверить так

Код


a = parseInt(a);


if(isNaN(a)) {
 alert("Ошибка преобразования значения");
}

В том месте где тебе нужно выводить canvas напиши так:

document.write('<canvas width="'+width+'" height="'+height+'" id="canvas" style="position:absolute; top:10px; left:10; border-style:solid; border-width:thin"><\/canvas>');

где width и height - переменные со значением ширины и высоты соотвественно.

можно определить размер ширины body

для IE

Код


var boxModel = document.compatMode == 'CSS1Compat';

var client = boxModel ? document.documentElement : document.body;
var clientWidth = client.clientWidth;
var clientHeight = client.clientHeight;

для FF

Код


var clientWidth = self.innerWidth;
var clientHeight = self.innerHeight;

SuperRembo

Дата 28.2.2009, 21:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 24.11.2008

Репутация: нет
Всего: нет

Цитата(acdcee @ 24.2.2009, 19:06)

Код


a = parseInt(a);
b = parseInt(b);

c = a + b;

Код


a = parseInt(a);


if(isNaN(a)) {
 alert("Ошибка преобразования значения");
}

Код


var boxModel = document.compatMode == 'CSS1Compat';

var client = boxModel ? document.documentElement : document.body;
var clientWidth = client.clientWidth;
var clientHeight = client.clientHeight;

для FF

Код


var clientWidth = self.innerWidth;
var clientHeight = self.innerHeight;

Вау!!! Спасибо, со многим помогли! ))
А на первый вопрос ничего не сможете сказать, у меня работа из-за этой проблемы простаивает (

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »