VPF::Градиент - Форум программистов

eugine_s

Дата 14.5.2008, 13:48 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 581
Регистрация: 14.11.2007
Где: Киев

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

Пытаюсь нарисовать градиент.
Все вроде бы рисуется, но проблема в том, что нет плавности между переходами цветов (картинка с градиентом в аттаче).

Код, которым я рисую градиент:
x, y, width, height - область для градиента
startColor, endColor - начальный/конечный цвет градиента

Код


    public static void drawGradient(Graphics g, int startColor, int endColor,
                                    int x, int y, int width, int height)
    {
        int redStart, redEnd;
        int blueStart, blueEnd;
        int greenStart, greenEnd;
        
        int redStep, blueStep, greenStep;
        int color;

        redStart = startColor >> 16 & 0xFF;
        greenStart = startColor >> 8 & 0xFF;
        blueStart = startColor >> 0 & 0xFF;

        redEnd = endColor >> 16 & 0xFF;
        greenEnd = endColor >> 8 & 0xFF;
        blueEnd = endColor >> 0 & 0xFF;

        redStep = (redEnd - redStart);
        greenStep = (greenEnd - greenStart);
        blueStep = (blueEnd - blueStart);

        for (int i = 0; i < height; i++)
        {
            color = (redStart + (i*redStep)/height) << 16 | 
                    (greenStart + (i*greenStep)/height) << 8 |
                    (blueStart + (i*blueStep)/height) << 0;
            g.setColor(color);
            g.drawLine(x, y + i, width, y + i);
        }
    }

Присоединённый файл ( Кол-во скачиваний: 34 )

gradient.png 0,62 Kb

Platon

Дата 14.5.2008, 14:06 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1801
Регистрация: 25.4.2006

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

Попробуй так:

Код


(int)(i*(redStep/(double)height))

Это сообщение отредактировал(а) Platon - 14.5.2008, 14:13

--------------------

Блог на винграде
Мой Блог о Java
For Java developers... only

eugine_s

Дата 14.5.2008, 14:34 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 581
Регистрация: 14.11.2007
Где: Киев

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

Platon, Результат точно такой же.

Есть предположение, что экран просто не может отобразить все цвета, поэтому заменяет этот цвет на какой-то другой.

Цвет, который я могу указать (в качестве аргумента g.setColor ) лежит в диапозоне от нуля до 0xFFFFFF = а это 16М цветов, телефон же на экране которого я рисую градиент может отобразить только 260К цветов.

Может в этом проблема? Если да, то как эту проблему можно решить? (а ее можно решить, так как фотошопу достаточно 128 цветов чтобы отобразить нормальный градиент на картинке размером 240х320)

Dummy

Дата 14.5.2008, 15:15 (ссылка)

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

Загрузка ...

Опытный

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

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

Если градиентную картинку в 128 цветах, сделанную в фотошопе, закинуть на этот телефон, то она отображается нормально, без скачков цвета? А на WTK как выглядит градиент, обсчитанный по твоей процедуре?

Если в обоих этих случаях картинка выглядит хорошо - надо подумать, как изменить алгоритм обсчета. Если нет - значит, действительно проблемы с цветопередачей экрана. Платформа, например, может использовать схему кодирования цвета типа 565, 555 и т. д., так что при конвертации происходит потеря части информации о цвете.

В свое время мы тоже рисовали градиент (правда, чуть-чуть по иной формуле его обсчитывали), так на симуляторе под Win32 он выглядел неплохо, а вот на железке - довольно мерзко, с такими же скачками. Дело тогда было в экране. Симулятор и реальная платформа просто по-разному кодировали цвет.

Dancer

Дата 14.5.2008, 15:24 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 537
Регистрация: 29.4.2005
Где: Nizhniy Novgorod

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

Код


color = (redStart + (i*redStep)/height) << 16 | 
                    (greenStart + (i*greenStep)/height) << 8 |
                    (blueStart + (i*blueStep)/height) << 0;

Код


color = (redStart *(height-i) + (i*redStep)/height) << 16 | 
                    (greenStart *(height-i) + (i*greenStep)/height) << 8 |
                    (blueStart *(height-i) + (i*blueStep)/height) << 0;

--------------------

У программистов есть великая тайна: всё, что только можно, было давно кем-то когда-то написано. Разработчику только нужно знать в какое место кода какие строчки вставить! smile

eugine_s

Дата 14.5.2008, 15:44 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 581
Регистрация: 14.11.2007
Где: Киев

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

Цитата(Dummy @ 14.5.2008, 15:15

)

Если градиентную картинку в 128 цветах, сделанную в фотошопе, закинуть на этот телефон, то она отображается нормально, без скачков цвета?

Проверил, точно такие же скачки.

Цитата(Dummy @ 14.5.2008, 15:15

)

А на WTK как выглядит градиент, обсчитанный по твоей процедуре?

Прикрепленный файл в первом сообщении - это скрин с WTK (естественно, что проверял все это и на телефоне).

Цитата(Dummy @ 14.5.2008, 15:15

)

Если нет - значит, действительно проблемы с цветопередачей экрана.

Да, скорее всего так и есть.
Еще проверю на телефоне с экраном 16М цветов, потом отпишу результат.

