2012-01-04 14 views
12

Tôi không hoàn toàn thông thạo Đồ họa Máy tính và cần tạo bộ chọn màu làm công cụ javascript để nhúng vào trang HTML.Tạo Bộ chọn Màu, tương tự như Photoshop, sử dụng Javascript và HTML Canvas

Đầu tiên, và nhìn vào Photoshop, tôi nghĩ về bảng màu RGB như là ma trận ba chiều. Nỗ lực đầu tiên của tôi envolved:

<script type="text/javascript"> 
     var rgCanvas = document.createElement('canvas'); 
     rgCanvas.width = 256; 
     rgCanvas.height = 256; 
     rgCanvas.style.border = '3px solid black'; 
     for (g = 0; g < 256; g++){ 
      for (r = 0; r < 256; r++){ 
       var context = rgCanvas.getContext('2d'); 
       context.beginPath(); 
       context.moveTo(r,g); 
       context.strokeStyle = 'rgb(' + r + ', ' + g + ', 0)'; 
       context.lineTo(r+1,g+1); 
       context.stroke(); 
       context.closePath(); 
      } 
     } 

     var bCanvas = document.createElement('canvas'); 
     bCanvas.width = 20; 
     bCanvas.height = 256; 
     bCanvas.style.border = '3px solid black';  
     for (b = 0; b < 256; b++){ 
      var context = bCanvas.getContext('2d'); 
      context.beginPath(); 
      context.moveTo(0,b); 
      context.strokeStyle = 'rgb(' + 0 + ', ' + 0 + ', ' + b + ')'; 
      context.lineTo(20, b); 
      context.stroke(); 
      context.closePath(); 
     } 

     document.body.appendChild(rgCanvas); 
     document.body.appendChild(bCanvas); 
    </script> 

này dẫn đến một cái gì đó giống như
3D RGB color map

Suy nghĩ của tôi là đây là quá tuyến tính, so với những người tôi thấy trong Photoshop và trên web. Tôi muốn biết logic đằng sau ánh xạ màu trong bộ chọn như sau: photoshop color picker

Tôi không thực sự cần bản thân algorythms, tôi chủ yếu cố gắng hiểu logic.

Cảm ơn

+3

cảm ơn, nhưng tôi đang cố gắng xây dựng một từ đầu vì hai lý do: cho niềm vui của nó và chỉ sử dụng canvas, độc lập từ imgs –

+0

"vì niềm vui của nó" một phần chắc chắn là giá trị nó! :) Tôi cũng có thể làm điều đó. Chúc mừng. – techfoobar

Trả lời

6

Tôi thực hiện một bảng chọn màu canvas dựa một lần. Tôi đã làm điều đó vì hầu hết bộ chọn màu mà tôi tìm thấy trên web đều sử dụng quá nhiều hình ảnh tĩnh và tôi không muốn tạo thêm yêu cầu.

Tạo màu dựa trên số 10K javascript entry mà tôi đã tìm thấy. Tôi chỉ cố định một số lỗi và đã làm một số refactoring trên mã.

Tất cả những gì bạn phải làm là bao gồm <input type="color-picker" /> trong mã của mình và gọi số PICKER.bind_inputs() sau khi DOM được tải.

Đây là một jsFiddle với mã của tôi:

http://jsfiddle.net/mShET/1/

Gấu nhớ rằng HTML5 đặc điểm kỹ thuật already supports một màu hình thức chọn đầu vào. Nhưng hiện tại, chỉ Opera mới thực hiện nó.

+0

tôi thích của bạn, nhưng tôi thực sự cố gắng để hiểu làm thế nào RGB + HSB này hoạt động. –

+0

Tệ của tôi, tôi thực sự đã bỏ lỡ câu hỏi của bạn. Bạn đã kiểm tra bài viết trên Wikipedia về HSV chưa? http://en.wikipedia.org/wiki/HSL_and_HSV –

+0

đây là câu trả lời rất ấn tượng, hay. – Johnn5er

3

