In This Topic ▼

enableRequestAnimationFrame Property

Summary

Indicates whether the ImageViewer should use HTML5 requestAnimationFrame when rendering the image.

Syntax

TypeScript

JavaScript

Object.defineProperty(ImageViewer.prototype, 'enableRequestAnimationFrame', 
	get: function(), 
	set: function(value) 
)

enableRequestAnimationFrame: boolean;

Property Value

true if the ImageViewer should use HTML5 requestAnimationFrame when rendering the image, otherwise; false. Default value is false.

Remarks

This value controls what happens when the viewer renders its content as described in Image Viewer Rendering.

If the browser supports HTML5 requestAnimationFrame, then you schedule the drawing operation only when the system is ready. To use requestAnimationFrame, set EnableRequestAnimationFrame to true. If your browser does not support requestAnimationFrame then setting EnableRequestAnimationFrame to true will have no affect and rendering will be performed instantly.

When using EnableRequestAnimationFrame, you should not assume that the foreground canvas is updated immediately after Invalidate is called. For example, this snippet of code:

// Assume viewer.enableRequestAnimationFrame has been set to true 
// Draw the content to the foreground canvas 
viewer.invalidate(); 
// Get the image data of the foreground canvas 
var canvas = viewer.canvas; 
var context = canvas.getContext('2d'); 
// If the image is hosted on a different domain than the script, you cannot access image data without causing a security exception. 
var imgData = context.getImageData(0, 0, canvas.width, canvas.height);

This code might not work as expected since Invalidate might not have updated the foreground canvas at this point and only scheduled the draw operations. You can update the code as below to make sure you have the data in the foreground canvas:

// Assume viewer.enableRequestAnimationFrame has been set to true 
// Draw the content to the foreground canvas 
// Temporarily disable animation request, the viewer will update the foreground canvas immediately 
// Save the old value, set it to false, render and set the value back to the saved value 
var enableAnimationRequest = viewer.enableRequestAnimationFrame; 
viewer.enableRequestAnimationFrame = false; 
viewer.invalidate(); 
viewer.enableRequestAnimationFrame = true; 
// Get the image data of the foreground canvas 
var canvas = viewer.canvas; 
var context = canvas.getContext('2d'); 
// If the image is hosted on a different domain than the script, you cannot access image data without causing a security exception. 
var imgData = context.getImageData(0, 0, canvas.width, canvas.height);

Requirements

Target Platforms

Reference

ImageViewer Class

ImageViewer Members

Leadtools.Controls Namespace

Download our FREE evaluation

Help Version 21.0.2021.7.2

Leadtools.Controls Assembly

Introduction

Getting Started

Namespaces

Leadtools.Controls Namespace

Assemblies