缩放时获取画布视口翻译答案

【问题标题】：Get canvas viewport translate when zooming缩放时获取画布视口翻译
【发布时间】：2019-08-18 01:16:24
【问题描述】：

如何在缩放时获得平移画布视口？

我的缩放方法：

    mouseZoom(opt) {
        let canvas = this.canvasRender;
        let delta = opt.e.deltaY;
        let zoom = canvas.getZoom();
        zoom = zoom + delta / 200;
        if (zoom > 10 || zoom < 0.2) {
            return;
        }

        if (zoom > 20) zoom = 20;
        if (zoom < 0.001) zoom = 0.01;
        canvas.zoomToPoint({x: opt.e.offsetX, y: opt.e.offsetY}, zoom);
        opt.e.preventDefault();
        opt.e.stopPropagation();       
     }

【问题讨论】：

你想达到什么目的？
我有一个弹出窗口，其坐标取决于画布上对象的坐标，当我缩放时需要根据缩放系数重新计算弹出窗口的坐标。

标签： javascript canvas fabricjs zooming

【解决方案1】：

查看canvas.viewportTransform 属性。

它包含存储为数组[a, b, c, d, tx, ty]的所有视口转换，其中：

a -– x 尺度

b - y 偏斜

c – x scew

d - y 尺度

tx – x 翻译

ty - y 翻译

【讨论】：

我试过这个，但 tx 和 ty 比实际偏移量多。他们需要某种系数