安全的网站建,怎么模仿别人做网站,com网站域名注册,江苏提升关键词排名收费条形码在实际应用场景是经常可见的。
这里教大家如何集成uniapp条形码。条形码依赖类库JsBarcode.
下载JsBarcode源码#xff0c;对CanvasRenderer进行了改进兼容uniapp。
import merge from ../help/merge.js;
import {calculateEncodingAttributes, getTotal…条形码在实际应用场景是经常可见的。
这里教大家如何集成uniapp条形码。条形码依赖类库JsBarcode.
下载JsBarcode源码对CanvasRenderer进行了改进兼容uniapp。
import merge from ../help/merge.js;
import {calculateEncodingAttributes, getTotalWidthOfEncodings, getMaximumHeightOfEncodings} from ./shared.js;class CanvasRenderer{constructor(canvas, encodings, options){this.canvas canvas;this.encodings encodings;this.options options;}render(){// Abort if the browser does not support HTML5 canvas// if (!this.canvas.getContext) {// throw new Error(The browser does not support canvas.);// }this.initSize()setTimeout(() {this.prepareCanvas();for(let i 0; i this.encodings.length; i){var encodingOptions merge(this.options, this.encodings[i].options);this.drawCanvasBarcode(encodingOptions, this.encodings[i]);this.drawCanvasText(encodingOptions, this.encodings[i]);this.moveCanvasDrawing(this.encodings[i]);}this.canvas.draw();}, 50);// this.restoreCanvas();}initSize(){var ctx this.canvas;calculateEncodingAttributes(this.encodings, this.options, ctx);var totalWidth getTotalWidthOfEncodings(this.encodings);var maxHeight getMaximumHeightOfEncodings(this.encodings);this.options.thiz.canvasWidth totalWidth this.options.marginLeft this.options.marginRight;this.options.thiz.canvasHeight maxHeight;}prepareCanvas(){// Get the canvas contextvar ctx this.canvas;// ctx.save();// fixEncodings(this.encodings, this.options, ctx)// Paint the canvasctx.clearRect(0, 0, this.options.thiz.canvasWidth, this.options.thiz.canvasHeight);if(this.options.background){ctx.fillStyle this.options.background;ctx.fillRect(0, 0, this.options.thiz.canvasWidth, this.options.thiz.canvasHeigh);}ctx.translate(this.options.marginLeft, 0);}drawCanvasBarcode(options, encoding){// Get the canvas contextvar ctx this.canvas;var binary encoding.data;// Creates the barcode out of the encoded binaryvar yFrom;if(options.textPosition top){yFrom options.marginTop options.fontSize options.textMargin;}else{yFrom options.marginTop;}// ctx.fillStyle options.lineColor;ctx.setFillStyle(options.lineColor)for(var b 0; b binary.length; b){var x b * options.width encoding.barcodePadding;if(binary[b] 1){ctx.fillRect(x, yFrom, options.width, options.height);}else if(binary[b]){ctx.fillRect(x, yFrom, options.width, options.height * binary[b]);}}}drawCanvasText(options, encoding){// Get the canvas contextvar ctx this.canvas;var font options.fontOptions options.fontSize px options.font;// Draw the text if displayValue is setif(options.displayValue){var x, y;if(options.textPosition top){y options.marginTop options.fontSize - options.textMargin;}else{y options.height options.textMargin options.marginTop options.fontSize;}// ctx.font font;if(options.fontSize){ctx.setFontSize(options.fontSize)}if(options.lineColor){ctx.setFillStyle(options.lineColor)}// Draw the text in the correct X depending on the textAlign optionif(options.textAlign left || encoding.barcodePadding 0){x 0;ctx.textAlign left;}else if(options.textAlign right){x encoding.width - 1;ctx.textAlign right;}// In all other cases, center the textelse{x encoding.width / 2;ctx.textAlign center;}ctx.fillText(encoding.text, x, y);}}moveCanvasDrawing(encoding){var ctx this.canvas;ctx.translate(encoding.width, 0);}restoreCanvas(){// Get the canvas contextvar ctx this.canvas;ctx.restore();}
}export default CanvasRenderer;uniapp核心条码组件库
templateview classbarcode !-- #ifndef MP-ALIPAY --canvas :canvas-idelid :idelid type2D :style{width:canvasWidthpx,height:canvasHeightpx} /!-- #endif --!-- #ifdef MP-ALIPAY --canvas :idelid :widthcanvasWidth :heightcanvasHeight /!-- #endif --/view
/templatescriptimport JsBarcode from ./jsbarcode/JsBarcode.jsexport default {data() {return {canvasWidth: 0,canvasHeight: 0,elid: this.$u.guid()}},props: {format:{type: String,default: CODE128},text: {type: String,default: 123},width: {type: Number,default: 2},height: {type: Number,default: 60},background: {type: String,default: #ffffff},fontSize:{type: Number,default: 20},margin:{type: Number,default: 5},// fontColor: {// type: String,// default: #000000// },lineColor: {type: String,default: #000000},displayValue: {type: Boolean,default: true},//bottom 或者 toptextPosition:{type: String,default: bottom} },// 在实例挂载完成后被立即调用//兼容非动态取值(二维码为固定内容)mounted() { this.renderCode()},watch: {text(newVal, oldVal) { //监测到text值发生改变时重新绘制this.renderCode()}},methods: {// 二维码生成工具renderCode() {let ctx uni.createCanvasContext(this.elid,this)JsBarcode(ctx, this.text, {format:this.format,thiz:this,width:this.width,height:this.height,background:this.background,lineColor:this.lineColor,margin:this.margin,fontSize:this.fontSize,fontColor:this.fontColor,textPosition:this.textPosition,displayValue: this.displayValue});}}}
/scriptstyle.barcode {display: flex;align-items: center;justify-content: center;}
/style uniapp环境下预览效果
