渲染模式

---

立即下载Kendo UI for Angular

条形码支持两种呈现模式——画布(位图)和SVG(矢量图形)。

默认情况下，条形码使用SVG呈现。你可以通过设置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

建议一般使用默认的SVG呈现模式。

使用矢量图形确保：

• 浏览器缩放不会降低图像的质量。
• 无论分辨率如何，指纹都很清晰。

何时使用画布

当性能至关重要时，例如，在呈现大型页面时，建议使用Canvas呈现模式。

浏览器不需要为图表维护一个活动的DOM树，这将导致：

• 更快的屏幕更新。
• 更低的内存使用率。

缺点是，渲染到固定分辨率的位图会导致：

• 变焦时图像模糊。
• 打印质量差。