最近公司让我开发一个条形码的生成控件,花了半天时间搞定觉得不过瘾,什么年代了该用二维码了吧。于是wiki了一下二维码的资料。

  比较常见的就是QR码(Quick Response)即快速识别码,为了验证“快速”,我特地和条形码做了一次比较:经过我测试条形码的code 128编码方式可以表示数字、字母、和符号,而且长度也可以很长。当我用“我查查”进行识别测试时发现,当长度达到20个字符时就很难识别出来了,速度也比较慢,也许是软件的原因吧。但二维码不同,其中包括了汉字等乱七八糟的一大堆东西,同样可以秒识。

  看了各种外国设计师的艺术二维码设计让我一发不可收拾。先来欣赏一下国外大师的设计吧:

这里选了几张个人比较喜欢,比较有代表性的。

 

1.总体思路


  这是一张普通的二维码:  

  

  我们可以把它看作由很多正方形组成的矩阵,每一个正方形就是矩阵中的一个节点。那3个大方框和右下角的小方框是用来定位二维码的方向位置的。

  先排除颜色贴图不管,那些艺术二维码的区别无非就是节点的形状不同而已,有方的、圆的、还有在方的边缘做了平滑处理的。如果能用这些节点生成最基本的黑白原型,用PS加上颜色和贴图简直就是轻而易举。所以我做了这个一个快速原型工具,如下图:

通过修改左边的参数就可以实现各种效果:

改变节点大小

使用随机节点大小和随机颜色

圆形节点

圆形随机大小、随机颜色

自定义形状节点

  生成各种素材,经过PS的拼装处理,基本可以实现任何效果了。

(有些比较难识别,是因为比较难找到作为位置定位的那几个方框,所以还得PS处理时,要把那几个方框做得明显些)

 关于方形边缘平滑处理效果,由于用PS比较容易实现,就懒得研究代码了,录制个PS动作更快些。如下:

这个是女朋友生日那天临时设计的。

  

  

