在我的项目中,我正在使用HTML5 Canvas和FabricJS . 我有方案来维护我放在画布中的图像对象的宽高比 . 在调整角落或缩放图像时,我必须更新宽度或高度以保持图像的纵横比 .
上面的图片将清楚地显示我的问题 . 我需要一个算法或公式来维护图像的方面 .
图像应满足以下条件,
-
如果我通过从实际尺寸调整图像的宽度或高度来收缩,它将裁剪并以相同的宽高比显示图像 .
-
如果我通过从实际尺寸调整图像的宽度或高度来扩展,它将分别扩展图像高度或宽度,并为视口高度和宽度裁剪以保持纵横比 .
-
隐藏的部分被平移和查看 .
请给我一些解决方案,谢谢 .
2 回答
要确保按比例完成调整大小,您只需将以下属性添加到图像对象:
我通常希望图像从中心缩放,因此也设置它:
然而,要“裁剪”图像;这需要更多的努力,因为这不是Fabric JS提供的默认功能 . 我已经做了相当多的工作,并且尚未提出适用于文本,图像,矩形,多边形,圆形,旋转角度等的防弹解决方案 .
这背后的基础是创建两个元素 - 一个是您的图像,第二个是剪切蒙版(通常是一个形状,如矩形,多边形等),然后将其作为clipTo属性应用于图像元素 . 此解决方案包含在:Multiple clipping areas on Fabric.js canvas
参考文献 - Fabric JS Documentation
当您使用HTML5时,您可以将CSS3转换应用于画布:
使用带有缩放方法的CSS3转换属性应该调整画布的大小,并保持纵横比 . 这也是
但是,您可能需要解决由视网膜/高dpr显示引起的单独缩放问题 .
有关CSS3转换属性的更多信息,请访问:https://developer.mozilla.org/en-US/docs/Web/CSS/transform