バージョン

QR バーコードのサイズの構成 (igQRCodeBarcode)

トピックの概要

目的

このトピックは、ストレッチや塗りつぶし、最小サイズ要素のサイズなど、igQRCodeBarcode™ コントロールのサイズや寸法に関する要素を設定する方法を説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

  • igQRCodeBarcode の概要: このトピックでは、主要機能、最小要件など、igQRCodeBarcode コントロールの概念的情報を提供します。

  • igQRCodeBarcode の追加: このトピック グループでは、igQRCodeBarcode コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

概要

QR バーコードのサイズ構成の概要

width および height プロパティが igQRCodeBarcode コントロールに対して設定されていない場合、コンテナーのサイズ (定義されている場合) に基づきサイズが設定されます。高さと幅を設定すると、QR バーコード マトリックスが表示される長方形領域が作成されます。この領域をマトリックスで塗りつぶす方法をさまざまな形で指定できます。

  • マトリックスのストレッチ
  • 最小サイズ要素のサイズ
  • 内部グリッドの塗りつぶしモード

詳細は、QR バーコードのサイズ構成の概要表を参照してください。

QR バーコードのサイズ構成の概要表

以下の表は、QR バーコードのサイズに関連した構成可能な要素を示します。詳細は、表の後に記載されています。

構成可能な項目 詳細 プロパティ
最小サイズ要素のサイズ シンボルに対する igQRCodeBarcode の最小サイズ要素の幅は、ミリメートル単位で調整できます。
マトリックスのストレッチ igQRCodeBarcode がコンテナー内に持つ水平と垂直のスペースを指定できます。
論理グリッドの塗りつぶしモード バーを含む内部グリッドで igQRCodeBarcode コントロールのサイズを塗りつぶす方法をカスタマイズできます。

最小サイズ要素のサイズの構成

概要

マトリックスの最小サイズ要素の幅によって、マトリックス自体のサイズが決まります。この幅は、コンテナー内の使用可能なスペースと、QR バーコードをデコードする技術 (携帯電話など) にも関係があります。最小サイズ要素のサイズは、igQRCodeBarcode コントロールの xDimension プロパティにより管理されます。コントロールの stretch オプションが、コンテナーがその名目上のサイズ、たとえば stretch = "none" になるような値に設定される場合に、プロパティの値が考慮されます。

プロパティ設定

以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。

目的: 使用するプロパティ: 設定の選択肢:
最小サイズ要素の幅の指定 xDimension 0.01 ～ 100 の範囲内の任意の値

例

以下のスクリーンショットは、以下の設定の結果、igQRCodeBarcode コントロールの外観がどのようになるか示しています。

プロパティ 値
width "100px"
height "150px"
data "http://www.infragistics.com"
stretch "none"
xDimension “0.8”

以下のコードはこの例を実装します。

HTML の場合:

<head>
...
    <script type="text/jscript">
        $(function () {                        
          $("#barcode").igQRCodeBarcode({
                data: "http://www.infragistics.com",
                width: "100px",
                height: "150px",
                stretch:"none",
                xDimension:"0.8"
            });
            });
    </script>
</head>
<body>
      <div id="barcode"></div>
</body>

マトリックスのストレッチの構成

概要

QR バーコード マトリックスのストレッチは、マトリックスがコントロールのコンテナーを占有する幅の水平および垂直の範囲を決定します。これは stretch オプションで管理されます。

以下の表は、stretch オプションがサポートする値を説明し、その効果を示します。

値 結果 説明 詳細
fill コンテンツは、指定先の寸法を満たすためにサイズ変更されます。 塗りつぶしを使う場合、コンテンツの高さと幅は個別に拡大縮小されるため、元の画像のアスペクト比は保持されません。このため、バーコードが読み取りに使用される場合は、この値を使用しないことをお勧めします (読み取りには、none または uniform を使用します)。
none コンテンツは名目上の寸法を保持します。 uniform
(デフォルト) コンテンツは、指定先の寸法に収めるためにサイズ変更され、ネイティブ アスペクト比は保持されます。
uniformToFill コンテンツは、指定先の寸法に完全に収めるためにサイズ変更され、ネイティブ アスペクト比は保持されます。 指定先の四角形のアスペクト比がソースと異なる場合、余分なソース コンテンツは切り取られます。

