Open Wondermarin opened 4 years ago
There's just one slight problem with this, printCircularImage
was easy because the pivot is always in the center (x
and y
are always the centre of the image) and then the image is scaled keeping that in mind.
But in both printImage
and printRoundedImage
, this pivot is in the top left corner. What does this mean?
A top-left pivot means the image will always print in the specified x
and y
coordinate, everything else will adjust to its container (even if that means leaving some empty space in the bottom). This is similar to how banners are drawn in many websites (YouTube, Patreon...). This approach is easy and I have written it recently for a game of mine, I can port it easily once I figure out how to re-use printCircularImage
's fit
code so I don't end up with code duplication.
A pivot in the centre is certainly how the object-fit
CSS property works, aligns well with printCircularImage
's behaviour and can be used fairly easily with small modifications. I can think of it being useful for non-circular avatars.
Since both have their use-cases, I'll probably have to implement pivot
, which will take time (and sadly will probably take over a month, my exams start in one week).
I guess I can implement the second one as it's the easiest and fastest way to implement it, and release when tested, then once I have time and I figure the maths out, add pivot
taking [number, number]
.
Well, we'll wait. Good luck with your exams!
Is there any news?
Im having the same issue.
My code has a printImage that has a diffrent size for each user. Because of this the width and height of the image isnt always the same which results in the image not filling the block at all or the image being too big for the block.
Would like to know if somebody has a fix for this.
Sorry for the lack of activity in this issue.
Please feel free to make a PR implementing the utility method, I have had my hands full in the last year with university and other projects 😓
This is not only useful for circular images.
Add
options.fit
inCanvas#printImage
. Addoptions.fit
inCanvas#printRoundedImage
.Thank in advance.