我目前正在处理一个用例，在这个用例中，我将地图设置为画布的背景，并在上面绘制，缩放选项也集成在其中。
我正在将画布加载到带有滚动的DIV中，期望避免图像在放大后被裁剪，并且滚动应该在放大期间动态增加。
下面是我用纯HTML和JS编写的示例片段。如果有人有相同的解决方案或变通方法，请提供帮助。提前感谢
注意：即使Angular中有任何插件可用，也请发表评论，因为我正在使用Angular实时，并且我已经创建了一个简单的项目来测试的功能
<html>
<head>
<style>
#canvasId{
background-image:url('https://www.hauteresidence.com/wp-content/uploads/2013/04/1049-Fifth-Avenue-PH3-floor-plan-high-res-e1366734485238-1024x792.jpg');
width: 1300px;
height:1300px;
background-repeat:no-repeat;
overflow : auto;
}
</style>
<script>
function myFunction(eventObj) {
var scale =document.getElementById("canvasId").getAttribute("scl");
if(scale==undefined)
scale = 0;
else
scale = parseInt(scale);
scale += eventObj.deltaY * -0.01;
scale = Math.min(Math.max(.125,scale),5);
document.getElementById("canvasId").setAttribute("scl",scale);
var check =document.getElementById("canvasId").getAttribute("scl");
if(scale>=1)
document.getElementById("canvasId").style.transform = "scale("+scale+","+scale+")";
}
</script>
<body>
<div style="width:700px;height:400px;overflow:scroll">
<canvas id ="canvasId" onWheel="myFunction(event)">
</canvas>
</div>
</body>
</html>Temani关于变换原点的建议正是我解决"裁剪"行为所需要的。默认情况下，变换原点值设置为"50%50%0"或"圆心"。这意味着我们应用的缩放或缩放效果从目标(图像(的中心发出，并越来越多地在div的左侧"流血"。。它通过滚动变得不可访问，并且看起来"裁剪"了。将转换原点设置为：
transform-origin: 0% 0% 0px;
或变换原点：左上0px；
更改变换/缩放开始的锚点，使其始终从左向右缩放，并且通过滚动可以查看整个图像。
我在这里做了一把小提琴来展示我的成绩。。。
https://jsfiddle.net/trentHarlem/hc5gs3nx/31/
这些都有助于可视化正在发生的事情https://www.w3schools.com/cssref/trycss3_transform-origin_3d_inuse.htmhttps://css-tricks.com/almanac/properties/t/transform-origin/