文檔半島外圍網上直營>>telerik中文文檔>>渲染模式
                渲染模式
條形碼支持兩種呈現模式——畫布(位圖)和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樹,這將導致:
- 更快的屏幕更新。
- 更低的內存使用率。
缺點是,渲染到固定分辨率的位圖會導致:
- 變焦時圖像模糊。
- 打印質量差。

 QQ交談
QQ交談 在線咨詢
在線咨詢 
                 
                
 渝公網安備
            50010702500608號
渝公網安備
            50010702500608號
             
            
 客服熱線
客服熱線