Dancer, результат точно такой же :(
Я уже другие способы (и с float и с эмуляцией float), результат всегда был один и тот же.

DarK__AngeL

Дата 14.5.2008, 16:13 (ссылка)

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

Загрузка ...

Новичок

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

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

попробуй отрисовать рисунок 128*24.....думаю результат будет другим, т.к. высота всего 24 пикселя.....

eugine_s

Дата 14.5.2008, 18:56 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 581
Регистрация: 14.11.2007
Где: Киев

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

Цитата(DarK__AngeL @ 14.5.2008, 16:13

)

попробуй отрисовать рисунок 128*24.....думаю результат будет другим, т.к. высота всего 24 пикселя.....

А что мне это даст, если мне нужно целый экран зарисовать?
Почему получается полосками, я знаю. Как решить проблему - нет.

Цитата(eugine_s @ 14.5.2008, 15:44

)

Да, скорее всего так и есть.
Еще проверю на телефоне с экраном 16М цветов, потом отпишу результат.

Проверил, на Nokia 6131 (16М цветов) не идеально конечно, но скачков таких нет.

DarK__AngeL

Дата 14.5.2008, 19:11 (ссылка)

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

Загрузка ...

Новичок

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

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

сомневаюсь, что на обычных телефонах это получится реализовать.....лучше сделать тогда смешивание цветов, а не изменение яркости.....хотя я это на весь экран не отрисовывал, но рисунок 50*200 нормально получился....

eugine_s

Дата 14.5.2008, 19:32 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 581
Регистрация: 14.11.2007
Где: Киев

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

Цитата(DarK__AngeL @ 14.5.2008, 19:11

)

лучше сделать тогда смешивание цветов, а не изменение яркости

Что-то я не заметил где я делаю изменение яркости.

Что значит смешивание цветов?

math64

Дата 15.5.2008, 08:05 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2505
Регистрация: 12.4.2007

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

Цитата(eugine_s @ 14.5.2008, 19:32

)

Что значит смешивание цветов?

Рисовать по точкам, а не по строчкам, в каждой строчке использовать несколько цветов.
Воспользуйся Graphics.getDisplayColor() чтобы определить какой цвет будет отображаться в действительности.

Это сообщение отредактировал(а) math64 - 15.5.2008, 08:11

Dancer

Дата 15.5.2008, 11:20 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 537
Регистрация: 29.4.2005
Где: Nizhniy Novgorod

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

Код


int srcColor = 0x000000;
int dstColor = 0xFFFFFF;
int x = 0;
int y = 0;
int width = 100;
int height = 100;
int x2 = x + width - 1;

                setColor(srcColor);
                int r = getRedComponent();
                int g = getGreenComponent();
                int b = getBlueComponent();

                setColor(dstColor);
                int r1 = getRedComponent();
                int g1 = getGreenComponent();
                int b1 = getBlueComponent();

                int blend = height;
                int semiHeight = (--height) >> 1;
                for(int i = 0; i != height + 1; ++i, ++y) {
                    --blend;
                    setColor(
                        ((r * blend + r1 * i) + semiHeight) / height,
                        ((g * blend + g1 * i) + semiHeight) / height,
                        ((b * blend + b1 * i) + semiHeight) / height);
                    drawLine(x, y, x2, y);
               }

--------------------

math64

Дата 15.5.2008, 13:28 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2505
Регистрация: 12.4.2007

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

Вот смешивание начального и конечного цветов:

Код


import java.util.Random;
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;

public class Gradient extends MIDlet {
  int startColor = 0;
  int endColor = 0xFFFFFF;
  Random r = new Random();

  class GradientCanvas extends Canvas {
    protected void paint(Graphics g) {
      int w = getWidth();
      int h = getHeight();
      int wh = w*h;
      int[] rgb = new int[wh];
      for (int i = 0, iw = 0; i < h; i++, iw += w) {
        int n = i*w/h;
        for (int j = 0; j < w; j++) {
          rgb[iw+j] = j < n ? endColor : startColor;
        }
        shuffle(rgb, iw, w);
      }
      g.drawRGB(rgb, 0, w, 0, 0, w, h, false);
    }

  }

  public void startApp() {
    Display.getDisplay(this).setCurrent(new GradientCanvas());
  }

  public void pauseApp() {
  }

  public void destroyApp(boolean unconditional) {
  }

  private void shuffle(int[] arr, int start, int cnt) {
    for (int i = 0; i < cnt; i++) {
      int rnd = (r.nextInt()&0x7FFFFFFF) % (cnt - i) + i;
      int tmp = arr[start+rnd];
      arr[start+rnd] = arr[start+i];
      arr[start+i] = tmp;
    }
  }
}

eugine_s

Дата 15.5.2008, 14:18 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 581
Регистрация: 14.11.2007
Где: Киев

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

Интересное решение, спасибо. (+1)

DarK__AngeL

Дата 15.5.2008, 14:30 (ссылка)

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

Загрузка ...

Новичок

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

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

Цитата(eugine_s @ 14.5.2008, 19:32)

Цитата(DarK__AngeL @ 14.5.2008, 19:11

)

лучше сделать тогда смешивание цветов, а не изменение яркости

Что-то я не заметил где я делаю изменение яркости.

увеличиваея значение красного, зеленого и синего, ты приближаешь цвет к 0xFFFFFF => увеличиваешь яркость......хотя, наверное, у мя о5 ассоциации с твоими не совпадают smile

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