Để trả lời câu hỏi của bạn về logic đằng sau bộ chọn Photoshop: có vẻ như bộ chọn màu dựa trên không gian màu HSB. Màu sắc (H) được chọn bởi thanh trượt dọc bên phải, độ bão hòa (S) được chọn bởi trục ngang của vùng chọn màu và độ sáng (B) được chọn bởi trục dọc của vùng bộ chọn màu.

Để trích dẫn từ Wikipedia:

Mục đích ban đầu của HSL và HSV và các mô hình tương tự, và ứng dụng hiện tại phổ biến nhất của họ, là trong các công cụ lựa chọn màu sắc. Tại đơn giản nhất của họ, một số bộ chọn màu như vậy cung cấp ba thanh trượt, một cho mỗi thuộc tính. Tuy nhiên, hầu hết, hiển thị một slice hai chiều thông qua mô hình, cùng với một thanh trượt điều khiển slice cụ thể nào được hiển thị.

+0

Thậm chí bỏ qua sự thiếu kiến ​​thức của tôi trong lĩnh vực này, có một cái gì đó còn thiếu ở đó, theo ý kiến ​​của tôi. Nếu bạn điều khiển HxSxB theo cách ba chiều đó, thì RxGxB sẽ phát huy tác dụng ở đâu? –

+1

Tôi không thể bình luận về lý do tại sao họ đã thực hiện nó theo cách đó, tôi chỉ cần đi vào Photoshop và di chuyển bộ chọn lên và xuống, bên này sang bên kia và sau đó di chuyển thanh trượt bên phải. Nó chắc chắn điều khiển trực tiếp không gian màu HSB. Tôi đoán họ chỉ chuyển đổi màu được chọn vào tất cả các không gian màu khác được hiển thị, và ngược lại, chuyển đổi bất kỳ màu nào được nhập bằng tay trở lại HSB trước khi thay đổi bộ chọn màu để hiển thị màu. – Gareth

+0

cảm ơn, đó là chính xác những gì tôi đang cố gắng để hiểu, vì vậy tôi có thể xây dựng một algorythm từ đó kiến ​​thức –

0

Tôi đã tạo một dự án JavaScript, "MasterColorPicker", có 4 bộ chọn màu dựa trên canvas khác nhau.Nó đã cho tôi một vài tháng của cả hai đọc bài viết Wikipedia về "Color Wheel" cũng như "HSB" và "HSL" và "RGB", và cũng làm việc với các thuật toán trực tiếp khi tôi xây dựng mỗi bộ chọn màu từ đầu. Một điều tôi tập trung vào dự án này là đưa LOGIC của các không gian màu này vào một định dạng dễ hiểu và sử dụng. Hy vọng của tôi là việc sử dụng dự án sẽ giúp bạn hiểu được từng không gian màu. Theo như lập bản đồ từ một không gian khác, ví dụ, mối quan hệ giữa RGB và HSL, bạn phải thực sự mở rộng trí tưởng tượng 3D của bạn để bắt đầu điều đó. Đó là nơi tôi hy vọng dự án này có thể giúp bạn. Nhưng thực sự, không đập đầu vào tường trong nhiều năm cố gắng tìm ra các thuật toán này. Bên cạnh Wikipedia, xem:

http://www.easyrgb.com/index.php?X=MATH

Tất cả các công thức bạn có thể tiêu hóa. NGOẠI TRỪ: Wikipedia nói về "Chroma" trong một trong các bài viết của họ và nói không nhầm lẫn nó với "bão hòa". Dự án MasterColorPicker của tôi bổ sung thêm một không gian màu, màu sắc-sắc độ-xám (HCG), và mã nguồn cho dự án này ghi lại các công thức để chuyển đổi giữa HCG và RGB. Với HCG, bạn có thể tìm thấy tổ chức của các màu "Web-Safe" và "RainbowMeistro Color-Picker" trong dự án sẽ cung cấp cho bạn một hình ảnh rõ ràng về không gian màu đó. Bạn có thể thử dự án và tải về các tập tin Javascript/HTML để sử dụng nó trên hệ thống của bạn (mã nguồn mở và miễn phí) từ đây:

http://softmoon-webware.com/MasterColorPicker_instructions.php

Hòa bình!

Các vấn đề liên quan