プロパティ設定

以下の表は、望ましい伸縮のビヘイビアーと、それを構成するプロパティ設定の関係を示します。

目的: 使用するプロパティ: 設定の選択肢:
指定先の寸法を満たすためにソース コンテンツのサイズを変更 stretch
  • "fill"
ソース コンテンツの名目上の寸法を保持します stretch
  • "none"
指定先の寸法に収めるために、ネイティブ アスペクト比は保持した状態でソース コンテンツのサイズを変更 stretch
  • "uniform"
ソース コンテンツは、指定先の寸法に収めるためにサイズ変更され、ネイティブ アスペクト比は保持されます。 stretch
  • "uniformToFill"

例

以下のスクリーンショットは、以下の設定の結果、igQRCodeBarcode コントロールの外観がどのようになるか示しています。

プロパティ 値
width "100px"
height "150px"
data "http://www.infragistics.com"
stretch "fill"

以下のコードはこの例を実装します。

HTML の場合:

<head>
...
    <script type="text/jscript">
        $(function () {                        
          $("#barcode").igQRCodeBarcode({
                data: "http://www.infragistics.com",
                width: "100px",
                height: "150px",
                stretch:"fill"
            });
            });
    </script>
</head>
<body>
      <div id="barcode"></div>
</body>

ローカル グリッドの塗りつぶしモードの構成

概要

バーコードを構成するそれぞれのバーは、論理グリッド内で可視化されます。igQRCodeBarcode コントロールの barsFillMode プロパティは、バーを含む論理グリッドがコントロールのサイズを塗りつぶす方法を定義します。デフォルトでは、グリッドは igQRCodeBarcode コントロールが使用できるスペースをすべて塗りつぶします。

barsFillMode が fillSpace に設定されている場合、コントロールの寸法、バー グリッドおよびユーザーの DPI によっては、実際のバーの幅と高さはコードで設定された寸法と異なることがあります。それによりバーコードが読み取れなくなる場合があります。たとえば、内部グリッドに 200 列あり、コントロールの幅が 300 px の場合、コントロールを塗りつぶすために柱状バーは整数の幅を持ちます (1px と 2px の場合があります)。このモードはマシンの読み取りを行わないすべてのシナリオに推奨されます。

マシン読み取りの推奨モードは、ensureEqualSize です。内部グリッドに 200 列あり、コントロールの幅が 300px の場合、グリッドの幅は 200px に縮小し、すべてのセルが等しくなります。

プロパティ設定

以下の表は、論理グリッドの塗りつぶしのビヘイビアーと、それを構成するプロパティ設定をマップします。

目的: 使用するプロパティ: 設定の選択肢:
コントロールのコンテナーを塗りつぶし用に論理グリッドの構成 barsFillMode fillSpace
論理グリッドのバーのセルのディメンションを同じサイズに構成 barsFillMode ensureEqualSize

例

以下のスクリーンショットは、以下の設定の結果、igQRCodeBarcode コントロールの外観がどのようになるか示しています。

プロパティ 値
width "150px"
height "150px"
data "http://www.infragistics.com"
barsFillMode "ensureEqualSize"

以下のコードはこの例を実装します。

HTML の場合:

<head>
…
    <script type="text/jscript">
        $(function () {                        
                  $("#barcode").igQRCodeBarcode({
                    data: "http://www.infragistics.com",
                    width: "150px",
                    height: "150px",
                    barsFillMode:"ensureEqualSize"
            });
            });
    </script>
</head>
<body>
      <div id="barcode"></div>
</body>

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

サンプル

このトピックについては、以下のサンプルも参照してください。

オンラインで表示: GitHub