CODEWITHSUNDEEP
html5-canvasdartgame-engine
Jorge Luis Vargas
Jorge Luis Vargas

Reputation: 174

How to draw a resized image to a rect on Dart

I'm trying to code some animations to my GameEngine, what I've done so far is use sprite-sets with all the possible frames of the element I'm animating, for this I use the drawImageToRect method and it works pretty well. However now I want not only to draw a piece of the image but also I want to resize the image and draw only a piece of it.

enter image description here

Checking the documentation I notice there's a method to draw a resized image drawImageScaledFromSource but this only allows me to draw the complete image and resize it. Which is not convenient since I want to handle animations in a single file and if I'd have to manually resize the same animation image multiple times to handle different sizes.

Is possible to resize and image AND draw only a piece of it?

Upvotes: 0

Views: 483

Answers (1)

Alexandre Ardhuin
Alexandre Ardhuin

Reputation: 76183

drawImageScaledFromSource that you mention in your question seems to provide what you want. See the example attached to the documentation :

VideoElement video = document.query('video');
video.width = 100;
video.height = 100;
// Take the middle 20x20 pixels from the video and stretch them.
ctx.drawImageScaledFromSource(video, 40, 40, 20, 20, 50, 50, 100, 100);

The four source parameters allow to take any portion of the source.

Upvotes: 3

Related Questions