<script src="https://unpkg.com/[email protected]/dist/fabric.min.js"></script>
<style>
canvas {
border: 1px rgb(0, 0, 0) ;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
var canvas = new fabric.Canvas('c',{width:200, height:200});
var rect = new fabric.Rect({
left: 100,
top: 100,
stroke: "red",
strokeWidth: 2,
fill:"transparent",
width: 20,
height: 20,
originX:"center",
originY:"center"
});
canvas.add(rect);
canvas.on('mouse:wheel', function(opt) {
var delta = opt.e.deltaY;
var zoom = canvas.getZoom();
if (delta < 0) {
zoom += 0.1;
canvas.zoomToPoint({x:opt.e.offsetX, y:opt.e.offsetY}, zoom);
console.log("viewportTransform",canvas.viewportTransform);
}
canvas.requestRenderAll();
Why does using the zoomToPoint method for zooming in always result in negative values for viewportTransform[4] and viewportTransform[5], regardless of the point used as the center for zooming?