Display Datamatrix in canvas

Hi there,

I am using the Angular barcode to design my 2D data matrix barcode in a specific size. I have a canvas with a specific size and want the barcode to fit in it using the top.botton,left.right feature. 

I want to know how can I have the barcode generate in the canvas and then I play with the left,right,bottom,top margin to fit where I need exactly.

cheers

Zolf

barcode.jpg

Below is the code

<div fxFlex.gt-sm="calc(50% - 0.75rem)" fxFlex="100">
<div class="mrgn-b-md">
<h2 class="mrgn-b-md">{{'Preview Label'|translate}}</h2>
<div class="inner-block">
<div fxLayout="row" fxLayoutAlign="start center" style="width: 100%;">
<div fxFlex>
<canvas #myCanvas>
Your browser does not support the canvas element.
</canvas>
<br/>
<ejs-datamatrixgenerator style="display: block;" #barcode id="barcode" [displayText] = 'displayTextMethod' width="200px" height="200px" mode="SVG"
type="DataMatrix" value="Testing">
</ejs-datamatrixgenerator>
</div>
</div>
</div>
</div>
</div>


scss file

canvas {
width:151.1811px;
height:75.5906px;
border:1px solid #c3c3c3;
}



4 Replies

VG Vivisa Ganesan Syncfusion Team April 27, 2023 01:40 PM UTC

Hi,

It is not possible to add syncfusion barcode component inside the canvas tag, but you can render barcode as a canvas by setting mode as "Canvas". refer to the below code example

Code-snippet:

mode = ”Canvas”


Regards,

Vivisa



ZJ Z.A Jafari April 29, 2023 05:42 AM UTC

thanks for your comments. 

One question, why the datamatrix barcode is not generated when I select a size of 14x14 or below in the demo

Can you please send me the link to the API documentation for the Angular syncfusion. Appreciate your help.


2023-04-29_09-07-59.jpg



VG Vivisa Ganesan Syncfusion Team May 2, 2023 12:41 PM UTC

Hi,

We will validate and update you with more details on May 04, 2023.


Regards,

Vivisa



VG Vivisa Ganesan Syncfusion Team May 3, 2023 12:46 PM UTC

Hi,

This is sample level issue. We have modified the sample as per your requirement. Please refer the sample below.

API Documentation: https://ej2.syncfusion.com/angular/documentation/api/diagram/

Sample:

https://stackblitz.com/edit/angular-puxk4a-jl8mv5?file=src%2Fapp.component.html

Regards,

Vivisa


Loader.
Up arrow icon