（WEB集成CAD插件）网页CAD绘制条形码、二维码的教程
（WEB集成CAD插件）网页CAD绘制条形码、二维码的教程
一、条形码绘制1. 原理绘制条形码需要根据不同的应用场景选择适当的条形码标准，如常见的 codabar 、CODE0、CODE128等，每一种条形码标准都有它特定的数据编码规则，调用这些编码规则进行数据编码时会将数据字符按照所选编码规则转换成条和空的组合（一组二进制数据）。不同的条形码标准使用不同的编码规则来表示0到9的数字或26个英文
（WEB集成CAD插件）网页CAD绘制条形码、二维码的教程
一、条形码绘制
1. 原理
绘制条形码需要根据不同的应用场景选择适当的条形码标准，如常见的 codabar 、CODE0、CODE128等，每一种条形码标准都有它特定的数据编码规则，调用这些编码规则进行数据编码时会将数据字符按照所选编码规则转换成条和空的组合（一组二进制数据）。不同的条形码标准使用不同的编码规则来表示0到9的数字或26个英文字母。
其中，为了确保扫描的准确性，条形码中还包括一个校验字符。这个字符通过特定的算法计算得出，用于检验整个条形码的准确性。在生成目标条形码时需对目标内容进行校验，若目标内容符合条形码的编码要求则再进行下一步的绘制。
2. mxcad实现绘制条形码
根据上述条形码绘制原理可知，只要我们能够知道条形码的编码规则将条形码内容转换为一串二进制数据并根据二进制数据的具体值确定条形码条、空的组合，我们就可以在 mxcad 中通过[填充实体McDbHatch]绘制出条形码。为方便后续对条形码的管理和扩展，我们可以将其绘制为[自定义实体McDbCustomEntity]并为其添加自定义属性。
1）条形码编码规则编写，下面以 CODE9 为例：
代码语言：txt复制class Barcode{
ctructor(data, opti){
this.data = data;
= || data;
= opti;
}
}
class CODE9 extends Barcode {
ctructor(data, opti){
data = ();
// Calculate mod4 checksum if enabled
if(){
data += getCharacter(mod4checksum(data));
}
super(data, opti);
}
encode(){
// First character is always a *
var result = getEncoding("*");
// Take every character and add the binary representation to the result
for(let i = 0; i < this.data.length; i++){
result += getEncoding(this.data[i]) + "0";
}
// Last character is always a *
result += getEncoding("*");
return {
data: result,
text:
};
}
valid(){
return this.data.search(/^[0-9A-Z\-\.\ \$\/\+\%]+$/) !== -1;
}
}
// All characters. The position in the array is the (checksum) value
var characters = [
"0", "1", "2", "",
"4", "5", "6", "7",
"8", "9", "A", "B",
"C", "D", "E", "F",
"G", "H", "I", "J",
"K", "L", "M", "",
"O", "P", "Q", "R",
"S", "T", "U", "V",
"W", "X", "Y", "Z",
"-", ".", " ", "$",
"/", "+", "%", "*"
];
// The decimal representation of the characters, is converted to the
// corresponding binary with the getEncoding function
var encodings = [
20957, 2978, 269, 0485,
20951, 2981, 2669, 20855,
29789, 2645, 29975, 281,
05, 22295, 0149, 24005,
2162, 29981, 287, 2201,
002, 2879, 0545, 224,
0161, 24017, 21959, 0065,
2921, 2285, 29015, 1826,
29141, 17879, 29045, 1829,
1778, 29021, 18269, 17477,
17489, 17681, 2075, 5770
];
// Get the binary representation of a character by converting the encodings
// from decimal to binary
function getEncoding(character){
return getBinary(characterValue(character));
}
function getBinary(characterValue){
return encodings[characterValue].toString(2);
}
function getCharacter(characterValue){
return characters[characterValue];
}
function characterValue(character){
return characters.indexOf(character);
}
function mod4checksum(data){
var checksum = 0;
for(let i = 0; i < data.length; i++){
checksum += characterValue(data[i]);
}
checksum = checksum % 4;
return checksum;
}
export {CODE9};更多编码规则可参考开源条形码js库JsBarCode。
2) 实现自定义实体
代码语言：txt复制import { McGeVectord, McDbHatch, McGePointd, McGePointdArray, McDbCustomEntity, IMcDbDwgFiler, MxCADWorldDraw, McDbEntity, McDbText, McDb, MxCpp, McGeMatrixd } from 'mxcad';
import Barcode from './';// 引入条形码类型
// 自定义条形码
class McDbTestBarCode extends McDbCustomEntity {
/** 条形码位置 */
private position: McGePointd = new McGePointd();
/** 字高 */
private textHeight: number = 120;
/** 条形码信息文字 */
private text: string = '';
// 条形码高度
private codeHeight: number = 00;
// 条形码宽度
private codeWidth: number = 10;
// 条形码类型
private codeType: string = 'CODE9';
// 条形码内容设置
private codeContent: string = 'ABCDEFG';
// 是否显示条形码文字内容
private showText: boolean = false;
ctructor(imp?: any) {
super(imp);
}
public create(imp: any) {
return new McDbTestBarCode(imp)
}
/** 获取类名 */
public getTypeame(): string {
return "McDbTestBarCode";
}
//设置或获取基点
public set barCodePos(val: McGePointd) {
this.position = ();
}
public get barCodePos(): McGePointd {
return this.position;
}
//设置或获取条形码文字
public set barCodeText(val: string) {
= val;
}
public get barCodeText(): string {
return ;
}
//设置或获取条形码高度
public set barCodeHeight(val: number) {
= val;
}
public get barCodeHeight(): number {
return ;
}
//设置或获取条形码类型
public set barCodeType(val: string) {
= val;
}
public get barCodeType(): string {
return ;
}
//设置或获取条形码宽度
public set barCodeWidth(val: number) {
= val;
}
public get barCodeWidth(): number {
return ;
}
// 设置或获取条形码文字高度
public set barCodeTextHeight(val: number) {
Height = val;
}
public get barCodeHeigth(): number {
return Height;
}
// 设置或获取是否显示条形码文字内容
public set barCodeShowText(val: boolean) {
this.showText = val;
}
public get barCodeShowText(): boolean {
return this.showText;
}
// 设置或获取条形码文字内容
public set barCodeContent(val: string) {
= val;
}
public get barCodeContent(): string {
return ;
}
/** 读取数据 */
public dwgInFields(filter: IMcDbDwgFiler): boolean {
this.position = filter.readPoint("position").val;
= filter.readDouble("codeWidth").val;
= filter.readDouble("codeHeight").val;
Height = filter.readDouble("textHeight").val;
= filter.readString("text").val;
= filter.readString("codeType").val;
= filter.readString("codeContent").val;
ct isShowText = filter.readLong("showText").val;
this.showText = isShowText ? true : false;
return true;
}
/** 写入数据 */
public dwgOutFields(filter: IMcDbDwgFiler): boolean {
filter.writePoint("position", this.position);
filter.writeDouble("codeWidth", );
filter.writeDouble("codeHeight", );
filter.writeString("text", );
filter.writeDouble("textHeight", Height);
filter.writeString("codeType", );
filter.writeString("codeContent", );
ct isShowText = this.showText ? 1 : 0;
filter.writeLong("showText", isShowText);
return true;
}
/** 移动夹点 */
public moveGripPointsAt(iIndex: number, dXOffset: number, dYOffset: number, dZOffset: number) {
this.assertWrite();
if (iIndex === 0) {
this.position.x += dXOffset;
this.position.y += dYOffset;
this.position.z += dZOffset;
}
};
/** 获取夹点 */
public getGripPoints(): McGePointdArray {
let ret = new McGePointdArray();
ret.append(this.position);
return ret;
};
/** 动态绘制 */
public worldDraw(draw: MxCADWorldDraw): void {
ct code = new Barcode[](, {flat: true});
if (!code.valid()) return alert('条形码类型与内容不匹配！请重新设置！');
let encoded = ();
ct v = McGeVectord.().mult();
ct _v = McGeVectord.().mult();
encoded.data.split('').forEach((val, index) => {
ct solid = new McDbHatch();
ct point1 = new McGePointd(this.position.x + index * , this.position.y, this.position.z);
ct point2 = ().addvec(v);
ct point = ().addvec(_v);
ct point4 = ().addvec(_v);
ct points = new McGePointdArray([point1, point2, point, point4]);
solid.appendLoop(points);
if (val == '1') {
draw.drawEntity(solid);
}
})
if (this.showText) {
ct text = this.getCodeText();
draw.drawEntity(text);
}
};
// 设置条形码文字实体
private getCodeText(): McDbEntity {
if (!) = ;
ct text = new McDbText();
= ;
text.height = Height;
ct v = McGeVectord.().negate().mult(Height * (4 / ));
text.position = text.alignmentPoint = this.().addvec(v);
text.horizontalMode = McDb.TextHorzMode.kTextLeft;
return text
}
// 编辑变换
public transformBy(_mat: McGeMatrixd): boolean {
this.(_mat);
return true;
}
}）调用条形码自定义实体 McDbTestBarCode 绘制条形码
代码语言：txt复制async function Mx_drawBarCode() {
ct mxcad = MxCpp.getCurrentMxCAD();
();
mxcad.setViewBackgroundColor(255, 255, 255);
// CODE9 类型条形码
ct barCode = new McDbTestBarCode();
barCode.barCodePos = new McGePointd(100, 100, 0);
barCode.barCodeShowText = true;
mxcad.drawEntity(barCode);
// CODE128 类型条形码
ct barCode2 = new McDbTestBarCode();
barCode2.barCodeContent = 'A little test!';
barCode2.barCodeType = 'CODE128';
barCode2.barCodePos = new McGePointd(-2000, 100, 0);
barCode2.barCodeShowText = true;
mxcad.drawEntity(barCode2);
// EA1 类型条形码
ct barCode = new McDbTestBarCode();
barCode.barCodeContent = '59012412457';
barCode.barCodeType = 'EA1';
barCode.barCodePos = new McGePointd(-2000, -800, 0);
barCode.barCodeShowText = true;
mxcad.drawEntity(barCode);
// codabar 类型条形码
ct barCode4 = new McDbTestBarCode();
barCode4.barCodeContent = 'C124567890D';
barCode4.barCodeType = 'codabar';
barCode4.barCodePos = new McGePointd(100, -800, 0);
barCode4.barCodeShowText = true;
mxcad.drawEntity(barCode4);
mxcad.zoomAll();
mxcad.zoomScale(4);
}4) 绘制效果演示：
二、绘制二维码
1.原理
二维码是一种矩阵式二维条码，它能在水平和垂直两个方向上存储信息。二维码中的原始数据可以是数字、字母、二进制数据或其他字符，根据原始数据的类型，选择合适的编码模式。例如，数字数据使用数字模式，字母和数字混合使用alphanumeric模式，其他类型的数据则使用字节模式。
原始数据经过编码后的数据将放入一个二维矩阵中。这个过程可能需要使用掩模技术，通过应用特定的掩模图案来优化二维码中的黑白点的分布，避免出现与定位标记相似的模式，其中， 需要在矩阵的特定区域添加格式化和版本信息，以及必要时添加校正标记。
实现绘制二维码
二维码的编码规则我们可以直接借助二维码开源js库QRCode.js ，更多详细内容看参考：。
结合QRcode.js ，我们可以在mxcad中通过[填充实体McDbHatch]绘制出二维矩阵中的黑白块。为方便后续对二维码的管理和扩展，我们可以将其绘制为[自定义实体McDbCustomEntity]并为其添加自定义属性。
1）QRcode.js扩写:
代码语言：txt复制// 增加 QRCode类的 makeMxcadCode 方法
QRCode. = function (sText) {
this._oQRCode = new QRCodeModel(_getTypeumber(sText, this._), this._);
this._oQRCode.addData(sText);
this._();
return this._oDrawing.drawMxcadHatch(this._oQRCode);
};绘制mxcad填充代码：
代码语言：txt复制// 绘制mxcad填充代码(扩写Drawing类)
Drawing.prototype.drawMxcadHatch = function (oQRCode): McDbEntity[] {
ct entityArr = [];
var _htOption = this._htOption;
var nCount = oQRCode.getModuleCount();
var nWidth = _htOption.width / nCount;
var nHeight = _htOption.height / nCount;
for (var row = 0; row < nCount; row++) {
for (var col = 0; col < nCount; col++) {
var bIsDark = oQRCode.isDark(row, col);
var nLeft = col * nWidth;
var nTop = row * nHeight;
if (bIsDark) {
// 矩形填充
ct pos = new McGePointd(nLeft, nTop, 0);
ct v_y = McGeVectord.().negate().mult(nHeight);
ct v_x = McGeVectord.().mult(nWidth);
ct pos1 = ().addvec(v_y);
ct pos2 = ().addvec(v_x);
ct pos = ().addvec(v_x).addvec(v_y);
ct solid = new McDbHatch();
ct ptArr = new McGePointdArray([pos, pos1, pos, pos2]);
solid.appendLoop(ptArr);
entityArr.push(solid);
}
}
}
return entityArr;
};2）实现自定义实体
代码语言：txt复制import { MxCpp, McDbCustomEntity, McGePointd, IMcDbDwgFiler, McGePointdArray, MxCADWorldDraw, McGeMatrixd, McDbEntity } from "mxcad";
import { QRCode } from './qrCode'
// 自定义二维码实体
class McDbTestQrCode extends McDbCustomEntity {
/** 二维码的位置 */
private position: McGePointd = new McGePointd();
// 二维码高度
private codeHeight: number = 00;
// 二维码宽度
private codeWidth: number = 10;
// 二维码内容设置
private codeContent: string = ':000/mxcad/';
ctructor(imp?: any) {
super(imp);
}
public create(imp: any) {
return new McDbTestQrCode(imp)
}
/** 获取类名 */
public getTypeame(): string {
return "McDbTestQrCode";
}
//设置或获取基点
public set qrCodePos(val: McGePointd) {
this.position = ();
}
public get qrCodePos(): McGePointd {
return this.position;
}
//设置或获取码高度
public set qrCodeHeight(val: number) {
= val;
}
public get qarCodeHeight(): number {
return ;
}
//设置或获取码宽度
public set qrCodeWidth(val: number) {
= val;
}
public get qrCodeWidth(): number {
return ;
}
// 设置或获取二维码内容
public set qrCodeContent(val: string) {
= val;
}
public get qrCodeContent(): string {
return ;
}
/** 读取数据 */
public dwgInFields(filter: IMcDbDwgFiler): boolean {
this.position = filter.readPoint("position").val;
= filter.readDouble("codeWidth").val;
= filter.readDouble("codeHeight").val;
= filter.readString("codeContent").val;
return true;
}
/** 写入数据 */
public dwgOutFields(filter: IMcDbDwgFiler): boolean {
filter.writePoint("position", this.position);
filter.writeDouble("codeWidth", );
filter.writeDouble("codeHeight", );
filter.writeString("codeContent", );
return true;
}
/** 移动夹点 */
public moveGripPointsAt(iIndex: number, dXOffset: number, dYOffset: number, dZOffset: number) {
this.assertWrite();
if (iIndex === 0) {
this.position.x += dXOffset;
this.position.y += dYOffset;
this.position.z += dZOffset;
}
};
/** 获取夹点 */
public getGripPoints(): McGePointdArray {
let ret = new McGePointdArray();
ret.append(this.position);
return ret;
};
/** 动态绘制 */
public worldDraw(draw: MxCADWorldDraw): void {
ct qrcode = new QRCode('', {
width: ,
height:
});
ct objArr = ();
objArr.forEach((obj: McDbEntity) => {
ct entity = () as McDbEntity;
(new McGePointd(0, 0, 0), this.position);
draw.drawEntity(entity);
})
};
// 编辑变换
public transformBy(_mat: McGeMatrixd): boolean {
this.(_mat);
return true;
}
})调用二维码自定义实体McDbTestQrCode绘制二维码：
代码语言：txt复制//画二维码
async function Mx_drawQrCode() {
ct mxcad = MxCpp.getCurrentMxCAD();
();
ct qrcode = new McDbTestQrCode();
qrcode.qrCodePos = new McGePointd(1000, 1000, 0);
qrcode.qrCodeContent = ':000/mxcad/';
qrcode.qrCodeWidth = 1500;
qrcode.qrCodeHeight = 1500;
mxcad.drawEntity(qrcode);
mxcad.zoomAll();
};4) 绘制效果演示：
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2025-07-21 02:16:52
推荐阅读
| 留言与评论（共有 15 条评论） |
| 本站网友 妥运 | 28分钟前 发表 |
| "E" | |
| 本站网友 生儿育女表 | 25分钟前 发表 |
| true}); if (!code.valid()) return alert('条形码类型与内容不匹配！请重新设置！'); let encoded = (); ct v = McGeVectord.().mult(); ct _v = McGeVectord.().mult(); encoded.data.split('').forEach((val | |
| 本站网友 北京苏活 | 13分钟前 发表 |
| 需要在矩阵的特定区域添加格式化和版本信息 | |
| 本站网友 凤凰租房 | 21分钟前 发表 |
| col); var nLeft = col * nWidth; var nTop = row * nHeight; if (bIsDark) { // 矩形填充 ct pos = new McGePointd(nLeft | |
| 本站网友 墙面漆 | 2分钟前 发表 |
| 1829 | |
| 本站网友 食品涨价 | 12分钟前 发表 |
| "" | |
| 本站网友 极路由4 | 4分钟前 发表 |
| 原始数据经过编码后的数据将放入一个二维矩阵中 | |
| 本站网友 广州市海珠区 | 11分钟前 发表 |
| any) { return new McDbTestBarCode(imp) } /** 获取类名 */ public getTypeame() | |
| 本站网友 txt手机阅读器 | 6分钟前 发表 |
| McGeMatrixd | |
| 本站网友 腹腔镜胆囊切除术 | 10分钟前 发表 |
| 根据原始数据的类型 | |
| 本站网友 此事古难全 | 15分钟前 发表 |
| McGePointd = new McGePointd(); /** 字高 */ private textHeight | |
| 本站网友 bt资源下载站 | 5分钟前 发表 |
| ); filter.writeString("codeContent" | |
| 本站网友 胡萝卜汁怎么做 | 10分钟前 发表 |
| string { return ; } //设置或获取条形码高度 public set barCodeHeight(val | |
| 本站网友 郭氏家族 | 22分钟前 发表 |
| 002 | |