HTML/Javascript 2D zoomable grid of square tile images

I need to display a grid of images of arbitrary length in tiles. I have the ability to lookup a position based on its x an y coordinates in the overall grid and retrieve an image source string. I also have where the "center" coordinate is. Is there a framework or library I can use to make this easy? I want to display a portion of a 2d array of images, and I need to be able to change the size of that portion. I could want to display 5x5 square images or 25x25 images, depending on the zoom factor. The overall map is essentially infinite, consisting of progressively generated data based on the input coordinates. I am at a complete loss of how to do this effectively and efficiently in terms of Html and javascript integration. how do I get the html to tell the javascript what coordinate it is trying to display so it can call the coordinatesToSrcString(x,y) method. Examples of methods I have written thus far are as follows. X and y coordinates can be any integer, negative or positive.

getCenter() //this method returns the current center point, an object with keys x and y, holding integers

getZoomFactor() //this method gets the current zoom factor, or the amount of tiles to display on a side. This will always be odd to allow for a center tile, and no weird offset.

coordinatesToSrcString(x,y) //this method converts a set of coordinates to the string that points to the image file to display at that position.

How do I get this to work? Do I need to make an update method that needs to be called constantly to account for changes to the zoom factor or tiles since the data changes after user actions. Is there a way to have a framework that will keep this updated on data changes or constantly up to date?

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.