Приветствую всех читателей. Попробуем продолжить нашу затею, начало которой здесь.
Итак, мы имеем кастомную View с разноцветным кружочком, из которого теперь необходимо выдернуть выбранный пользователем цвет. Перед тем как окунуться в дебри расчетов давайте для начала организуем какие-нибудь маркеры-указатели выбранного цвета. Читать полностью »
Снова доброго времени суток всем. В этой статье хотелось бы продолжить тему кастомных View, а именно диалога выбора цвета.
Небольшое отступление: Предвосхищая негативные отзывы, хочу заранее предупредить — статья рассчитана на новичков в программировании. Начиная знакомиться с разработкой под Андроид, я столкнулся (да и сейчас регулярно сталкиваюсь) с интересным фактом: в интернете воз и маленькая тележка информации посвящена установке и настройке Эклипса, потом красочно описывают, как нажать New – Android Application Project и получить свой первый ХеллоВорд. А потом сразу сервисы – потоки – биндинги – хендлеры и всякие прочие базы данных. Посередине – пустота. Как раз эту пустоту я и пытаюсь заполнить, облегчить переход от чайника хотя бы к кофейнику так сказать. Очень надеюсь, что помогу кому-то найти нечто нужное без лишних мучений. И не могу в очередной раз не отметить еще одну особенность Рунета: Не так давно в очередной раз наступил на грабли столкнулся я с проблемой, можно сказать смешной для знающего человека, но для меня незнакомой. Довольно быстро нашел решение на каком-то англоязычном форуме. Топик состоял из двух постов. Вопрос и ответ. Все! Если кому интересно будет – найду ссылку. Да, кстати, возникший вопрос относится и к данной статье, так что дальше я это отмечу. Так вот, а посмотреть на наши форумы – жуть. Каждый вопрос порождает несколько страниц флуда на тему «читай документацию», ответа же в большинстве случаев так и нет.
Ну ладно, извините за многословие, наболело, так сказать. Продолжим под катом.
Читать полностью »
Это перевод третьей части серии статей об открытой Javascript canvas библиотеке Fabric.js.
Мы затронули основную часть базового материала о Fabric в первой и второй частях этой серии. В этой статье будет представлен более углубленный материал.
Читать полностью »
О том, как я решил сделать собственный векторный редактор на JavaScript, я писал ранее. К сожалению, выложить полноценный редактор по ряду причин не представляется возможным, поэтому я решил написать небольшой плагин, который позволяет создавать и редактировать контуры, привязывая их к любому отдельному изображению на странице. Разумеется, основной «фишкой» редактора остается возможность полуавтоматического создания контура по принципу инструмента «волшебная палочка» в Photoshop, то есть: кликнул на изображение и получил готовый контур, который затем можно корректировать.
Плагин написан на JavaScript + jQuery, работа с изображением происходит в CANVAS элементе.
Все-таки мне не хотелось бы расписывать в подробностях те проблемы, которые у меня возникли в процессе написания редактора, часть из них я уже отметил в предыдущей статье, поэтому сразу к делу:
Читать полностью »
Заказчиком была поставлена следующая задача – показывать на картах торговых центров статистику по посещаемости магазинов, использованию эскалаторов, лифтов и коридоров. Карту нужно уметь размечать — указывать точки, где показывать статистику и какую конкретно статистику. И, естественно, показывать эту статистику для выбранного периода времени и фильтров. Откуда берутся и где хранятся данные – отдельная большая тема, за скобками данной статьи.
Раз плюнуть, скажете вы – берём векторную карту торгового центра в svg и дополняем её данными. Красиво, современно, быстро. Даже есть готовые решения типа jVectorMap.
Только вот векторных карт нужных торговых центров нет, есть только те картинки, что предоставлены владельцами центров. Абсолютно разные по стилистике и наполнению. А большое количество центров (порядка 300) не позволяет перерисовать их в вектора быстро и дёшево. Да и добавление новых торговых центров потребует дополнительной работы.
Поэтому было решено использовать HTML5 canvas и для разметки карты, и для показа данных.
Работать напрямую с canvas API не очень удобно, но уже понапридумана куча инструментов для облегчения работы. Требования к фреймворку в нашем случае:
Под рассмотрение попали fabric.js, EaselJS, Raphaël, Paper.js и Processing.js.
Всем требованиям удовлетворяет fabric.js. Учитывая имеющийся небольшой опыт работы с ним, было решено взять его за основу. Далее в примерах использовалась версия 1.4.4.
Доброго дня всем в эту пятницу.
Уже скоро выходные, предлагаю отвлечься от дел насущных и понастольгировать.
Я удивлен, что этот интереснейший проект оказался удостоен, вроде бы, лишь одного комментария на хабре + упоминания о Windows 1.01.
Для тех, кто не знает, поясняю — это эмулятор разных старых платформ в браузере (думаю скоро Windows XP увидим портированную на кофескрипт).
С момента того поста тут уже появились куча интересного.
Читать полностью »
Однажды мне попалась на глаза карточная игра HeartStone от Blizzard. Играя в нее пришла мысль, что подобные вещи можно создавать используя технологии html5, что позволит им быть кроссплатфорсенными. На мой взгляд, подобные вещи могут делать люди, до сих пор занимающиеся только созданием сайтов.
Итак, что мы имеем:
Собственно, все. Этого вполне хватит, чтобы осуществить задуманное.
Читать полностью »
Если вы когда-нибудь сталкивались с задачей ресайза картинок в браузере, то вы наверное знаете, что это очень просто. В любом современном браузере есть такой элемент, как канва. На него можно нанести изображение, задав желаемые размеры. Пять строчек кода и картинка готова:
function resize(img, w, h) {
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
canvas.getContext('2d').drawImage(img, 0, 0, w, h);
return canvas;
}
Потом с помощью этой же канвы картинку можно сохранить в JPEG и, например, отправить на сервер. В чем же тут подвох? А дело в качестве получившегося изображения. Если вы поставите рядом такую канву и обычный элемент <img>, в который загружена эта же картинка (исходник, 4 Мб), то вы увидите разницу.
Приветствую. Представляю сообществу проект Konva.js.
Konva.js — это фреймворк, который позволяет работать c canvas 2d в объектном стиле с поддержкой событий.
Кратко список особенностей выглядит так:
Далее подробней рассмотрим возможности фреймворка с примерами кода.
Читать полностью »
В свободное время решил заняться интересным делом. В голову пришла идея написать небольшой фреймворк для canvas (хоть и велосипед, но тоже интересно). Дело дошло до кривых Безье.
Решил как-то приукрасить встроенное решение, но у него есть один недостаток. Проблема в том, что функции квадратичной и кубической кривой выдают уже готовый результат, не подлежащий редактированию. Мне же требовалось обрисовывать кривую постепенно или обрисовать только часть кривой, не говоря уже о том, что хотелось обрисовывать кривые большего порядка, нежели 2-3 степени.
Читать полностью »
