UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读本文围绕 ng-zorro-antdAngular 版 Ant Design 组件库QRCode 组件的填充Padding定制能力展开基于仓库中 padding 示例 与其配套的 padding.ts 代码深入讲解nzPadding参数的作用、用法与底层实现原理。读完本文你将掌握如何通过nzPadding为二维码四周留出干净、可扫描的安全边距理解填充值在 canvas 与 SVG 两种渲染管线中的真实作用方式并能根据二维码规范规避无法识别的常见坑。一、示例概览一行属性实现带衬垫的二维码在 ng-zorro-antd 的 QRCode 组件示例中padding.md 用一句话点明主题自定义 QR 码的填充。对应的 padding.ts 给出了最精简的完整可运行示例import { Component } from angular/core; import { NzQRCodeModule } from ng-zorro-antd/qr-code; Component({ selector: nz-demo-qr-code-padding, imports: [NzQRCodeModule], template: nz-qrcode [nzPadding]2 nzValuehttps://ng.ant.design/ / nz-qrcode nzTypesvg [nzPadding]2 nzValuehttps://ng.ant.design/ / , styles: nz-qrcode { margin-right: 12px; padding: 0; } }) export class NzDemoQrCodePaddingComponent {}这个示例同时展示了两种渲染形态默认canvas渲染的二维码设置[nzPadding]2通过nzTypesvg切换到SVG渲染的二维码同样设置[nzPadding]2。两者都使用nzValue指向https://ng.ant.design/说明nzPadding与渲染类型正交、可任意组合。示例样式中对nz-qrcode设置了margin-right: 12px和padding: 0用于让两个二维码在演示页中并排展示、避免外边距干扰这与组件内部的nzPadding内衬是两个不同概念需要注意区分。二、nzPadding API 速查参数、类型与默认值在组件官方文档 index.zh-CN.md 的 API 表中nzPadding的定位清晰可见参数说明类型默认值[nzPadding]二维码填充number0再对照 qrcode.component.ts 的源码定义readonly nzPadding inputnumber(0);可以看到这是一个以number像素单位为输入、默认值为0的输入属性。也就是说不传nzPadding时二维码模块矩阵紧贴绘制边界四周没有额外留白传入正数如示例中的2时二维码内容四周会额外空出相应数量的模块格作为静区quiet zone填充。围绕nzPaddingAPI 表中还有一组高度相关的属性在实际布局中经常一起使用一并列出以便对照参数说明类型默认值[nzValue]扫描后的文本string \| string[]-[nzType]渲染类型canvas \| svgcanvas[nzColor]二维码颜色string#000000[nzBgColor]二维码背景颜色string#FFFFFF[nzSize]二维码大小number160[nzBordered]是否有边框booleantrue[nzStatus]二维码状态active \| expired \| loading \| scannedactive[nzLevel]二维码容错等级L \| M \| Q \| HM其中nzBgColor默认#FFFFFF白底与nzPadding的组合恰好构成二维码规范要求的白色静区填充区域使用背景色绘制确保扫码器能正确识别定位图案。三、填充值在源码中如何被处理getMarginSize 与数据管线nzPadding并不是直接传给渲染层而是先经过一层数据归一化。整个 QR 码数据生成集中在 qrcode-data.ts 的createQRCodeData函数中export const createQRCodeData ( value: string | string[], level DEFAULT_LEVEL, minVersion: number, size: number, boostLevel: boolean, marginSize: number, imageSettings?: ImageSettings ) { const cs memoizedQrcode(value, level, minVersion, boostLevel); const mg getMarginSize(marginSize); const ncs cs.getModules().length mg * 2; const cis getImageSettings(cs.getModules(), size, mg, imageSettings); return { cells: cs.getModules(), margin: mg, numCells: ncs, calculatedImageSettings: cis, qrcode: cs }; };这里的关键点有三个归一化marginSize即nzPadding被传入getMarginSize。看 utils.ts 的实现export const getMarginSize (marginSize: number): number Math.max(Math.floor(marginSize), 0);它会对输入做向下取整并钳制到非负数。这意味着即使传入小数如2.7或负数最终生效的填充值也只会是2或0这类安全值。从源码结构可以推断这是为了防御性地避免非法输入破坏后续的坐标计算。总网格数numCells 模块数 mg * 2即填充值会同时在左、右、上、下四个方向各贡献mg个网格单位所以总尺寸变化是2 * mg。这个numCells随后作为 SVG 的viewBox与 canvas 的坐标系基准。联动图标定位getImageSettings也会接收margin当设置了nzIcon时图标位置会基于cells.length / 2居中计算见 utils.ts填充的存在不会破坏图标居中逻辑。组件层 qrcode.component.ts 的updateQRCodeData将nzPadding()作为marginSize参数传入并把计算出的margin、cells、numCells、calculatedImageSettings分别写入 signal再由模板分发给 canvas / svg 子组件渲染。四、canvas 渲染margin 如何变成像素当nzType为默认的canvas时宿主组件 qrcode.component.ts 渲染nz-qrcode-canvas子组件并把margin、cells、numCells、size、color、bgColor传下去。真正的绘制逻辑在 qrcode-canvas.component.ts。绘制前先建立坐标系setupCanvasconst pixelRatio window.devicePixelRatio || 1; canvas.nativeElement.height canvas.nativeElement.width this.size() * pixelRatio; canvas.nativeElement.style.width canvas.nativeElement.style.height ${this.size()}px; const scale (this.size() / this.numCells()) * pixelRatio; ctx.scale(scale, scale); ctx.fillStyle this.bgColor(); ctx.fillRect(0, 0, this.numCells(), this.numCells());画布物理像素由size * devicePixelRatio决定CSS 尺寸始终是nzSize默认 160px保证高分屏下二维码依然清晰坐标系按size / numCells缩放把模块网格映射为像素先用背景色fillRect铺满整个numCells × numCells区域——这一步正是填充区的来源nzPadding扩大后的numCells区域全部以nzBgColor填充天然形成白色静区。模块绘制分两条路径renderQRCode浏览器支持Path2D时用 generatePath 生成紧凑的 SVG 路径字符串并通过ctx.fill(new Path2D(path))一次填充不支持时退化为逐格fillRect。注意generatePath(cells, this.margin())中每个路径点的坐标都加上margin偏移如M${start margin} ${y margin}...从而使模块矩阵整体右移、下移mg个网格单位四周空出静区而背景已经由整块fillRect(0, 0, numCells, numCells)铺底视觉上就是带衬垫的二维码。若同时配置了nzIcon还会在图标区域执行挖空excavateModules并在图标load成功后以x margin、y margin的偏移绘制图标onImageLoadSuccess填充值同样参与图标定位。五、SVG 渲染viewBox 与路径偏移当nzTypesvg时宿主渲染nz-qrcode-svg子组件见 qrcode.component.ts模板结构在 qrcode-svg.component.tssvg [attr.height]size() [attr.width]size() [attr.viewBox]viewBox roleimg path [attr.fill]bgColor() [attr.d]backgroundPath shapeRenderingcrispEdges / path [attr.fill]color() [attr.d]foregroundPath shapeRenderingcrispEdges / ... /svginitializeViewBox以numCells建立视图坐标系this.viewBox 0 0 ${this.numCells()} ${this.numCells()}; this.backgroundPath M0,0 h${this.numCells()}v${this.numCells()}H0z;即viewBox的边长 模块数 2 × margin背景路径同样铺满整个带填充的坐标系前景路径generatePath(cellsToDraw, this.margin())与 canvas 分支共用同一套带 margin 偏移的路径生成逻辑。因此 SVG 与 canvas 两种模式对nzPadding的处理完全一致填充改变的是坐标系尺寸与模块偏移而非缩放模块本身。这也意味着填充后单个模块的物理像素会略微变小因为size不变而网格数增加在尺寸足够大的场景下不影响扫描识别。SVG 分支对图标image的处理同样以(calculatedImageSettings.x || 0) margin()作为偏移getImageX/getImageY保持与 canvas 一致的布局语义。六、为什么需要填充静区、容错等级与识别上限二维码能稳定识别靠的是模块本身之外的一圈静区quiet zone。官方文档 index.zh-CN.md 的注意章节给出了两条与本主题直接相关的工程经验内容上限nzValue保守上限为 738 或更少字符如果使用了容错等级上限还会进一步降低。填充本身不消耗内容容量但如果nzSize固定而nzPadding过大模块会变得更小、更难扫描因此应避免在内容接近上限时使用过大的 padding。容错等级Error Correction Level组件默认nzLevelM可纠正约 15% 错误。四级容错为L约 7%、M约 15%、Q约 25%、H约 30%。并非所有位置都可缺损——三个定位角直接影响初始定位中间的内容编码区才可容忍缺损。当链接很短内容编码信息少时不同容错等级生成的图片不会发生变化。这一点与 padding 的实践关联在于合理留白 足够容错等级是二维码在深色背景、图标遮挡等恶劣条件下仍可扫描的双保险。关于容错等级的内部实现可参看 utils.ts 的ERROR_LEVEL_MAPL/M/Q/H 分别映射到 qrcodegen 的Ecc.LOW/MEDIUM/QUARTILE/HIGH以及 qrcode-data.ts 中基于qrcodegen.encodeSegments的编码流程。七、常见用法与注意事项小结基于 padding.ts 示例与源码行为整理出以下可落地的实践建议最小可扫描留白二维码规范通常要求静区宽度不少于 4 个模块示例中nzPadding2属于轻度留白左右各 2 格适合模块数较多的场景在打印、深色卡片等场景可适当加大。配合 nzBgColor 使用nzPadding区域以nzBgColor绘制默认白底是最稳妥的选择若自定义nzBgColor请确保与周边底色一致否则填充区会呈现色块。两种渲染类型行为一致canvas与svg对nzPadding的语义完全相同可按需选择。SVG 适合缩放与导出场景矢量清晰canvas 适合截图与高频重绘场景。与 nzBordered 区分nzBordered默认true控制的是二维码外框描边宿主类ant-qrcode-border见 qrcode.component.ts与nzPadding的内部留白是两回事两者可叠加使用。输入防御nzPadding最终经过Math.max(Math.floor(x), 0)归一化传入负数或小数会被安全钳制不必担心产生非法布局。八、延伸阅读完整 API 与容错等级说明QRCode 官方文档中文示例源码padding.ts 及其他 democolor.md、icon.md、status.md、download.md组件实现qrcode.component.ts、qrcode-canvas.component.ts、qrcode-svg.component.ts数据与工具函数qrcode-data.ts、utils.ts组件测试qrcode.component.spec.ts以上路径均位于本仓库components/qr-code目录下可对照源码进一步验证文中所述实现细节。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Badge 封顶数字nzOverflowCount完整指南从 Demo 到源码实现ng zorro antd Badge 封顶数字nzOverflowCount完整指南从 Demo 到源码实现 导读 本指南围绕 ng zorro antUI组件前端ng-zorro-antd 浮动按钮组弹出方向nzPlacement完整指南从 Demo 到源码实现ng zorro antd 浮动按钮组弹出方向nzPlacement完整指南从 Demo 到源码实现 导读 本篇指南聚焦 ng zorro antd 中UI组件前端ng-zorro-antd Grid 栅格 nzFlex 属性完全指南从 Flex 填充到弹性布局实战ng zorro antd Grid 栅格 nzFlex 属性完全指南从 Flex 填充到弹性布局实战 nz col 提供的 nzFlex 属性是 ng zoUI组件前端上一篇MobX进阶教程如何自定义observables和扩展MobX功能下一篇如何通过Free-courses-with-Certificates快速获得10技术认证创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
MATLAB深度学习工具箱DeepLearn：轻量CNN实验台与MNIST训练避坑指南 简介：这份MATLAB深度学习工具包面向需要开展神经网络实验与算法复现的科研人员和工程师，聚焦CNN、RNN/LSTM、自编码器、深度信念网络（DBN）及栈式自编码器（SAE）等经典模型的搭建、训练与验证。压缩包共95个文… · 2026/9/27 23:42:18
网站建设每年收费揭秘:5年省2万,用免费工具避坑 网站建设每年收费揭秘:5年省2万,用免费工具避坑 刚创业的小张，上周被一家建站公司报价“首年免费，次年续费1万”，气得直拍桌子。找建站公司怕被坑高价，是无数创业团队的噩梦。别急着签合同，先搞懂“网站建设每年收费”的底层逻辑。其实，80%的“… · 2026/9/27 23:42:12
温州论坛703源码避坑指南：保姆级建站教程揭秘 温州论坛703源码避坑指南：保姆级建站教程揭秘 别被那些花里胡哨的模板网站骗了，看着挺像回事，用起来全是坑，尤其是像【温州论坛703】这种带特定地域属性或特定板块结构的旧源码，很多新手直接拿去改，结果上线才发现样式错乱、后台权限混乱，简直比… · 2026/9/27 23:42:06
3步搞定wordpress中文博客模板下载，告别等待的完整流程 3步搞定wordpress中文博客模板下载，告别等待的完整流程 改个需求建站公司拖一周，这种憋屈感谁懂？我做过10年建站，见过太多老板花几万块定制，结果改个颜色都要排队。其实想要个漂亮的中文博客，根本不用找外包。WordPress中文博客模… · 2026/9/28 0:18:10
2026最新网站查询访问域名避坑指南 2026最新网站查询访问域名避坑指南 备案流程一头雾水？别慌。很多新手刚接手网站项目，对着工信部备案系统发呆，分不清域名解析、服务器绑定和访问验证的区别，更不知道2026最新政策对“网站查询访问域名”有哪些硬性要求。… · 2026/9/28 0:17:58
娱乐彩票网站建设制作避坑指南：模板vs定制实战对比 娱乐彩票网站建设制作避坑指南：模板vs定制实战对比 别信那些“一键生成”的鬼话。上周一个客户拿着某知名模板站找我改，首页加载慢了8秒，后台数据全乱，看着就廉价。做娱乐彩票这类高敏感、高并发站点， 模板网站太丑不够用… · 2026/9/28 0:17:46
拒绝拖稿！《奖励自己的网站》性能优化报价单揭秘 拒绝拖稿！《奖励自己的网站》性能优化报价单揭秘 改个需求建站公司拖一周，这大概是无数甲方和开发者最崩溃的瞬间。你只是想把首页那张图换个颜色，或者加个“立即购买”按钮，结果对方让你等，一等就是7天。等你急了去催，得到的回复往往是“测试环境还在… · 2026/9/28 0:17:33
网站管理建设的总结：源码下载后如何搞定服务器与证书 网站管理建设的总结：源码下载后如何搞定服务器与证书 域名服务器搞不懂，是不是让你建站时心里没底？很多新手拿到【源码下载】包，解压后一脸茫然：这代码往哪放？服务器怎么连？HTTPS证书怎么搞？别慌，这就是典型的“有代码无环境”困境。… · 2026/9/28 0:17:33
做网站动图的软件怎么选？避开高价坑，新手看这篇就够 做网站动图的软件怎么选？避开高价坑，新手看这篇就够 找建站公司最让人头疼的，就是报价单上一堆看不懂的名词，动不动就几万块，生怕被坑高价。很多河北转行做网站的新手，刚入行就被客户问倒：做个动图到底用什么软件？这钱该花多少？别急，咱们把【做网站… · 2026/9/28 0:16:57
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
制作网页比较方便的软件怎么选?一文搞懂避坑指南 制作网页比较方便的软件怎么选?一文搞懂避坑指南 很多老板一上来就问：做个网站多少钱？但我反问他：你的域名买了吗？服务器租了吗？他一脸懵。这就是典型的“域名服务器搞不懂”。别急，今天咱们不聊虚的，直接 一文搞懂 那些让你头秃的技术名词。… · 2026/9/28 0:00:06
婚恋网站实战案例：避开3个高价坑，省钱50%还能跑赢流量 婚恋网站实战案例：避开3个高价坑，省钱50%还能跑赢流量 找婚恋网站建站公司，最怕的就是被坑高价。很多同行跟我吐槽，报价单上写得模棱两可，功能栏里全是“高级定制”、“专属UI”，结果落地全是套壳。今天不聊虚的，直接甩几个我经手的 实战案例… · 2026/9/28 0:00:19
济南做网站多少钱：3个案例拆解，防黑源码下载全攻略 济南做网站多少钱：3个案例拆解，防黑源码下载全攻略 上周济南一个做建材的老板找我，脸都绿了。他的官网首页弹出了赌博广告，后台被植入了挖矿脚本。他慌得问我：“网站被黑挂马不知道怎么办？能不能直接找之前的外包公司要源码下载，看看哪里被动了手脚？… · 2026/9/28 0:00:25
