Dynamically superimpose multiple PNG or SVG images

[Don Price]

I am using three separate images: Image A, Image B, and Image C. These images are available in PNG, SVG.

In this example, Image A is a map of a mall. Image B is my friend and their location on a map. Image C is me and my position on the map.

I must rotate the map, so it orients the direction I am looking—similar in function to a compass. I must superimpose/overlay my friend’s relative location on the map (Image B). Finally, I must superimpose/overlay my location on the map (Image C).

I’ll use a service to calculate location of Image B/C and rotate Image A to its appropriate direction. I do not know how to dynamically overlay these images using NativeScript, etc. I purchased Telerik Platform Business Edition, but I don’t know if this matters for my needs.

I realize Canvas should work, but I don’t believe Canvas is yet available through Telerik Platform. D3 should work, but this is a guess and I do not know if D3 is supported through Telerik Platform.

Any direction is greatly appreciated!

Thank you!!

[Neli]

Hello Don,

My understanding is that your question addresses mobile app development with Telerik NativeScript. An ability to support the Canvas API is already on the the NativeScript Roadmap. You can follow and participate in the discussion about this feature in our GitHub repository.

Telerik Platform allows you to use the Canvas API in a hybrid mobile application. More information about starting developing such can be found here.

Do not hesitate to contact us should you have any further questions.

Regards,
Neli
Telerik

[Don Price]

Hi Neli,

 

Thank you for responding to my post. Unfortunately for me, you confirmed my suspicions, but it is oddly reassuring--knowing that I wasn't overlooking a NativeScript alternative. I decided to create my own web service that draws and auto generates the needed images (and composite image) on the fly--more than 30K composite images per second.

 This is a proof-of-concept; therefore, I don't need to achieve the high number of composite images for the production service--more than 1M per second, while limiting cost. Moving forward requires different designs--testing the best architecture to achieve low latency, high composite image output.

Thank you, Neli!

 My best,

Don

[Alex]

Hello,

One other approach you can try is to use the translateX, translateY, scaleX, scaleY and rotate properties of the view. You can put all the images in the same container (ex. GridLayout) - the map being first and images B/C on top of it. You can then position the B and C image using translateX/Y inside the map. Finally, you can apply rotate to the whole container to adjust the 'viewing" direction.
This way you can use a service only to update the coordinates of the B/C images (map probably won't change). This should dramatically decrease the data that is loaded form the service, allowing you app to tun faster.

I hope that was helpful. Don't hesitate to contact us again if you have  more questions or if you want to share the app when its ready.

Regards,
Alex
Telerik