天天看點

C#彩色藝術化二維碼樣式設計(僅說思路)

原文:

C#彩色藝術化二維碼樣式設計(僅說思路)

僅講思路,想要源碼的請繞道。

一、樣式

1、先看各種二維碼的樣式吧:

(1)最簡單的樣式——黑白樣式,如下圖:

C#彩色藝術化二維碼樣式設計(僅說思路)

圖1  最平常見到的二維碼樣式

(如果你用智能手機,且已安裝二維碼掃描軟體,掃描之後你會發現它就是一個網址:

http://www.lgms.net

(2)以下為在基本樣式的基礎上進行的改進:

C#彩色藝術化二維碼樣式設計(僅說思路)

圖2  圓形點狀樣式(為了保持可識别性,三個定位方塊圖沒有圓形點狀化)。

C#彩色藝術化二維碼樣式設計(僅說思路)

圖3  加外框的圓形點狀二維碼

C#彩色藝術化二維碼樣式設計(僅說思路)

圖4  雙色二維碼(白底紅碼)

C#彩色藝術化二維碼樣式設計(僅說思路)

圖5  資料區的每個單格格加外框

C#彩色藝術化二維碼樣式設計(僅說思路)

圖6  資料區域加陰影

C#彩色藝術化二維碼樣式設計(僅說思路)

圖7  多種顔色按序排列

C#彩色藝術化二維碼樣式設計(僅說思路)
C#彩色藝術化二維碼樣式設計(僅說思路)

圖8  随機色加框(左)  圓點狀+陰影(右)

(關于随機色的生成,見我的另一篇文章:

在.net(C#)中随機生成較深的顔色

)

C#彩色藝術化二維碼樣式設計(僅說思路)

圖9  資料區用底圖紋理填充并單元格加框

C#彩色藝術化二維碼樣式設計(僅說思路)

圖10  資料區紋理填充加陰影,整體加外框

C#彩色藝術化二維碼樣式設計(僅說思路)

圖11  資料區使用圓形點狀且用紋理圖填充

2、以下為各種彩色藝術二維碼的樣式:

C#彩色藝術化二維碼樣式設計(僅說思路)

藝術圖1   雙色(前景為淡草綠、背景白色) + 圓角 + 附加圖形

C#彩色藝術化二維碼樣式設計(僅說思路)

藝術圖2   藝術二維碼(旋轉 + 紋理填充 + 附加圖形)

C#彩色藝術化二維碼樣式設計(僅說思路)

藝術圖3  圓形點狀 + 紋理填充 + 附加圖形

C#彩色藝術化二維碼樣式設計(僅說思路)

藝術圖4   雙色 + 藝術化排列 + 附加圖形 + 文字說明

C#彩色藝術化二維碼樣式設計(僅說思路)

藝術圖5  雙色 + 附加圖形 + 圓角

C#彩色藝術化二維碼樣式設計(僅說思路)

藝術圖6  紋理底圖 +  圓角 + 附加圖形 + 圓形點狀 + 雙色

C#彩色藝術化二維碼樣式設計(僅說思路)

藝術圖7  附加圖形

C#彩色藝術化二維碼樣式設計(僅說思路)

藝術圖8  圓角 + 附圖 + 彩色漸變

C#彩色藝術化二維碼樣式設計(僅說思路)

藝術圖9   圓角 +  附加圖形 + 資料區外框

C#彩色藝術化二維碼樣式設計(僅說思路)

藝術圖10

C#彩色藝術化二維碼樣式設計(僅說思路)

藝術圖11

C#彩色藝術化二維碼樣式設計(僅說思路)

藝術圖12

C#彩色藝術化二維碼樣式設計(僅說思路)

藝術圖13

C#彩色藝術化二維碼樣式設計(僅說思路)

藝術圖14

C#彩色藝術化二維碼樣式設計(僅說思路)

藝術圖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#彩色藝術化二維碼樣式設計(僅說思路)

題外話:

今天在上傳相關圖像時才發現,使用C# GDI+圖檔儲存功能時,儲存好的圖檔居然在CSDN部落格圖像上傳時無法上傳圖檔!報錯:

* The filetype you are attempting to upload is not allowed.

但這些圖檔在ACDSEE及WINDOWS自帶畫圖工具中均可以打開,但在Photoshop中卻無法打開。後來将同樣的圖檔在WINDOWS自帶畫圖工具中打開另存為之後,發現圖檔檔案大小倍增至原來的兩倍左右!估計是GDI+中儲存的圖檔不帶相關格式的描述資訊所緻PS等軟體無法識别。