Какие веб-технологии позволяют предлагать интерактивную раскраску?

Question

Клиент попросил нас добавить функцию на его сайт, чтобы посетители могли покрасить в панели простым рисованием линии.

На сайте посетитель будет иметь ограниченную палитру, чтобы выбрать из и выбрать цвет и нажмите кнопку в форме в пределах линии чертежа, чтобы цвет его, как в: alt text http://i49.tinypic.com/2usg8d5.jpg

Там будет только четыре или пять из эти чертежи. Сами чертежи не обязательно должны быть интерактивными или гибкими, только окраска.

Линейные чертежи будут очень простыми, и нам не нужно сохранять выбор посетителя, хотя посетитель захочет распечатать или отправить по электронной почте результат.

Простые простые вещи. В большинстве случаев, когда вы видите это на сложных веб-сайтах, я предполагаю, что это сделано с помощью Flash.

Но есть ли Flash единственный способ пойти? Или это можно сделать с помощью JQuery/Javascript или Silverlight или что-то еще? Знания нашей команды охватывают ASP.NET, HTML, CSS, Javascript. Нет опыта Flash.

Answer 1

Вы не можете рисовать эти формы без использования холста или SVG. И я не уверен в поддержке браузеров.

Если вы можете пойти на холсте, то вы ча Ntake взглянуть на

Processing js library

или для SVG

Raphaël—JavaScript Library

Answer 2

Я предполагаю, что вы можете использовать новый HTML 5 canvas element для достижения этой цели открытым, стандартным образом.

Примечание: холст является новой функцией и поддерживается только в последних версиях браузеров (например, последние версии Safari, Firefox или Chrome).

Answer 3

Есть только два способа я могу думать от atm:

• Разделите чертежи линий на цветные элементы и покажите каждое изображение, абсолютно подходящее для объединения изображений в одно на веб-сайте.
  Использование Javascript для загрузки предварительно цветное изображение той части с «OnClick» (или генерировать цветную версию с ASP/PHP/любой стороне сервера.
  Не уверен, если это возможно, чтобы напечатать абсолютное расположенные элементы чисто.
• Использование вспышки, это просто есть, так что даже без опыта, вы должны быть в состоянии сделать это в течение 1-2 рабочих дней.

Answer 4

Если у вас есть конечное число штриховых рисунков, а также ограниченное количество цветов, вы могли бы просто предварительно сгенерируйте каждую возможную комбинацию цветов/секций - изолируйте каждую область как прозрачный GIF/PNG и составьте их, используя положение: абсолютное, чтобы создать эффект «луковой кожи»/анимации cel. Используйте некоторые старые HTML-файлы старой школы код мага-карты (или анализ на стороне сервера параметров myimage.X/myimage.Y или jQuery), чтобы определить, где они щелкнули, определить раздел изображения под местом щелчка мыши и заменить это изображение только соответствующей версией в их выбранном цвете.