正方形图块图像的HTML / JavaScript 2D可缩放网格

时间:2018-11-09 21:38:14

标签: javascript html frontend web-development-server

我需要在图块中显示任意长度的图像网格。我有能力根据其在整个网格中的x和y坐标查找位置,并检索图像源字符串。我也有“中心”坐标在哪里。有没有可以用来简化此工作的框架或库?我想显示2D图像阵列的一部分,并且我需要能够更改该部分的大小。我可能想显示5x5正方形图像或25x25图像,具体取决于缩放系数。总体地图实质上是无限的,由基于输入坐标的渐进生成的数据组成。我完全不知道如何在HTML和javascript集成方面有效地做到这一点。我如何获得html来告诉javascript它试图显示什么坐标,以便可以调用坐标ToSrcString(x,y)方法。到目前为止,我已经编写了一些方法示例。 X和y坐标可以是任何整数,可以是负数或正数。

  

getCenter()//此方法返回当前中心点,一个对象   用x和y键,保持整数

     

getZoomFactor()//此方法获取当前的缩放系数,或者   在一侧显示的瓷砖数量。这永远是奇怪的   中间的瓷砖,没有怪异的偏移量。

     

coordinatesToSrcString(x,y)//此方法转换一组   坐标指向要显示在其中的图像文件的字符串   该位置。

如何使它正常工作?我是否需要制作一个需要不断调用的更新方法,以解决缩放因子或图块的更改,因为数据在用户操作后发生了更改。有没有办法建立一个框架,使该框架能够根据数据更改保持最新状态或不断更新?

0 个答案:

没有答案