Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.04.2013, 10:56
Интересующийся
Отправить личное сообщение для sitesv Посмотреть профиль Найти все сообщения от sitesv
 
Регистрация: 08.04.2013
Сообщений: 23

Chart: быстрая прорисовка
Доброго дня, форумчане!
Нахожусь в поиске компонента/технологии для веб-странички, для отображения порций по 1024 точки со скоростью 2 раза в секунду... Попробовал компонент Scatter Chart от Wijmo, но одна итерация прорисовки с отключенной анимацией и др. занимает около 2-3 секунд, это очень много... Предполагаю, что с другими виджитами такая же проблема.
Подскажите, что я могу использовать что своей цели?
Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 16.04.2013, 16:51
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

Vanilla JS, либо обновлять всю страницу/фрейм каждых 2сек
Ответить с цитированием
  #3 (permalink)  
Старый 16.04.2013, 19:19
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,577

<body>
<script type="text/javascript">var canvas = document.createElement('canvas');
canvas.setAttribute('width',32);
canvas.setAttribute('height',32);
var div = document.createElement('div');
document.body.appendChild(canvas);
document.body.appendChild(div);

var ctx = canvas.getContext('2d'),
        imageData = ctx.createImageData(32,32),
        data = imageData.data,
        l = 1024* 4;
(function randomDraw(){
    var i = l, time = Date.now();
    while(i--) data[i] = Math.floor(Math.random()*256);
    ctx.putImageData(imageData,0,0);

    div.innerHTML = 'Скорость отрисовки: ~' + (-time + (time = Date.now())) + 'ms';
    setTimeout(randomDraw,50)
}())</script>
</body>
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 20.04.2013, 14:11
Интересующийся
Отправить личное сообщение для sitesv Посмотреть профиль Найти все сообщения от sitesv
 
Регистрация: 08.04.2013
Сообщений: 23

Спасибо за код.
Но он у меня почему-то не работает
Ответить с цитированием
  #5 (permalink)  
Старый 20.04.2013, 22:58
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,577

sitesv, ff, chrome, ie9 - работает.
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 21.04.2013, 00:54
Интересующийся
Отправить личное сообщение для sitesv Посмотреть профиль Найти все сообщения от sitesv
 
Регистрация: 08.04.2013
Сообщений: 23

Круто! Работает!! СПАСИИИБО!
А есть ли возможность прорисовывать именно по координатам [x,y] черные точки, ну конечно, пиксель маловато, побоооольше бы размер?
Ответить с цитированием
  #7 (permalink)  
Старый 21.04.2013, 01:02
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,577

Сказано было 1024 - сделано было 1024.(32х32)

Возмржность есть, читайте информацию по canvas - там всё элементарно.

Немного упростил:
<body>
<script type="text/javascript">
var canvas = document.createElement('canvas');
    canvas.setAttribute('width',332); //задаём ширину
    canvas.setAttribute('height',132); //задаём высоту(размер изменяется в данном случае только здесь, потому можете ставить любые значения)
    canvas.setAttribute('style', 'float:left');
var div = document.createElement('div');
document.body.appendChild(canvas);
document.body.appendChild(div);
 
var ctx = canvas.getContext('2d'),
        imageData = ctx.createImageData(canvas.width,canvas.height),
        data = imageData.data, //массив всех точек изображения r,g,b,a ,r1,g1,b1,a1 ... 
        l = data.length;
(function randomDraw(){
    var i = l, time = Date.now();
    while(i--) {
        data[i] = Math.floor(Math.random()*256); //по порядку каждому каналу каждой точки изображения ставим произвольное значение 0...255
    }

    ctx.putImageData(imageData,0,0);
 
    div.innerHTML = 'Скорость отрисовки: ~' + (-time + (time = Date.now())) + 'ms';
    setTimeout(randomDraw,50)
}())</script>
</body>


Если вам надо работать с примитивами, а не изображением то лучше не использовать прямую работу с пикселями, т.к. затратно, вместо этого есть встроенные команды рисования canvas.
__________________
29375, 35

Последний раз редактировалось Aetae, 21.04.2013 в 01:37.
Ответить с цитированием
  #8 (permalink)  
Старый 21.04.2013, 01:03
Интересующийся
Отправить личное сообщение для sitesv Посмотреть профиль Найти все сообщения от sitesv
 
Регистрация: 08.04.2013
Сообщений: 23

Спасибо еще раз! Буду читать
Ответить с цитированием
  #9 (permalink)  
Старый 21.04.2013, 18:16
Интересующийся
Отправить личное сообщение для sitesv Посмотреть профиль Найти все сообщения от sitesv
 
Регистрация: 08.04.2013
Сообщений: 23

Небольшой вопрос: а почему Вы ставите скобку перед function и ()) перед </script>
Без них не работает, но я не вижу к чему они относятся
Ответить с цитированием
  #10 (permalink)  
Старый 21.04.2013, 22:10
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 04.06.2012
Сообщений: 513

sitesv, функция с вызовом на месте
__________________
★ ²º¹³ ☆
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Долгая перерисовка Chart shepard90 ExtJS 2 17.03.2013 14:41
Данные из store не успевают попадать в chart kalya ExtJS 0 02.11.2011 14:14
Вертикальные линии грида в Google Area Chart fog Элементы интерфейса 2 14.06.2011 15:48
Template CMS - маленькая и быстрая CMS Awilum Ваши сайты и скрипты 3 22.09.2010 23:19
Google Chart API mycoding Оффтопик 0 14.07.2010 11:22