渲染模式

---

立即下載Kendo UI for Angular

條形碼支持兩種呈現(xiàn)模式——畫布(位圖)和SVG(矢量圖形)。

默認(rèn)情況下，條形碼使用SVG呈現(xiàn)。你可以通過設(shè)置BarcodeComponent.renderAs和QRCodeComponent.renderAs屬性來選擇渲染模式。

查看源代碼：

app.component.ts：

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<div class="k-card-deck">
<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
SVG Rendering
</div>
</div>
<div class="k-card-body">

<kendo-barcode type="Code128" value="Mascarpone"
[width]="200" [height]="100"
renderAs="svg">
</kendo-barcode>

</div>
</div>
<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
Canvas Rendering
</div>
</div>
<div class="k-card-body">

<kendo-barcode type="Code128" value="Mascarpone"
[width]="200" [height]="100"
renderAs="canvas">
</kendo-barcode>

</div>
</div>
</div>
`
})
export class AppComponent {
}

app.module.ts:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BarcodesModule } from '@progress/kendo-angular-barcodes';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule, BarcodesModule, ButtonsModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})

export class AppModule { }

main.ts:

import './polyfills';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

何時使用SVG

建議一般使用默認(rèn)的SVG呈現(xiàn)模式。

使用矢量圖形確保：

• 瀏覽器縮放不會降低圖像的質(zhì)量。
• 無論分辨率如何，指紋都很清晰。

何時使用畫布

當(dāng)性能至關(guān)重要時，例如，在呈現(xiàn)大型頁面時，建議使用Canvas呈現(xiàn)模式。

瀏覽器不需要為圖表維護(hù)一個活動的DOM樹，這將導(dǎo)致：

• 更快的屏幕更新。
• 更低的內(nèi)存使用率。

缺點是，渲染到固定分辨率的位圖會導(dǎo)致：

• 變焦時圖像模糊。
• 打印質(zhì)量差。