Поиска плагина пост
Есть картинка примерно такого плана
Требуется: при наведении мыши на картинку рисовать вертикальную линию, привязанную к движению мыши (типа слайдера, только он графический). И чтобы по клику отдавал хотя бы координаты клика в системе координат картинки.
ЗЫ jquery. Можно написать, но ведь наверняка есть готовый.
jqcharts?
…
flot
удваиваю d3
если не надо прям кроссбраузерно, то положить сверху канвас и рисовать линию по mousemove — минут 10 работы. Искать дольше 🙂
канвас-то тут нафига?
потому что график — это img, рисуем поверх него канвас, а там уже и линии.
одна линия. по mousemove. задаешь массив соответствия y x и однопиксельный див двигаешь. или i. или strong. и работать будет везде.
но не модно, да, не тру, конечно.
короче я просто написал скрипт. Под ваши там фреймворки подгоните
просто с канвасом проще. Ну и у меня были подобные задачи, потом всегда надо еще что-то подрисовывать 🙂
вот это — проще, чем onmousemove = function () { div.offsetHeight = coords[event.x]; }?
чуви, ну напиши работающий скрипт, там и будем дискутировать. К тому же я не борюсь за премию простоты, я сделал как мне нравится.
не борюсь за премию простоты, я сделал как мне нравится
о чем и речь. а ты говоришь просто с канвасом проще 🙂
🙂
* Боже, прости меня, я обещал не вступать в полемику о коде *
Спасибо за ссылку на vanillajs, она твитор обошла несколько недель назад 🙂 Я как раз таки написал код без использования фреймворков.
То, что у тебя в примере, у меня тоже делается кортоко:
ctx.fillStyle = ‘rgba(255, 0, 0,.7)’;
ctx.fillRect(evt.offsetX, 0, 1, canvas.height);
Остальной код про клики, сохранения точки и очистки после убирания мыши с элемента.
В твоем решении я бы, кстати, двигал бэкграунд, чтобы обойтись одним элементом. Тебе же понадобится 2 элемента (чтобы нормально ловить клик и мув).
К тому же использовать канвас современно и модно, так что надо юзать. Решение с канвасом расширемое (я об этом уже писал) и если нет необходимости поддерживать старье — лучше юзать канвас.
Зануда мод ON
Из-за того, что ты двигаешь элемент, бразуер тратит большее время на отрисовку, нежели отрисовка линии в канвасе. *ссылка на то, как браузер отрисовывает и обсчитывает страницу*
А еще у тебя будет постоянный over/out, так как ты будешь двигать элемент под мышь. В моем случае элемент всегда один и все чистенько. Можно конечно, юзать enter/leave из jQuery, но это дополнительные if’ы (я говорю о реализации enter/leave), без которых можно обойтись.
Зануда мод OFF
Тем не менее, я понимаю твою точку зрения и даже принимаю ее. Если бы я писал код не для незнакомца и не хотел бы доставить себе максимум фана из задачки, может быть я выбрал бы и твое решение. А может и нет.
Спасибо за внимание, пойду выпью чаю.
я просто за минимализм 🙂
два элемента не обязательно, можно на контейнере ловить mousemove, он же бабблится. кажись.
с канвасом принципиально неудобна ровна одна штука — поддержка старого говна. но я бы уже из принципа хуй клал. уже, наверное, пора.
Миниализм это польза. Пойду тебе плюсики поставлю, ты хороший. К тому же пост про Бадди Холли мне понравился.
Эй, вожатый! Мы тут такую портянку накатали, а тебя не видно
хорошо, что напомнил, я там ссылочку пиздатую еще тиснул
я тоже его использую, в коммерческих проектах, т.к. у highcharts достаточно занятная лицензия.
highcharts не пробовал, а в d3 мне идея сама нравится.
погоди, а не тот ли ты Макс Никитин, который там студия все дела?
ну я работал в студии Лебедева, ага. А что?
ты к нам с Костиком в Ютинет приходил как-то 🙂
А, ого. Ну привет тогда 🙂
в мозилле последней под убунтой не работает, но идею я понял, пасип
В мозилле может совсем не работать, я в хроме писал. Рад помочь.
а ты все канвас, канвас… 🙂
Да не, там в моих кривых руках дело, а не в канвасе. Я не тестил, просто заготовку на коленке набросал