За последние 24 часа нас посетили 21837 программистов и 1386 роботов. Сейчас ищут 649 программистов ...

Краскопульт.

Тема в разделе "Решения, алгоритмы", создана пользователем +Sten+, 22 фев 2008.

  1. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Простите, если не в тему попал. Решение никак не относится к PHP, а лишь к программированию на JS.

    Собственно, в последнее время стали популярными висивиг-редакторы. К сожалению, там нет возможности рисовать. С помощью JavaScript скрипта ниже можно рисовать такие схемки:
    [​IMG]

    Основано на принципе точеного рисунка. 1 точка - 1 слой с определёнными размерами и цветом. При передвижении мышки добавляются новые слои. Получается рисунок. Также можно вставлять надписи. После рисунок можно отправить на сервер.

    Вот тут можно посмотреть скрипт.
    [upd]Обновлённая версия[/upd]
    [upd]Версия с преобразованием в .png
    Исходник[/upd]

    Первый клик-начать рисовать, второй клик - закончить, и так по кругу. Чтобы поставить надпись нужно выбрать соответствующий инструмент. Закончить вставку надписи - выбрать инструмент кисть. Описываю это, так как юзабилити моего скрипта очень хромает =). Там по клику кнопки "сохранить" html код со всеми слоями передаётся PHP скрипту, который выводит этот код. Это просто пример. А вообще, "рисунок" можно формировать в попап окошечке и прикреплять к сообщению в форме основного окна.
     
  2. vasa_c

    vasa_c Активный пользователь

    С нами с:
    22 мар 2006
    Сообщения:
    1.760
    Симпатии:
    0
    Адрес:
    гор.Ленинград
    Это же кошмар, какой там DOM будет :)
    При перемещении по линии, можно не новый слой создавать, а изменять размеры предыдущего
     
  3. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    vasa_c
    Ага, я тоже подумывал об этом. Время появится и не изчезнет интерес, сделаю полноценный паинт с рисованием кругов и прямоугольников.
     
  4. antonn

    antonn Активный пользователь

    С нами с:
    10 июн 2007
    Сообщения:
    2.996
    Симпатии:
    0
  5. Elkaz

    Elkaz Старожил
    Команда форума Модератор

    С нами с:
    26 июн 2006
    Сообщения:
    3.373
    Симпатии:
    0
    Адрес:
    Баку, Азербайджан
    antonn
    Хорошо, но :))) Поддержим отечественного производителя :)
    В Опере достаточно глючно (долго)

    +Sten+
    Ждем апдейта :) Кстати: Сообщения: 256
     
  6. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Векторная графика =). Из другой оперры это.
    Elkaz
    Завтра днем поработаю мб. Потом залью бачок алкоголем и спать =)

    PS. Всех с наступающим !! [​IMG]
     
  7. S.t.A.M.

    S.t.A.M. Активный пользователь

    С нами с:
    10 сен 2007
    Сообщения:
    1.041
    Симпатии:
    0
    +Sten+, ИМХО - это очередное неудачное изобретение велосипеда! Сделай тоже самое стандартными средствами, предложенными antonn! - возможностей больше, затраты меньше, качество выше!
     
  8. Dagdamor

    Dagdamor Активный пользователь

    С нами с:
    4 фев 2006
    Сообщения:
    2.095
    Симпатии:
    1
    Адрес:
    Барнаул
    +Sten+
    Во флеше надо такие картинки рисовать. И весить будет меньше, и отображаться качественно. Картинка в первом сообщении - это же убожество какое-то, представь такое на странице офсайта какой-нибудь компании :(
     
  9. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Не нашел ничего подобного.
    По какому критерию ту библиотеку можно сравнивать с моим скриптом - дополнением к визуальному редактору? Чтобы было понятно для чего это нужно, скоро прикреплю скрипт к какому-нибудь простенькому висивигу.
    Ни на листе бумаги, ни в паинте, ни в фотошопе лично я не смог нарисовать бы лучше.
    Никто не будет рисовать банер в этом скрипте. Это существует как дополнения к висивигу.
    Пример 1. Сайт курьерской конторы. Клиент при заказе может написать адрес и нарисовать схемку.
    Пример 2. Форум электриков. Пользователь может прикрепить к сообщению простенькую электрическую схемку.
    Пример 3. Гостевая книга. Пользователь просто может нарисовать жопу, если ему ничто не нравится.
    ...
    Любой сайт на флеше выглядит более качественно и функционально. Почему же тогда лидерство за HTML и JS?

    От себя: Единственное, чего хватает - это инструмента "прямоугольник" и "ластика". Мои познания в JS пока не позволяют мне даже представить алгоритм ластика =(.

    upd: Ластик представить смог :)
     
  10. S.t.A.M.

    S.t.A.M. Активный пользователь

    С нами с:
    10 сен 2007
    Сообщения:
    1.041
    Симпатии:
    0
    Кстати, посомтри как это реализовано на форуме vkontakte.ru! там есть такая фича!
     
  11. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    S.t.A.M.
    Я правда не нашел там форума. Зарегестрировался даже. Искал большую кнопку форум, но не нашел. Можно ссылку?
     
  12. S.t.A.M.

    S.t.A.M. Активный пользователь

    С нами с:
    10 сен 2007
    Сообщения:
    1.041
    Симпатии:
    0
    http://vkontakte.ru/id1383399
    справа внизу - называется "стена"
    нажимаешь "все функции" -> "Граффити"
     
  13. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    S.t.A.M.
    Это офтоп, ибо флеш. Посмотреть как реализовано я никак несмогу.
    Кстати, возможностей меньше даже чем у карскопульта :)
     
  14. vasa_c

    vasa_c Активный пользователь

    С нами с:
    22 мар 2006
    Сообщения:
    1.760
    Симпатии:
    0
    Адрес:
    гор.Ленинград
    Вобще, если на старые браузеры не заморачиваться есть canvas и svg
     
  15. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Теперь еще и плагины для браузера пошли. Не понимаю я, что вы хотите мне доказать :)
    Мой скрипт просто рисуется. Никаких геометрических фигур на основе матиматического анализа действий он не делает.
    Посмотрите исходный код.
     
  16. S.t.A.M.

    S.t.A.M. Активный пользователь

    С нами с:
    10 сен 2007
    Сообщения:
    1.041
    Симпатии:
    0
    Все зависит от задачи!
    Если главное результат - то чем тебя не устраивает флэш?!
    Если просто хочешь сделать из г..на конфетку, то кому нужна конфета из г..на?!

    Мне кажется, что для тебя главное процесс, а не итог... ну тогда извращайся дальше - это далеко не предел...
    ИМХО тема себя исчерпала.
     
  17. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Есть что ответить, но не буду занудствовать.
    Показываю реализацию с прямоугольниками и изчезаю.
     
  18. vasa_c

    vasa_c Активный пользователь

    С нами с:
    22 мар 2006
    Сообщения:
    1.760
    Симпатии:
    0
    Адрес:
    гор.Ленинград
    Да, ладно. Забавная вещь. Как полноценный редактор, конечно, несерьезно. Но для выработки приемов простого кроссбраузерного рисования вполне подходит.
    Если кто придумал бы, как можно просто прочертить линию под углом, так вообще бы было здорово
     
  19. Штаны

    Штаны Guest

    А сколько места занимает рисунок в первом твоем посту (http://pistoletov.net/dif/drow/5.jpg) когда он уходит на сервер, т.е. сколько трафика на него уйдет у пользователя? После сжатия он конечно стал маленький, всего 16 кб…
     
  20. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Штаны
    Слово рисунок взято в кавычки, потому что это вовсе не рисунок в компьютерном понимании слова рисунок, а рисунок как "изображение чего-либо". Вставленый рисунок - это скриншот с моего рабочего стола. А скрипт формирует код типа:
    Код (Text):
    1. <DIV STYLE='position: absolute; left: 328px; top: 132px; width: 5px; height: 5px; background-attachment: scroll; background-repeat: repeat; background-position: 0% 0%; background-color: #ff0000; background-image: none; overflow: hidden'></DIV><DIV STYLE='position: absolute; left: 328px; top: 133px; width:
    и отправляет его на сервер. Получается некий "рисунок", который можно вставить не как <img src=, а как <iframe src=.
    JS не умеет работать с форматами изображений.
    Вес того изображения около 100 - 200кб. C прямоугольниками во 2м варианте во много раз меньше.

    PS. У меня появилась безумная идея. О отправке на сервер координатов точек, а не дивов. А в PHP попиксельно прорисовывать всё и создавать png рисунки =)
     
  21. Штаны

    Штаны Guest

    А я думал изначально так и задумывалось. Так что ждем продолжения! Нормальная задумка!
     
  22. Anonymous

    Anonymous Guest

    Давай, давай... придумай свой SVG...
     
  23. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Не хотел отвечать, но..
    По каким критериям можно сравнивать SVG (xml формат векторной графики) и мой скрипт (создание точечных рисунков)?
    Ну вот это в svg:
    Код (Text):
    1. <rect x="0" y="0" width="5" height="5" fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5"/>
    в моем варианте делается как див. Результат точно такой же, но 100% отображается во всех браузерах. Почему нужно применять svg, когда просто нужно прорисовать по точкам некий силуэт? Не говорю уже про надписи. Вставил в див и готово. Я же не пытаюсь сделать реализацию "Компаса" в JS. Мой скрипт не создает никакой векторной графики на HTML. Задача - просто нарисовать схемку.
     
  24. +Sten+

    +Sten+ Активный пользователь

    С нами с:
    27 авг 2007
    Сообщения:
    978
    Симпатии:
    0
    Можете дальше называть меня психом, но я сделал переконвертирование рисунков на JS в PNG.
    Посмотреть можно тут.

    Там созданное в поле изображение передаётся на сервер в виде строки типа s;1;2; и так много символов. Сервер обрабатывает его и выводит в браузер как png рисунок. Этот рисунок можно сохранить в любом формате (jpg, gif, png).

    Пока всё очень криво, выкладываю просто чтобы показать реальность такого. Как только доработаю всё выложу исходники и прочее.

    ps. Наиболее корректно работает в ИЕ.
     
  25. Adil

    Adil Активный пользователь

    С нами с:
    21 сен 2006
    Сообщения:
    280
    Симпатии:
    0
    Ластика не хватает...