[RoR] 簡單畫出 Web 2.0 特色圖形 Badges 徽章標記

DAY 24

Rails 的簡單任務系列第 25 篇

web 2.0 ruby 鐵人賽 ror rails image rmagick badges

2008-10-08 05:29:29

8753 瀏覽

Web2.0 以來常看到像這樣的圖示放在網頁的名顯之處，看起來醒目又有活力。利用今天的說明，就可以完全不需動用到 photoshop, photoimpact,... 等圖型處軟體就產生出，可以隨已意來調整顏色、字型像這樣子的圖形出來：

這個圖就是從 http://alpha.tagbible.net/demo 畫出來的，以下說明如何建置這線上畫出 Web 2.0 特色圖形的方法。
建置目標：中文 + 線上
這個圖形的中文名稱是什麼？英文名稱又是什麼？一開始也搞不清楚，資料就不大容易找，後來才知道叫 Badge 大概是徽章、標記的意思。網路上也有 <www.web20badges.com> 這個網站，可在線上畫出 Badges，可惜想要寫中文字就沒作用了。

然而網路上最多找到：利用 photoshop 來繪製 Badges 的教學 http://freephotoshopguides.com/interface-elements/web20-badges/ ，是可以把中文字寫在上面，但若要做在網路上隨時來改字、改顏色，同時又可給多人使用，就無法做到。

從 Rmagick 的教學範例改成線上版
後來看到了可以做成

的 Rmagick 教學 Web 2.0 Graphics Alpha Compositing - Part 2，只能說非常有趣的示範，而且是非常棒的教學，可詳細瞭解如何一步一步的做出來；而在此是用「偷吃步」的方式，直接擷取其中製作 Badges 的程式碼部份來用，製作成可以在線上製作可寫中文的 Badges 的網頁，只要依下面做法及貼上範例程式碼就可運作。

首先要先把中文的 TTF 字型檔，放在 /home/ironman/test/FONTS 之中，Rmagick 才有畫出中文字型的依據。
然後編輯一個 lib/draw_star.rb 做為畫出基本多角星狀圖型的子程序

# 這些碼是從 http://rmagick.rubyforge.org/web2/web2-4.html 貼來
require 'RMagick'
include Magick

module Magick
    class Draw
    def star(sides, inner_radius, outer_radius)
    theta = 0.0
    incr = Math::PI * 2.0 / sides
    half_incr = incr / 2.0
    points = []
    sides.times do
        points << outer_radius * Math::cos(theta)
        points << outer_radius * Math::sin(theta)
        points << inner_radius * Math::cos(theta + half_incr)
        points << inner_radius * Math::sin(theta + half_incr)
        theta += incr
        end
        polygon *points
        end
    end

    class Image
        def star(sides, inner_radius, outer_radius, stroke, fill)
            gc = Draw.new
            gc.translate columns/2.0, rows/2.0
            gc.fill fill
            gc.stroke stroke
            gc.star sides, inner_radius, outer_radius
            gc.draw self
        end
    end
end

接下來的碼雖然比較長，但程式的核心部份都是由上述的現成程式碼範例拿來用的，而再加上可以讓 user 做選擇字型、顏色、內容的機制。

程式碼比較長，放到下一篇，才不會超過 5000 字的篇幅。

製作輸入畫面
編輯 app/views/demo/index.html.erb ，做成可以填入文字內容、顏色、字型，輸出方式的選單：

<h3>畫出 Badges：</h3>
<% form_tag :action => 'star' do %>
文字內容：<%= text_field_tag :text , params[:text] %>（以空格為分行）<br />
圖底漸層色 1 #<input type="text" id="colorfield1" name="rgbback1" value="FF33FF"><br />
圖底漸層色 2 #<input type="text" id="colorfield2" name="rgbback2" value="CC3366"><br />
字的顏色 #<input type="text" id="colorfield3" name="rgbfont" value="FFFFFF"><br />
字型：<%= radio_button_tag 'typefont', 1 -%>粗明體（wt003.ttf）
<%= radio_button_tag 'typefont', 2, 'true' -%>中仿宋（wt024.ttf）
<%= radio_button_tag 'typefont', 3 -%>特黑體（wt014.ttf）
<%= radio_button_tag 'typefont', 4 -%>粗鋼體標準(WCL-07.ttf)<br />
要把圖存在自己的電腦上<%= check_box_tag('save','save') -%>
<br />
<%= submit_tag "畫出預覽", :name => nil %>
<% end %>

為何要有「把圖存在自己的電腦上」？因預設是以 inline 的方式出現，若直接從瀏覽器上選擇另存檔案時，反而存到一個沒有送出 text, color*, 字型等參數的回應結果，所以才做成，若預覽看沒問題後，才勾該選項再執行一次，才會存到電腦中。

用 Javascript 來選擇顏色
用手動填以什麼顏色來輸出，並不方便，而可利用現成的 javascript ，做成從色表直接選顏色，而自動填上 RGB 的顏色數字。

在此利用：ColorPicker 的 JavaScript 的工具來完成。
只要將上述的 app/views/demo/index.html.erb 最底下加入：

<script type="text/javascript">
// <![CDATA[
["1", "2", "3"].each(function(idx) {
  new Control.ColorPicker("colorfield" + idx, { IMAGE_BASE : "/img/" });
});
// ]]>
</script>

先做一個 public/colorpicker，然後在 ColorPicker 下載的程式碼解開，測試 http://SITE/colorpicker/colorPicker.htm 執行所附的範例是否沒問題，然後將其中的 img 目錄整個內容，複製到 public/img ，並且將該目錄中的 *.css 複製到 public/stylesheets 裡，*.js 複製到 public/javascripts 裡，但一定會覆蓋已存在裡面的一些檔；最好不要覆蓋，因 ColorPicker 所附的 .js 檔是比較舊的版本，若發現不能跳出色表或無法填上 RGB 的數字，當弄不清楚是什麼 .js 的問題時，就直接去抓新版的 scriptaculous 以及新版的 prototype 的檔來覆蓋，就不會有舊版本而無法運作的問題。
然後在 app/views/layouts/demo.html.erb 加入以下內容：

  <%= stylesheet_link_tag 'colorPicker.css' %>
  <%= javascript_include_tag :defaults %>
  <%= javascript_include_tag 'prototype.js' %>
  <%= javascript_include_tag 'scriptaculous.js' %>
  <%= javascript_include_tag 'yahoo.color.js' %>

  <%= javascript_include_tag 'colorPicker.js' %>

將這些需要的 css, javascript 寫到 layouts 的 template 之中，就會有作用。
圖示為 public/javascripts 中有的 javascript 檔名及大小：

最後完成可實際運作的線上畫 Badges 的網址放在 http://alpha.tagbible.net/demo，就可馬上做出可寫入中文字的 Badges 圖形。