iT邦幫忙

DAY 24
7

Rails 的簡單任務系列 第 25

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

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 圖形。

參考連結:
國外線上畫出 Badges
http://www.web20badges.com/

網路上一堆 Badges 的資源蒐集
http://www.webresourcesdepot.com/web-20-badges-collection/

有創意的 Badges 的相關蒐集
http://www.webresourcesdepot.com/36-web-20-badges-to-inspire/


上一篇
[RoR] 有趣畫出 MonsterID 怪物分身
下一篇
[RoR] 簡單畫出 Web 2.0 特色圖形 Badges 徽章 標記 (續)
系列文
Rails 的簡單任務33

1 則留言

0

感恩分享咯!

我要留言

立即登入留言