import { Component, StatefulComponent } from 'valdi_core/src/Component'; import { systemBoldFont, systemFont } from 'valdi_core/src/SystemFont'; import { AnyRenderFunction } from 'valdi_core/src/AnyRenderFunction'; import { createManagedContext, EmbeddedPlatformViewRasterMethod } from 'drawing/src/ManagedContextFactory'; import { BitmapAlphaType, BitmapColorType, ImageEncoding } from 'drawing/src/IBitmap'; import { createBitmap, createBitmapWithBuffer } from 'drawing/src/BitmapFactory'; import { Asset } from 'valdi_tsx/src/Asset'; import { makeAssetFromBytes } from 'valdi_core/src/Asset'; import { Device } from 'valdi_core/src/Device'; const COMPONENT_HEIGHT = 200; class InnerComponent extends Component { onRender(): void { ; } } function Section(viewModel: { name: string; children?: AnyRenderFunction | void }) { {viewModel.children?.()} ; } function Button(viewModel: { title: string; onTap: () => void }) { ; } const DOWNSCALE_RATIO = [1, 2, 4, 8]; interface State { rasterMethod: EmbeddedPlatformViewRasterMethod; rasterizedAsset?: Asset; downscaleRatioIndex: number; } export class App extends StatefulComponent<{}, State> { state: State = { rasterMethod: EmbeddedPlatformViewRasterMethod.FAST, downscaleRatioIndex: 0, }; onRender(): void {

{ }

{

}

; } toggleDownscaleRatio = () => { const nextDownscaleRatioIndex = (this.state.downscaleRatioIndex + 1) % DOWNSCALE_RATIO.length; this.setState({ downscaleRatioIndex: nextDownscaleRatioIndex, }); }; toggleRasterMethod = () => { this.setState({ rasterMethod: this.state.rasterMethod === EmbeddedPlatformViewRasterMethod.FAST ? EmbeddedPlatformViewRasterMethod.ACCURATE : EmbeddedPlatformViewRasterMethod.FAST, }); }; rasterize = () => { this.doRasterize() .then(asset => { console.log('Rasterized asset:', asset); this.setState({ rasterizedAsset: asset }); }) .catch(error => { console.error('Error rasterizing:', error); }); }; private getComponentSize(): [number, number] { const width = this.renderer.getComponentRootElements(this, true)[0].frame.width; const height = COMPONENT_HEIGHT; return [width, height]; } private async doRasterize(): Promise { const [componentWidth, componentHeight] = this.getComponentSize(); const context = createManagedContext({ useNewExternalSurfaceRasterMethod: this.state.rasterMethod, enableDeltaRasterization: true, }); context.render(() => { ; }); await context.onAllAssetsLoaded(); await context.layout(componentWidth, componentHeight, false); const { frame } = await context.draw(); const scale = Device.getDisplayScale() / DOWNSCALE_RATIO[this.state.downscaleRatioIndex]; const rasterWidth = Math.floor(scale * componentWidth); const rasterHeight = Math.floor(scale * componentHeight); const bytesPerPixel = 4; const bitmap = createBitmap({ width: rasterWidth, height: rasterHeight, colorType: BitmapColorType.RGBA8888, alphaType: BitmapAlphaType.OPAQUE, rowBytes: rasterWidth * bytesPerPixel, }); frame.rasterInto(bitmap, true); const buffer = bitmap.encode(ImageEncoding.PNG, 1.0); frame.dispose(); bitmap.dispose(); context.dispose(); return makeAssetFromBytes(buffer); } } const styles = {};

Files

Loading code snippet…