Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> javascript-создать вольтметр, произвольная графика, нужны примеры 
:(
    Опции темы
kyklovod
Дата 9.3.2008, 09:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Здравствуйте!!! 

Мне необходимо на javascript создать обычный вольтметр или ампреметр с реостатом. Т.е. есть какаято ручка реостата которую можно вращать с помощью "мыши" и при этом должна отклонятся стрелка на вольтметре. 
Т.к мои познания в javascript весьма ограничены, то прошу Вас подсказать на основе чего можно создать данные элементы. И про какие финкции нужно прочитать?
PM MAIL   Вверх
Sardar
Дата 9.3.2008, 14:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317
Тут всё работа в графике, значит лучше на флеше или аналогах. Наверное наиболее простая альтернатива в JS это canvas. Для IE-only можно использовать древние transform фильтры для поворота стрелки, но это IMHO самый худший вариант. Вроде всё, больше стрелку произвольно никак не повернуть...


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
ksnk
Дата 9.3.2008, 15:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386
Sardar, стрелку можно изобразить уровнем, вроде как модный "цифровой" вольтметр... Еще в меру идотский вариант - картинка со стрелкой на 45 градусов - ее можно сжимать по вертикали-горизонтали, угол регулировать.
Кстати, кроме canvas есть еще и графика на JavaScript, правда ее анимационные возможности мне неизвестны...


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
nerezus
Дата 9.3.2008, 15:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Вселенский отказник
****


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

Репутация: нет
Всего: 43
canvas работает на всех браузерах, кроме IE.
Собственно если рассчитывать на аудиторию айтишников, то это и не важно, но вот большинство "домашних" используют ie...

Это сообщение отредактировал(а) nerezus - 9.3.2008, 15:41


--------------------
Сообщество художников Artsociety.ru
PM MAIL WWW   Вверх
ksnk
Дата 9.3.2008, 15:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386
nerezus, сведения устарели...


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Sardar
Дата 9.3.2008, 15:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317
Цитата(ksnk @  9.3.2008,  14:32 Найти цитируемый пост)
Кстати, кроме canvas есть еще и графика на JavaScript, правда ее анимационные возможности мне неизвестны...

Это очень тормозной вариант, пожирающий на лисе массу памяти. Хотя пробегали здесь интересные примеры, даже MS Paint подобный граф. редактор (+ кривые Безье) был. Не рассматривал, т.к. фичу начинающему не реализовать smile


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
kyklovod
Дата 10.3.2008, 04:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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

Код

<HTML> 
<script> 
function line(x1,y1,x2,y2,n) 
{ 
var clinewidth="WIDTH="+n+"HEIGHT="+n 
var xstr="" 
var xstr0='<IMG SRC="point.bmp"'+clinewidth+'STYLE="position:absolute;' 
var k=(y2-y1)/(x2-x1) 
var x=x1 
while(x<=x2) 
{ 
xstr+=xstr0+';top:'+(y1+k*(x-x1))+';left:'+x+'">' 
x++ 
} 
document.write(xstr) 
} 
ine(10,10,100,100,5) 
</SCRIPT> 
</HTML> 
PM MAIL   Вверх
Sardar
Дата 10.3.2008, 15:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317
kyklovod, вместо картинок используй обычные div'ы, как сказал ksnk. Вообще привыкни реально читать ответы и ходить по ссылкам, это сбережёт тебе массу времени.

canvas по любому удобней. Что бы предотвратить флуд на тему как расставить туеву хучу div'ов в ряд лучше дам пример на canvas:

Код

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
    <head>
        <title>Рисуем стрелку</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ru" />
        
        <style type="text/css">
            .error {
                font-family: Verdana, Arial, sans-serif;
                font-size: 14px;
                color: darkred;
            }

            canvas {
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="error" id="volt" width="250" height="250">
                Обнови мля свой браузер, чувак!
            </div>

            <script type="text/javascript">
                
var dv = document.getElementById('volt');
try {
    var canvas = document.createElement('canvas');
    canvas.setAttribute('width', dv.getAttribute('width'));
    canvas.setAttribute('height', dv.getAttribute('height'));

    if(canvas.getContext) {
        dv.parentNode.replaceChild(canvas, dv);
        var wdt = canvas.offsetWidth;
        var hgt = canvas.offsetHeight;

        var perval = 0, dir = 5;
        setInterval(function() {
            if((perval += dir) >= 100) {
                perval = 100;
                dir = -dir;
            } else if(perval <= 0) {
                perval = 0;
                dir = -dir;
            }

            document.getElementById("dbg").innerHTML = (100-perval);

            var ctx = canvas.getContext('2d');
            ctx.save();
            ctx.clearRect(0,0,wdt, hgt);
            ctx.beginPath();
            ctx.translate(wdt/2, hgt/2);
            ctx.rotate(Math.PI*(100-perval)/100);
            ctx.strokeStyle = "#0c0c0c";
            ctx.lineWidth = 6;
            ctx.lineCap = "round";

            ctx.moveTo(0,0);
            ctx.lineTo(-wdt/4, 0);
            ctx.stroke();
            ctx.restore();
        }, 300);
    } //else canvas not supported
} catch(e) { /* canvas not supported */ }

            </script>
        </div>

        <div id="dbg"></div>
    </body>
</html>


Целиком как есть открой, осмысли код, сходи по ссылкам в этой теме, реши задачу за 1-2 часа.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0689 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.