iT邦幫忙

DAY 24
12

Rails 的簡單任務系列 第 26

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

  • 分享至 

  • xImage
  •  

本文補充上一篇 http://ithelp.ithome.com.tw/question/10011881 因篇幅不夠,而把最重要的程式碼提供在本文之中。
編輯 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 的圖形細節控制、整個圖形的選擇。


上一篇
[RoR] 簡單畫出 Web 2.0 特色圖形 Badges 徽章 標記
下一篇
[RoR] 簡單建置 captcha 圖形驗證的機制
系列文
Rails 的簡單任務33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0

感恩分享咯!

我要留言

立即登入留言