Dynamically superimpose multiple PNG or SVG images

4 posts, 1 answers
  1. Don Price
    Don Price avatar
    3 posts
    Member since:
    Feb 2010

    Posted 02 Nov 2015 Link to this post

    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!!
  2. Answer
    Neli
    Admin
    Neli avatar
    1 posts

    Posted 05 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Don Price
    Don Price avatar
    3 posts
    Member since:
    Feb 2010

    Posted 05 Dec 2015 in reply to Neli Link to this post

    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

  4. Alex
    Admin
    Alex avatar
    129 posts

    Posted 08 Dec 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top