原文:
C#彩色藝術化二維碼樣式設計(僅說思路)僅講思路,想要源碼的請繞道。
一、樣式
1、先看各種二維碼的樣式吧:
(1)最簡單的樣式——黑白樣式,如下圖:
圖1 最平常見到的二維碼樣式
(如果你用智能手機,且已安裝二維碼掃描軟體,掃描之後你會發現它就是一個網址:
http://www.lgms.net)
(2)以下為在基本樣式的基礎上進行的改進:
圖2 圓形點狀樣式(為了保持可識别性,三個定位方塊圖沒有圓形點狀化)。
圖3 加外框的圓形點狀二維碼
圖4 雙色二維碼(白底紅碼)
圖5 資料區的每個單格格加外框
圖6 資料區域加陰影
圖7 多種顔色按序排列
圖8 随機色加框(左) 圓點狀+陰影(右)
(關于随機色的生成,見我的另一篇文章:
在.net(C#)中随機生成較深的顔色)
圖9 資料區用底圖紋理填充并單元格加框
圖10 資料區紋理填充加陰影,整體加外框
圖11 資料區使用圓形點狀且用紋理圖填充
2、以下為各種彩色藝術二維碼的樣式:
藝術圖1 雙色(前景為淡草綠、背景白色) + 圓角 + 附加圖形
藝術圖2 藝術二維碼(旋轉 + 紋理填充 + 附加圖形)
藝術圖3 圓形點狀 + 紋理填充 + 附加圖形
藝術圖4 雙色 + 藝術化排列 + 附加圖形 + 文字說明
藝術圖5 雙色 + 附加圖形 + 圓角
藝術圖6 紋理底圖 + 圓角 + 附加圖形 + 圓形點狀 + 雙色
藝術圖7 附加圖形
藝術圖8 圓角 + 附圖 + 彩色漸變
藝術圖9 圓角 + 附加圖形 + 資料區外框
藝術圖10
藝術圖11
藝術圖12
藝術圖13
藝術圖14
藝術圖15
說句實在話,上述藝術圖形絕大多數是通過設計軟體手工制作的,但采用程式設計方式來實作并不容易,不容易并不代表不能實作,隻是需要花費更多的時間罷了。
二、枚舉
1、根據填充樣式(顔色及紋理),我把它分成五種:黑白色,雙色,多種有序色,随機色,紋理圖填充。
以下為枚舉檔案的核心代碼:
public enum FillType
{
/// <summary>
/// 普通樣式
/// </summary>
[Description("普通樣式:白底黑圖")]
BlackAndWhite,
/// 兩種彩色
[Description("前景、背景兩種彩色")]
Bicolored,
/// 多彩的(多種指定顔色)
[Description("多種指定顔色順序排列")]
Multicolored,
/// 随機色的
[Description("随機色樣式")]
RandomColored,
/// 紋理圖填充
[Description("紋理圖填充)")]
Textured
}
3、根據單格形狀,我把它分為三種:矩形塊狀,圓形點狀、圓角狀(拐角為圓角矩形)。
以下為C#枚舉核心代碼:
public enum ShapeType
/// 矩形塊狀
[Description("矩形塊狀")]
Block,
/// 圓形點狀
[Description("圓形點狀")]
Dotted,
/// 圓角(僅拐角處呈圓形矩形)
[Description("圓角(僅拐角處呈圓形矩形)")]
RadiusCorner
4、根據修飾樣式,我分為七種情況,以下為枚舉核心代碼:
public enum DecorativeType
/// 單元格外框
[Description("單元格外框")]
CellBorder = 1,
/// 資料區外框
[Description("資料區外框")]
CoreDataBorder = 2,
/// 整體加線框(空白區域為四倍于單元格)
[Description("整體加線框(空白區域為四倍于單元格)")]
OuterBorder = 4,
/// 加陰影
[Description("加陰影")]
Shadowed = 8,
/// 附加圖形
[Description("附加圖形")]
AppendImages = 16,
/// 位置探測圖形給特定顔色(DifferentColorOfPositionDetectionPattern)
[Description("位置探測圖形給特定顔色")]
DifferentColorPattern = 32,
/// 修飾類邊框
[Description("修飾類邊框")]
DecorativeBorder = 64
三、類構造及實作(僅講思路):
1、建一個IPainter接口,裡面有一個Draw()方法。
interface IPainter
Bitmap Draw();
2、在此繼承出一個IQRCodePainter接口,裡面增加定義相關圖形樣式的公有屬性。
interface IQRCodePainter : IPainter
FillType FillType { get; set; }
ShapeType ShapeType { get; set; }
DecorativeType DecorativeType { get; set; }
string Name { get; set; }
string Content { get; set; }
QRCodeEncoder QRCodeEncoder { get; set; }
Encoding Encoding { get; set; }
int QRCodeScale { get; set; }
3、接下來就是建一個CodePainter類了,由于它是具體執行個體的概括抽象,是以,就使用了public abstract 關鍵字:
public abstract class CodePainter : IQRCodePainter
{
//實作IQRCodePainter相關公共屬性的代碼
//以及實作相關執行個體所必須的公共方法
(太長,略。這裡僅說思路)
//還有就是:
public abstract Bitmap Draw(); //這個由具體的執行個體類去Override即可。
}
4、實作執行個體化的類
根據填充樣式,寫出五個類:
BlackAndWhitePainter,
BicoloredPainter,
MulticoloredPainter,
RandomColoredPainter,
TexturedPainter
裡面根據形狀不同及修飾樣式的不同而做不同的繪制處理。需要說明的是:FillType, ShapeType是單一關系,而DecorativeType是疊加關系,是以,前兩者沒有使用倍增式數字枚舉值,而DecorativeType則使用了1,2,4,8……枚舉值方式,以友善實作效果疊加處理。
5、測試界面的設計(用圖說話):
題外話:
今天在上傳相關圖像時才發現,使用C# GDI+圖檔儲存功能時,儲存好的圖檔居然在CSDN部落格圖像上傳時無法上傳圖檔!報錯:
* The filetype you are attempting to upload is not allowed.
但這些圖檔在ACDSEE及WINDOWS自帶畫圖工具中均可以打開,但在Photoshop中卻無法打開。後來将同樣的圖檔在WINDOWS自帶畫圖工具中打開另存為之後,發現圖檔檔案大小倍增至原來的兩倍左右!估計是GDI+中儲存的圖檔不帶相關格式的描述資訊所緻PS等軟體無法識别。