대화 형 채색을 제공하기 위해 선택할 수있는 웹 기술은 무엇입니까?

Question

고객이 자신의 웹 사이트에 기능을 추가하여 방문자가 단순한 선 그리기로 패널에서 색상을 지정할 수 있도록 요청했습니다.

웹 사이트 방문자가 선택할 수있는 제한된 팔레트를해야합니다 및 색상을 선택하고에로의 색상을 그리기 라인 내에서 모양을 클릭합니다 는 alt text http://i49.tinypic.com/2usg8d5.jpg

에만 4-5이있을 것입니다 이 선 그림들. 드로잉 자체는 대화 형 또는 유연하지 않아도되며 색칠 만 할 수 있습니다.

라인 드로잉은 매우 간단하며 방문자가 결과를 인쇄하거나 이메일로 보내려하지만 방문자의 선택을 저장하지 않아도됩니다.

간단한 간단한 것들. 대부분의 경우 정교한 웹 사이트에서이 작업이 수행되는 것을 볼 수 있는데 플래시로 끝났다고 가정합니다.

하지만 플래시는 유일한 방법입니다. 아니면 JQuery/Javascript 나 Silverlight 등으로 할 수 있습니까? 우리 팀의 지식에는 ASP.NET, HTML, CSS, Javascript가 포함됩니다. 플래시 경험 없음.

Answer 1

캔버스 또는 SVG를 사용하지 않고 이러한 종류의 모양을 그릴 수 없습니다. 그리고 나는 이것들에 대해 브라우저가 제공하는 지원에 대해 확신하지 못합니다.

당신은 다음

Processing js library

에서 나에 대한보고를 ntake ca를 캔버스에 대한 SVG를 갈 수 있다면

Raphaël—JavaScript Library

Answer 2

내 생각에 새 HTML 5 canvas element을 사용하면 개방적이고 표준을 준수하는 방식으로이 목표를 달성 할 수 있습니다.

참고 : 캔버스는 새로운 기능이며 최신 브라우저 릴리스 (예 : 최신 Safari, Firefox 또는 Chrome)에서만 지원됩니다.

Answer 3

내가 생각할 수있는 두 가지 방법이 있습니다 atm :

• 라인 드로잉을 투명 요소로 분할하고 이미지를 웹 사이트에 하나로 병합하도록 각 이미지를 절대적으로 배치합니다.
  를 사용하여 자바 스크립트는 "onclick을"로 그 부분의 미리 컬러 이미지를로드 (또는 ASP/PHP/어떤 서버 측과 컬러 버전을 생성합니다.
  확실하지가 깨끗하게 절대 위치 요소를 인쇄하는 것이 가능합니다.
• 플래시를 사용하면 간단한 작업이므로 경험이 없어도 1-2 평일에 작업을 수행 할 수 있습니다.

Answer 4

제한된 수의 선 그림과 제한된 수의 색상이있는 경우 가능한 모든 색상/섹션 조합을 미리 생성합니다. 각 영역을 투명한 GIF/PNG로 분리하고 position : absolute를 사용하여 합성하여 "양파 스킨"/ 애니메이션 셀 효과를 만듭니다. mage-map 코드 (또는 myimage.X/myimage.Y 매개 변수 또는 jQuery의 서버 측 구문 분석)를 사용하여 클릭 한 위치를 알아 내고 마우스 클릭 위치 아래의 이미지 섹션을 식별하고 해당 이미지 만 해당 버전으로 바꿉니다 선택한 색상으로