在Fabric.js中使用zoomToPoint缩放时，为什么viewportTransform[4]和viewportTransform[5]总是负数？

Question

<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();

为什么使用 zoomToPoint 方法进行放大总是会导致 viewportTransform[4] 和 viewportTransform[5] 为负值，而不管使用哪个点作为缩放中心？

Answer 1

为了更好地理解，了解这些数字的实际含义非常有用。调用 Fabric.js 的

canvas.viewportTransform()

方法返回的数组是一个 2D 变换矩阵。如果将结果输入到

fabric.util.qrDecompose(array)

console.log("viewportTransform",canvas.viewportTransform,fabric.util.qrDecompose(canvas.viewportTransform));

你会看到这样的东西：

viewportTransform 1.1,0,0,1.1,-8,-8.400000000000006 {角度：0scaleX：1.1scaleY：1.1skewX：0skewY：0translateX：-8.600000000000009translateY：-10.300000000000011}

通过比较这些数字，您会注意到第四个和第五个值是基础变换矩阵的

translateX

和

translateY

属性。

现在看一下下面的草图，其中红色矩形代表原始图像，蓝色矩形代表放大区域：

从红色矩形的左上角到蓝色矩形的左上角水平和垂直需要多少个像素？是的，分别是-10和-10。所以这两个数字是translateX 和translateY 属性，代表相对运动。在笛卡尔坐标系中，负 x 值表示向“左”移动，而负 y 值表示“向上”移动。

在Fabric.js中使用zoomToPoint缩放时，为什么viewportTransform[4]和viewportTransform[5]总是负数？

问题描述投票：0回答：1

1个回答

最新问题

在Fabric.js中使用zoomToPoint缩放时，为什么viewportTransform[4]和viewportTransform[5]总是负数？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1