DrawImageEx :)

#1 · August 23, 2022, 1:10 pm

Is there an advanced DrawImage like:

DrawImage gr id file sourceX sourceY sourceWidth sourceHeight destX destY
or best
DrawImage gr id file sourceX sourceY sourceWidth sourceHeight destX destY destWidth destHeight

The idea is to load a big image and cut it into tiles.

Thank you :)

#2 · August 23, 2022, 1:47 pm

@patrik I think neoCrop plugin could be what you are looking for:

https://visualneo.com/tutorials/neocrop/
https://webhelp.visualneo.com/neoCrop.html

Let me know if it works for you.
Regards.

#3 · August 23, 2022, 1:52 pm

@patrik if you prefer to use SVG as DraImage does, you can try using SetViewBox to clip the images:

https://svgbox.net/blog/crop-svg-image/

Regards

#4 · August 23, 2022, 4:40 pm

I don't understand how to go about it, in what order should we put the NeoCrop instructions... :(
The goal is to take a piece of the source image (x,y,w,h) to place it in the destination image (xx,yy).
Can I have a small example?
Thanks in advance.

#5 · August 23, 2022, 5:16 pm

@patrik have you already checked the included sample apps located under MyDocuments\VisualNeoWeb\Sample Apps\neoCrop?

Regards.

#6 · August 23, 2022, 6:03 pm

My problem (see the picture)...

Uploaded files:

You need to login to have access to uploads.

#7 · August 24, 2022, 9:11 am

@patrik I don't understand you. Can you please elaborate a little bit?
Thank you!

#8 · August 24, 2022, 6:56 pm

This function exists in JavaScript (canvas) : context.drawImage(img,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);

#9 · August 25, 2022, 8:34 am

@patrik yes, I know but note that all drawing commands in VisualNEO Web use a very different technology (SVG graphics)
To manage Canvas related graphics, VisualNEO Web includes FabricJS plugin (this is one of the most advanced ones)
Double-clicking any image allows croping it but it doesn't offer any way to do it programaticaly.

Perhaps if I better understand your final goal I can help a bit more.

#10 · August 25, 2022, 1:43 pm

We take this image on which there are tiles.
By arranging, duplicating, rotating these tiles, we can create a (huge) landscape on another image/container

Uploaded files:

You need to login to have access to uploads.

#11 · August 26, 2022, 12:24 pm

@patrik only way to do what you want is using Canvas HTML.
I have created a new plugin with the commands you need as a start point for a more complete one.
Please take a look at the sample app, plugin and plugin source code and let me know if this is a solution for you.

Thank you!

Uploaded files:

You need to login to have access to uploads.

javadrajabihakami and Patrik have reacted to this post.

#12 · August 26, 2022, 1:04 pm

A very big-huge-faboulous thank :)
I'm looking at all this ASAP !

---EDIT---

Perfect work !!

Just a funny ascertainment : the syntax is neoCanvasDrawImageTile destId sourceId sx sy sw sh dx dy dw dh
(sx = source.x, dw = dest.width etc.)
There is an inversion source/destination between ids and coords :)

#13 · August 26, 2022, 7:17 pm

There is an inversion source/destination between ids and coords :)

@patrik that's because most commands first parameter is the destination Container. I just wanted to be as consistent as possible.
I'm glad it worked for you :)

Best thing about VisualNEO Web is it's very easy to expand thanks to plugins.
Note that you can check the plugin source code and modify it using the included Plugin Generator.

#14 · August 26, 2022, 8:17 pm

Anyway, thank you for this plugin :

I will now do a little test to display tiles on a phone.
By the way, what is the average resolution (pixels) of a smartphone?

Uploaded files:

You need to login to have access to uploads.

#15 · August 27, 2022, 10:22 am

By the way, what is the average resolution (pixels) of a smartphone?

@patrik there is not such a thing. Too much diversity, including retina display etc. You should think on average screen aspect ratio instead.
What I do is using a relatively high resolution (in pixels) and then scale the whole app according to the current device using FitAppToScreen command (cover screen = true). You just need to left enough space on margins as they could be trimmed on some devices with a different aspect ratio than your app.
I think this is the best approach for games.
The "VirusKiller" sample game app (source code included with VisualNEO Web) uses this technique.
Note that you can play the game on almost any screen size.

#16 · August 27, 2022, 1:20 pm

I don't see FitAppToScreen in VirusKiller code... :(

The near only code is :
slScaleAppLetterBoxMax 1024 600
AppBackgroundColor "#000000"
ResizeDesktopWindow 1024 625

#17 · August 27, 2022, 5:04 pm

@patrik VisualNEO Web has evolved a lot. When I did VirusKiller there was not FitAppToScreen command. But it's the same concept. If you use slScaleAppLetterBoxMax instead there will be a maximum size for scaling the content. ResizeDesktopWindow only works on installed PWA's.

#18 · August 27, 2022, 5:40 pm

Thank you...

Juste a little math problem : how to do an integer division, and not a rounding?
According to the documentation, Math does a rounding.

#19 · August 27, 2022, 5:52 pm

@patrik I dont understand you... If you do something like this:

SetVar [number1] 4
SetVar [number2] 3
SetVar [result] [number1]/[number2]

You will get 1.3333333333333333 as a result. What do you expect to get?

#20 · August 27, 2022, 6:08 pm

I wish 1 (integer), not 1.333 (float)

I find a solution : ([tn] - ([tn] Mod 10))/10

DrawImageEx :) - Forum

DrawImageEx :)

Perfect work !!

Perfect work !!