iThome online | iThome Blog | iThome周刊訂閱

載入中...

twtw

IT邦初學者
9級

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

本文補充上一篇 http://ithelp.ithome.com.tw/question/10011881 因篇幅不夠,而把最重要的程式碼提供在本文之中。



收到書籤:發佈到twitter      
分享時間:2008-10-08 05:43:38

▼ ADVERTISEMENT ▼

分享內容(
8

編輯 app/controllers/demo_controller.rb 加入以下的 action

# 整個碼是以 http://rmagick.rubyforge.org/web2/web2.rb.html 為依據,而改成可在線上改字型、顏色的功能
def star
# 若沒有 text 的參數,用此預設值寫出字來,並把空格置換成換行符號
	if params['text'].nil?
		text = '可以\n\' \'空格\n來分行'
	else
		text = params['text'].gsub(' ','\n')
	end
# 預設的底色及字顏色
	rgbback1 = '#' + params['rgbback1'] ||= '#ff00ff'
	rgbback2 = '#' + params['rgbback2'] ||= '#3c7f05}'
	rgbfont = '#' + params['rgbfont'] ||= '#ffffff'

# 選擇何種字型輸出 
	case params['typefont']
	when '1'
	  typefont = 'wt003.ttf'
	when '2'
	  typefont = 'wt024.ttf'
	when '3'
	  typefont = 'wt014.ttf'
	when '4'
	  typefont = 'WCL-07.ttf'
	else
	  typefont = 'wt024.ttf'
	end

require 'lib/draw_star'

	black_star = Image.new(170,170)
	black_star.star(25, 60, 80, 'none', 'black')
	black_star.rotate!(-20)

	star_shadow = black_star.copy.blur_image(3, 2)
	shadow_mask = star_shadow.negate
	shadow_mask.matte = false
	star_shadow.matte = true
	star_shadow.composite!(shadow_mask, CenterGravity, CopyOpacityCompositeOp)
# 漸層色對照表
# http://web.forret.com/tools/rgb_gradient.asp
# 先以固定參數測試,沒問題後,再改為由 user 自行選擇各顏色
#grad = GradientFill.new(0, 0, black_star.columns, 0, "#99eb24", "#3c7f05}")
#grad = GradientFill.new(0, 0, black_star.columns, 0, "#ff00ff", "#3c7f05}")
	grad = GradientFill.new(0, 0, black_star.columns, 0, rgbback1 , rgbback2)
	green_grad = Image.new(black_star.columns, black_star.rows, grad)

	gc = Draw.new
	# 先以固定參數測試,沒問題後,再改為由 user 自行選擇各字型
	# 中文字型放在 /home/ironman/test/FONTS 目錄裡面
	#gc.font = 'FONTS/WCL-07.ttf'
	#gc.font = 'FONTS/wt024.ttf'
	gc.font = "FONTS/#{typefont}"
	gc.annotate(green_grad, 0, 0, 0, 0, text) do
		gc.gravity = CenterGravity
		gc.stroke = 'none'
		#gc.fill = 'yellow'
		gc.fill = rgbfont
		gc.pointsize = 24
		#gc.font_weight = BoldWeight
	end
green_grad.rotate!(-20)

	inverse_black_star = black_star.negate
	inverse_black_star.matte = false
	green_grad.matte = true
	green_star = green_grad.composite(inverse_black_star, CenterGravity, CopyOpacityCompositeOp)
# 如果要把圖寫成一個圖檔在 server 端上的話,用此語法且到此為止
#green_star.write('1.gif')
#
# 將圖檔以 blob 方式產生
      blob = green_star.to_blob() {
        self.format = 'PNG'
        self.depth = 8
      }
# 將所產生的 blob 寫到 chache 之中
      write_fragment(params, blob)
      fragment = blob
# 秀在畫面上或下載成圖型檔案的選項來決定輸出的型式
	if params['save'] == 'save'
		send_data fragment, :type => 'image/png', :disposition => 'attachment'
	else
		send_data fragment, :type => 'image/png', :disposition => 'inline'
	end

end

可再加強之處
字型大小的控制、判斷輸入的字串度來做斷行、整個圖形大小的控制、文字的角度控制、整個 Badge 的圖形細節控制、整個圖形的選擇。

參考資料:http://rmagick.rubyforge.org/web2/web2.html

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

目前沒有資料

回應

請填寫您的回應,長度限為1,000個字,回應不計點數,也不限使用次數



 

檢舉違規

違規事項:

*補充檢舉理由(可省略),字數不可超過100字

推薦

推薦理由:


*給回答者的鼓勵(可不填),字數不可超過100字

▼ ADVERTISEMENT ▼

熱門標籤

 cisco   crystal   exchange   it   java   javascript   linux   m-power   mail   microsoft   msnlib   msnp15   msnsdk   msn機器人   mysql   nas   oracle   outlook   pmi   pmp   raid   report   sap   server   smartquery   sql   vista   windows   xp   倍力   倍力資訊   免費軟體   國際專案管理師   報表   專案管理   微軟   有話大聲說   活動   省錢   網路   網路儲存   網路管理   網頁安全   網頁設計   資安   資料庫   資訊安全   防毒軟體   2003   2008