小编X4V*_*4V1的帖子

我目前正在使用离子和cordova在移动设备(Android和iPhone)上开发应用程序.我想编辑一张图片.我使用fabric.js库来做到这一点.Fabric.js将图像和其他项目转换为画布.然后我在画布上添加一些图像(贴纸)并将其导出为图像(dataURL).因此画布的大小非常重要,因为它是一个品质因素(基于小画布导出图像会导致质量差).画布大小约为607*1080像素(取决于拍摄照片的设备).我想把它放在屏幕上而不会失去质量(如下所述,我不能在不损失质量的情况下调整画布大小).

我尝试了3个想法,但没有人有效.

1. 调整画布大小:导致质量丢失(导出的图像将具有画布大小)
2. 调整视口:cordova不允许更改移动设备上的视口.有一个解决方法,但它会破坏我的设计(非常小的导航栏,较小的菜单,......)
3. 使用CSS3缩放属性:它就像桌面上的魅力一样,但在移动设备上有一个事件映射问题(我没有尝试使用ios,但问题发生在Android Webview上).事件映射未缩放.画布已缩小,但无法与画布元素进行交互.如果画布元素(标签)位于x:100 y:100,当我将zoom属性设置为0.5时,元素将位于(50,50)并且不再位于(100,100).有没有办法根据android webview的缩放属性更正事件映射？

我不知道是否有其他方法可以做到这一点,但我已经坚持了3天这个问题,我花了很多时间在论坛,fabricjs doc和谷歌上,我找不到任何有用的解决方案或者其他可以帮助我的东西.

编辑:下面有2个工作解决方案.检查我的答案,看看如何用css做到这一点.