DrawImage Method
Class THtml5Canvas2D
procedure DrawImage(Node: TDOM_Node; x: Double; y: Double); overload;
procedure DrawImage(Node: TDOM_Node; x, y, Width, Height: Double); overload;
procedure DrawImage(Node: TDOM_Node; sx,sy,sWidth,sHeight,x,y,Width,Height: Double); overload;
The DrawImage method draws an image, canvas, or video onto the canvas. The DrawImage method can also draw parts of an image, and/or increase/reduce the image size.
Parameter Values
procedure DrawImage(Node: TDOM_Node; x: Double; y: Double); overload;
Draw an image, canvas, or video at a specified position.
Handle to the image, canvas, or video element to use.
The x coordinate where to place the image on the canvas.
The y coordinate where to place the image on the canvas.
procedure DrawImage(Node: TDOM_Node; x, y, Width, Height: Double); overload;
Draw an image, canvas, or video with a specified width, height, and position.
Handle to the image, canvas, or video element to use.
The x coordinate where to place the image on the canvas.
The y coordinate where to place the image on the canvas.
The width of the image to use (stretch or reduce).
The height of the image to use (stretch or reduce)
procedure DrawImage(Node: TDOM_Node; sx,sy,sWidth,sHeight,x,y,Width,Height: Double); overload;
Draw a clipped image, canvas, or video with a specified width, height, and position.
Handle to the image, canvas, or video element to use.
The x coordinate where to start clipping.
The y coordinate where to start clipping.
The width of the clipped image.
The height of the clipped image.
The x coordinate where to place the image on the canvas.
The y coordinate where to place the image on the canvas.
The width of the image to use (stretch or reduce).
The height of the image to use (stretch or reduce)
Image Examples:
Note:
The image need to be loaded before it can be drawn onto a canvas.
Image to Use:
Draw the image onto the canvas at postion x=0 and y=0: The "OnUpdate" event is used to to draw the loaded image.
procedure DrawImage(Node: TDOM_Node; x: Double; y: Double); overload;
Procedure MyForm.OnImgLogoUpdate(Event:
TDOMEvent);
Begin
Canvas.DrawImage(ImgLogo.DomHandle,0,0);
End;
Position the image on the canvas, and specify width and height of the image. Load the image via a hidden runtime created Image class:
procedure DrawImage(Node: TDOM_Node; x, y, Width, Height: Double); overload;
var
MyImage: Image;
Procedure MyForm.WebFormReady(Var Ready: Boolean);
Begin
MyImage := Image.Create('morfiklogo', self);
MyImage.Visible := False;
MyImage.CreateDOMObject;
MyImage.DomHandle.addEventListener('load',
getMethodPointer(self, @DrawMyImage), true);
MyImage.ImageHandle.src := Catalog.BaseURL +
'img/morfik_logo.jpg?cls=res';
End;
Procedure MyForm.DrawMyImage;
Begin
Canvas.DrawImage(MyImage.DomHandle,0,0,150,72);
End;
Clip the image and position the clipped part on the canvas. The "OnUpdate" event is used to to draw the loaded image:
procedure DrawImage(Node: TDOM_Node; sx,sy,sWidth,sHeight,x,y,Width,Height: Double); overload;
Procedure MyForm.OnImgLogoUpdate(Event:
TDOMEvent);
Begin
Canvas.DrawImage(ImgLogo.DomHandle,
10,10,100,67,0,0,100,67);
End;
Canvas Example:
Copy content of a canvas to another canvas using the DrawImage method:
Source Canvas:
Destination Canvas:
DestCanvas.DrawImage(SrcCanvas.Handle,0,0);
Video Example:
Note:
Some mobile devices do not support drawing from a video canvas.
Draw video images onto a canvas:
Video to use. Press Play to
start the demonstration:
Destination Canvas:
http%3A%2F%2Fcanvas.dsplayer.com%2Fvideo%2Ftrailer_poster.png
http%3A%2F%2Fcanvas.dsplayer.com%2Fvideo%2Ftrailer.mp4
http%3A%2F%2Fcanvas.dsplayer.com%2Fvideo%2Ftrailer.webm
http%3A%2F%2Fcanvas.dsplayer.com%2Fvideo%2Ftrailer.ogv
var
Interval: MetaType;
Procedure MyForm.DrawVideoImage;
Begin
Canvas.DrawImage(Webplayer.DomHandleVideo,0,0,272,162);
End;
Procedure MyForm.OnWebplayerPlaying;
Begin
Interval :=
window.setInterval(getMethodPointer(self, @DrawVideoImage), 40);
End;
Procedure MyForm.OnWebplayerPause;
Begin
window.clearInterval(Interval);
End;
Procedure MyForm.OnWebplayerEnded;
Begin
window.clearInterval(Interval);
End;