Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   color picker (https://javascript.ru/forum/events/28417-color-picker.html)

cyber 18.05.2012 19:10

color picker
 
хочу написать color picker на чистом js но не могу найти материала чтоб почитать хотя бы какой алгоритм у него , а то не могу понять как он работает.
так как хочу использовать для этого canvas возник вопрос а можно ли определить на канве какой цвет под курсором?

Kolyaj 18.05.2012 22:21

А зачем вам определять цвет под курсором? Вы же будете рисовать палитру на канвасе? По координатам будете определять цвет точки и выводить её. Значит по координатам вы сможете определить цвет, а значит вам достаточны координаты курсора, чтобы определить цвет под курсором.

cyber 25.05.2012 14:57

снова столкнулся с проблемой при создание color picker , создав шкалу оттенков — Hue , возникла проблема как определить цвет rgb под курсором.
в таком порядке у меня цвета на шкале :
hue = [[255,0,0],[255,255,0],[0,255,0],[0,255,255],[0,0,255],[255,0,255],[255,0,0]]

но вот в чем проблема как я понимаю что бы расчитать цвет rgb сначала нужно прибавлять значение ко второму параметру rgb , потом отнимать от первого , потом прибавлять к 3му ...
но вот как расчитать если перемещение сделано кликом ?
заранее спс=)

cyber 29.05.2012 14:33

Написал colorpicker, практически без изображений используется только одно, для построения шкалы Hue используется canvas, так вот и последнее изображение хочу заменить на canvas, но не получаться вот изображение

Оно состоит из 3х частей:

left - top - белый цвет
потом по левой стороне идет переход от белого к серому и от серого к черному.
bottom - черный цвет
и все что справа - прозрачное. Вот похожая реализация только там картинка: www.colorpicker.com

Помогите, пожалуста

dmitriymar 29.05.2012 14:59

не изобретать велосипед, а почитать про канву и её методы стоит

Deff 29.05.2012 15:02

cyber,
По приведённой ссылке выполнено без canvas - чисто по положению курсора ЫЫ

В большем Окне = скроллируемая гифка, в зависимости от скролла и курсора вычисляется цвет,
в малом длином(который справа) по высоте div - тож гифка с вычислением цвета по формуле, т.е чисто от местоположения курсора

cyber 29.05.2012 15:17

Цитата:

Сообщение от Deff (Сообщение 177349)
cyber,
По приведённой ссылке выполнено без canvas - чисто по положению курсора ЫЫ

В большем Окне = скроллируемая гифка, в зависимости от скролла и курсора вычисляется цвет,
в малом длином(который справа) по высоте div - тож гифка с вычислением цвета по формуле, т.е чисто от местоположения курсора

видно вы не поняли от идее определения цвета под курсором я отказался и сделал по похожему алгоритму.
я не могу на канве нарисовать такое изображение

Deff 29.05.2012 15:21

Цитата:

Сообщение от cyber
я не могу на канве нарисовать такое изображение

Ну обычно на канве не рисуют - а вставляют пиксельно с готовой картинки

cyber 29.05.2012 15:26

Цитата:

Сообщение от Deff (Сообщение 177353)
Ну обычно на канве не рисуют - а вставляют пиксельно с готовой картинки

на так всеравно поидее картинку прийдеться загружать?
просто градиентом сделать не получиться?

Deff 29.05.2012 15:48

Цитата:

Сообщение от cyber
на так всеравно поидее картинку прийдеться загружать?
просто градиентом сделать не получиться?

Ну есть плюс - что считываете цвет прямо с картинки (* http://ldalab.ru/post/vstavka_izobrazheniya_canvas.html
Или по приведенной Вами ссылке - нужна формула - для большой картинки
от скролла и координат курсора
- для длиной-высокой - от высоты
- в принципе, для узкой-правой - формула вычисляется легко - по 10 -12 точкам апроксимации

- для левой-широкой точек думаю до 1000 , т.к картинка достаточно большая http://www.colorpicker.com/images/co...bgGradient.png (Хотя может есть и готовая формула


Часовой пояс GMT +3, время: 18:07.