使用<;在图像上自由绘制/上传json数据;帆布>;和javascript

使用<;在图像上自由绘制/上传json数据;帆布>;和javascript,javascript,canvas,graphics,3d,2d,Javascript,Canvas,Graphics,3d,2d,我想创建一个类似谷歌地图的应用程序,其中显示缩放和平移,标记不会缩放,但会转换到各自的位置 我的项目需要在Pdf/image/svg文件上绘制JSON数据(x,y坐标)。。当缩放数据时,只有pdf/image/svg文件应该缩放,并且上面的数据应该转换到各自的位置,但不应该缩放 我从来没有找到任何相关的例子。所有示例都类似于画布或svg元素上的绘图数据……等等 我的问题是。。。。这种应用程序可以用Canvas+javascript创建吗? 或者任何其他需要使用的语言或插件?您当然可以 我设计了一

我想创建一个类似谷歌地图的应用程序,其中显示缩放和平移,标记不会缩放,但会转换到各自的位置

我的项目需要在Pdf/image/svg文件上绘制JSON数据(x,y坐标)。。当缩放数据时,只有pdf/image/svg文件应该缩放,并且上面的数据应该转换到各自的位置,但不应该缩放

我从来没有找到任何相关的例子。所有示例都类似于画布或svg元素上的绘图数据……等等

我的问题是。。。。这种应用程序可以用Canvas+javascript创建吗? 或者任何其他需要使用的语言或插件?

您当然可以

我设计了一个映射系统,将json(geoJson)加载到画布上。 符号等。我故意不缩放,所以这应该是你喜欢做的

实际上,您所做的一切都是以设备单位(像素)和现实世界单位(逻辑)为单位的

我将所有数据存储在逻辑单元中,并在绘制时将其转换为设备单元。 由于坐标系之间存在差异(屏幕使用左上角作为0,0),因此必须计算两者之间的偏移量。添加比例,您可以缩放

初始比例是屏幕宽度/数据宽度。使用单个缩放值并按其缩放X和Y,以避免缩放时拉伸

存储顶部、左侧和缩放后,可以通过以下方式将任何逻辑单元转换为设备单元:

设备点x=(逻辑点x-左)*比例

设备点y=(顶部-逻辑点y)*刻度//笛卡尔系统校正

并返回到逻辑单元

逻辑点x=(设备点x/刻度)+左侧

逻辑点y=顶部-(设备点y/刻度)//笛卡尔系统校正

希望有帮助