2.详细设计


  

  关于二维码的生成这里我用了一个开源项目QrCode.Net(http://qrcodenet.codeplex.com/)其实这个工程里面已经自带了WPF的控件,可以生成最基本的正方形节点二维码,且有一个属性是Path的材质,这样生成普通的二维码已经方便了,但是不能满足我们多样化的需求。

  所以,我只用到了他生成一个二维数组来表示二维码的算法,二维数组的元素只有0和1,其中0表示没有黑块,1表示有,这样只要根据自定义路径的大小计算出每个块的位置,用代码布局一下就出来了。

  我自己写了一个可以用任意形状路径填充节点的类,并增加随机节点大小和随机颜色功能,而且修复了它的一些Bug,这样即满足了多样化的需求,而且整个二维码都是用路径来表示,换句话说就是矢量图,这样就可以生成任意大小的图片,满足各种用途。

  原本的这个开源项目可以导出.eps矢量格式,可供Adobe Illustrator 使用,而Adobe Illustrator的标准格式.AI,可以被Expression Design 4导入,Expression Design 4又可以转换为XAML文件,也就是说这么多软件都可以用来加工我们的二维码原型,这样就增加了设计的可能性。但是当我看完它转换的实现源码时,我愣住了,完全由作者自己写的代码,只是在做字符串的拼接,形成.eps的格式,而且只考虑到了直线路径...所以我就只能将矢量图输出为位图来保存(这里保存为.png格式,因为png是无损压缩格式,作为中介不错)通过PS加工,好在分辨率基本可以满足大部分需求了。为什么Expression Design 4不能导入XAML格式啊....

  由于代码比较多,思路我上面已经说明了,只是编码的问题了,这里我就贴出源码,感兴趣的可以自己研究一下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Gma.QrCodeNet.Encoding;
using Gma.QrCodeNet.Encoding.Windows.Render;
using System.Windows;
using System.Windows.Controls;namespace QRCodeFactory
{static class PathRender{/// <summary>/// 以矩形来填充矩阵点/// </summary>/// <param name="QrMatrix">算出来的矩阵</param>/// <param name="xScale">isRandom?随机取值的最小值:每个点的宽度</param>/// <param name="yScale">isRandom?随机取值的最大值:每个点的高度</param>/// <param name="isRandom">是否随机大小</param>/// <returns>返回路径填充材质</returns>public static StreamGeometry DrawRectGeometry(BitMatrix QrMatrix, double xScale, double yScale, bool isRandom){int width = QrMatrix == null ? 21 : QrMatrix.Width;StreamGeometry qrCodeStream = new StreamGeometry();qrCodeStream.FillRule = FillRule.EvenOdd;if (QrMatrix == null)return qrCodeStream;using (StreamGeometryContext qrCodeCtx = qrCodeStream.Open()){for (int y = 0; y < width; y++){for (int x = 0; x < width; x++){if (QrMatrix[x, y]){if (isRandom)qrCodeCtx.DrawRectGeometry(x, y, (double)(new Random(x + y + Environment.TickCount).Next((int)(xScale * 100), (int)(yScale * 100))) / 100, (double)(new Random(x + y + Environment.TickCount).Next((int)(xScale * 100), (int)(yScale * 100))) / 100);elseqrCodeCtx.DrawRectGeometry(x, y, xScale, yScale);}}}}qrCodeStream.Freeze();return qrCodeStream;}/// <summary>/// 以圆点来填充矩阵点/// </summary>/// <param name="QrMatrix">算出来的矩阵</param>/// <param name="xScale">isRandom?随机取值的最小值:每个点的宽度</param>/// <param name="yScale">isRandom?随机取值的最大值:每个点的高度</param>/// <param name="isRandom">是否随机大小</param>/// <returns>返回路径填充材质</returns>public static StreamGeometry DrawEllipseGeometry(BitMatrix QrMatrix, double xScale, double yScale, bool isRandom){int width = QrMatrix == null ? 21 : QrMatrix.Width;StreamGeometry qrCodeStream = new StreamGeometry();qrCodeStream.FillRule = FillRule.EvenOdd;if (QrMatrix == null)return qrCodeStream;using (StreamGeometryContext qrCodeCtx = qrCodeStream.Open()){for (int y = 0; y < width; y++){for (int x = 0; x < width; x++){if (QrMatrix[x, y]){if (isRandom)qrCodeCtx.DrawEllipseGeometry(x, y, (double)(new Random(x + y + Environment.TickCount).Next((int)(xScale * 100), (int)(yScale * 100))) / 100, (double)(new Random(x + y + Environment.TickCount).Next((int)(xScale * 100), (int)(yScale * 100))) / 100);elseqrCodeCtx.DrawEllipseGeometry(x, y, xScale, yScale);}}}}qrCodeStream.Freeze();return qrCodeStream;}/// <summary>/// 以自定义图形来填充矩阵点/// </summary>/// <param name="QrMatrix">算出来的矩阵</param>/// <param name="xScale">isRandom?随机取值的最小值:每个点的宽度</param>/// <param name="yScale">isRandom?随机取值的最大值:每个点的高度</param>/// <param name="isRandomSize">是否随机大小</param>/// <returns>返回路径填充材质</returns>public static void DrawCustomGeometry(BitMatrix QrMatrix, ref Grid drawGrid, Path pathGeo, double xScale, double yScale, bool isRandomSize,bool isRandomColor){int width = QrMatrix == null ? 21 : QrMatrix.Width;drawGrid.Width = drawGrid.Height = width * pathGeo.Width;for (int y = 0; y < width; y++){for (int x = 0; x < width; x++){if (QrMatrix[x, y]){Path newPath = new Path();//创建一个路径,代表一点newPath.StrokeThickness = 0;newPath.Stretch = Stretch.UniformToFill;//填充方式snewPath.HorizontalAlignment = HorizontalAlignment.Left;newPath.VerticalAlignment = VerticalAlignment.Top;newPath.Data = pathGeo.Data;newPath.RenderTransformOrigin = new Point(0.5, 0.5);TranslateTransform newTTF = new TranslateTransform(x * pathGeo.Width, y * pathGeo.Height);newPath.RenderTransform = newTTF;if (isRandomSize)//如果随机大小
                        {newPath.Width = newPath.Height = pathGeo.Width * (double)(new Random(x + y + Environment.TickCount).Next((int)(xScale * 100), (int)(yScale * 100))) / 100;}else{newPath.Width = pathGeo.Width * xScale;newPath.Height = pathGeo.Height * yScale;}if (isRandomColor)//如果随机颜色newPath.Fill = new SolidColorBrush(GetRandomColor());elsenewPath.Fill = Brushes.Black;drawGrid.Children.Add(newPath);}}}}internal static void DrawRectGeometry(this StreamGeometryContext ctx, double X, double Y, double Width, double Height){ctx.BeginFigure(new Point(X, Y),true, true);ctx.LineTo(new Point(X, Y + Height), true, true);ctx.LineTo(new Point(X + Width, Y + Height), true, true);ctx.LineTo(new Point(X + Width, Y), true, true);}internal static void DrawEllipseGeometry(this StreamGeometryContext ctx, double X, double Y, double Width, double Height){X = X * 2;Y = Y * 2;Height = Height * 2;Width = Width * 2;ctx.BeginFigure(new Point(X, Y + Height / 2), true, true);ctx.ArcTo(new Point(X + Width, Y + Height / 2), new Size(Width / 2, Height / 2), 90, false, SweepDirection.Clockwise, true, true);ctx.ArcTo(new Point(X, Y + Height / 2), new Size(Width / 2, Height / 2), 90, false, SweepDirection.Clockwise, true, true);}public static Color GetRandomColor(){Random randomNum_1 = new Random(Guid.NewGuid().GetHashCode());System.Threading.Thread.Sleep(randomNum_1.Next(1));int int_Red = randomNum_1.Next(255);Random randomNum_2 = new Random((int)DateTime.Now.Ticks);int int_Green = randomNum_2.Next(255);Random randomNum_3 = new Random(Guid.NewGuid().GetHashCode());int int_Blue = randomNum_3.Next(255);int_Blue = (int_Red + int_Green > 380) ? int_Red + int_Green - 380 : int_Blue;int_Blue = (int_Blue > 255) ? 255 : int_Blue;return GetDarkerColor(Color.FromArgb(Convert.ToByte(255),Convert.ToByte(int_Red), Convert.ToByte(int_Green), Convert.ToByte(int_Blue)));}//获取加深颜色public static Color GetDarkerColor(Color color){const int max = 255;int increase = new Random(Guid.NewGuid().GetHashCode()).Next(30, 255); //还可以根据需要调整此处的值int r = Math.Abs(Math.Min(color.R - increase, max));int g = Math.Abs(Math.Min(color.G - increase, max));int b = Math.Abs(Math.Min(color.B - increase, max));return Color.FromArgb(Convert.ToByte(255), Convert.ToByte(r), Convert.ToByte(g), Convert.ToByte(b));}}
}

View Code

  下面欣赏一下我心血来潮时设计的:

下载地址:http://files.cnblogs.com/tong-tong/TTQRCodeFactory.zip

后记


  

    自从本人淘宝女装店倒闭以后就一直不甘心,本来想开家店卖下二维码的设计赚点饭钱,结果事太多了,愣是没有时间来装修店铺...各位博友如果有二维码的设计需求的话也可以找我哦,价格公道,只收饭钱~~~~

  

转载于:https://www.cnblogs.com/tong-tong/archive/2013/05/23/2758211.html

通通WPF随笔(3)——艺术二维码素材生成器相关推荐

  1. 【二维码】艺术二维码生成

    一.艺术二维码 艺术二维码是在原有的黑白二维码的基础上根据二维码解析方式再配合新兴的设计方法,进行二维码美化,制作出的形态各异二维码,具体分为静态二维码设计.动态二维码设计.3D二维码设计.创意二维码 ...

  2. 怎样制作一个漂亮的艺术二维码?

    随着二维码的产生,很多应用场景下都能看到各种二维码的使用.比如:有黑白的二维码.动态的二维码.3D的二维码等等! 如果要求不高,那么我们就直接使用黑白二维码就可以了,那么对于那些设计感很强的用户需求来 ...

  3. 分享:Java 开发精美艺术二维码

    博客地址:https://ainyi.com/58 Java 开发精美艺术二维码 看到网络上各种各样的二维码层出不穷,好像很炫酷的样子,一时兴起,我也要制作这种炫酷二维码效果 例如: 根据以往例子 根 ...

  4. 看了100%会做艺术二维码的制作教程

    为了方便更多设计师和艺术爱好者,以及自媒体朋友学会自己制作艺术二维码,小编现在就为大家带来一套完整艺术二维码的详细制作教程.此基础教程也是在广大粉丝朋友的强烈呼吁下完成的,带着大家的各种疑问和好奇,那 ...

  5. 艺术二维码生成神器!

    艺术二维码生成神器! 在这里,您可以让您的二维码进行个性化定制,您可以自定义二维码的icon,码块的形状,模式....您还可以设置二维码的背景,让您的二维码和背景图融为一体!     此外,最重大的功 ...

  6. StableDiffusion艺术二维码制作教程!

    花了3个小时研究,我用自己搭建的AI绘画在线网址: https://sd6666.tocmcc.cn:443 做了一个艺术二维码! 6.1.生成二维码 链接生成二维码网址:https://34qr.c ...

  7. 高级艺术二维码制作保姆级教程!

    先上图,做了几个艺术二维码,人物.狮子.城堡二维码 12.1.生成二维码 首先根据网页链接制作一个高容错比例的二维码 https://learn.thinkdiffusion.com/creating ...

  8. Excel二维码图片生成器

    Excel二维码图片生成器. 它可以将excel文件的数据,每行数据生成一张二维码图片,并保存到电脑.软件无需安装,解压后即可直接使用,无需联网,操作简便快捷. 下载地址:点此下载 步骤1:导入事先制 ...

  9. 活码二维码(动态二维码)素材库管理教程

    活码素材库介绍 MyCms 活码二维码素材库目前内置七种类型内容,包含链接跳转.支付码.富文本.名片.音乐.视频和文件,覆盖目前主流的需求. 其中富文本适用于多行业的需求,像微信群活码.客服活码等,都 ...

最新文章

  1. 精心为你准备的最全的20道Mysql面试题。
  2. python语言中整数1010的二进制表示_爱校码 - Python 语言基础二
  3. HYSBZ - 3676 回文串(回文自动机)
  4. 大部分人不知道的 5 个强大HTML5 API
  5. vue+uwsgi+nginx部署路飞学城
  6. Dynamics CRM2011 通过DeveloperToolkit在VS中部署遇到的问题
  7. python程序执行时间毫秒_如何使用python解析包含毫秒的时间字符串?
  8. 客户端持久化解决方案: Web SQL
  9. qgis经纬度_QGIS中文系列教程
  10. java实现ssdp协议_SSDP协议最简单的Reactor / Netty实现是什么?
  11. Java ResourceBundle 加载外部路径资源文件方式
  12. 全国省份及其对应的城市字典
  13. Android实现抖音去水印
  14. S71500 PLC 与第三方设备 ModbusTCP 项目调试记录
  15. 国外5G行业应用产业政策分析及对我国的启示
  16. 鸿蒙系统如何设置双屏,华为P50 Pro曝光,魅力双屏+麒麟9000+鸿蒙系统,逃不过真香定律...
  17. 温州科技职业学院 计算机网络技术,浙江【温州科技职业学院】_计算机网络技术专业建设方案.doc...
  18. javaSE基础重点知识点总结 持续更新
  19. #分治#poj 3889 Fractal Streets
  20. router link to

热门文章

  1. Elasticsearch 7.10 之 Indexing pressure
  2. html文字抖动效果,CSS实现TikTok文字抖动效果示例
  3. Paper Reading||Overcoming Oscillations in Quantization-Aware Training
  4. 文本内容相似度计算方法:simhash
  5. ardupilot 中关键坐标系
  6. iOS设备唯一标识获取策略(不定时更新)
  7. 计算机网络术语sonet,计算机网络(第七版)谢希仁-第2章 物理层(示例代码)
  8. 前端拖拽时手型为禁用
  9. 引领盲返消费新潮流,共创社交电商新时代
  10. 华三模拟器BGP基本配置