关于fabricjs移动、放大等一些列操作后位置不对的问题

一开始我也是被这个问题困扰，认为是一个很复杂的数学运算问题，什么向量啊，坐标现象啊，各种胡思乱想，看了下别人的博文也是写非常复杂，看上去就令人怯步，其实细想一下，就是一个偏移量的问题。

首先声明一个变量，记录x，y的偏移量，一个变量记录最后一次的缩放比例:

// 定义变量记录最后一次的偏移量和缩放比例
const relationship = {x: 0, y: 0, zoom: 1};

放大缩小时计算的偏移量

// 按住ctrl + 滚轮实现放大缩小
const mouseWheelEvent = (e: any) => {if (e.ctrlKey) {e.preventDefault();let zoom = (e.deltaY > 0 ? 0.1 : -0.1) + canvas.getZoom();zoom = Math.max(0.1, zoom);zoom = Math.min(5, zoom);if (zoom === relationship.zoom) return;const [x, y] = [e.offsetX, e.offsetY];// 计算缩放时产生的偏移量 这是重点代码relationship.x += x / zoom - x / relationship.zoom;relationship.y += y / zoom - y / relationship.zoom;const zoomPoint = new fabric.Point(x, y);canvas.zoomToPoint(zoomPoint, zoom);relationship.zoom = zoom;}
}

上面的x / y 的取值看你是监听在什么元素上，不一定要按照我的，你也可以用 e.pointer.x，e.pointer.y 或者是 e.pageX， e.pageY等

下面我们看看平移的代码时的偏移量，平移其实是最简单的了，以为它不用计算缩放时产生的平移量:

canvas.on("mouse:move", e => {if (panning && e && e.e) { // padding 表示是否允许拖动画布const delta = new fabric.Point(e.e.movementX, e.e.movementY);canvas.relativePan(delta);//累计每一次移动时候的偏移量relationship.x += e.e.movementX / relationship.zoom;relationship.y += e.e.movementY / relationship.zoom;}
})

好了，完事之后就可以去愉快地随意的放大缩小移动N百次再添加图形看看效果了，添加对象的方法如下：

canvas.on('mouse:dblclick', e => {const [left, top] = [e.pointer.x / relationship.zoom - relationship.xe.pointer.y / relationship.zoom - relationship.y];const rect = new fabric.Rect({left,top,width: 100,height: 100,fill: 'red'});canvas.add(rect).renderAll();
})

关于fabricjs移动、放大等一些列操作后位置不对的问题相关推荐

Notepad++ 列操作
在网上找到一篇关于socket编程的文章,想把其中的代码直接拷贝下来运行测试,但是人家网站做的不够人性化,每行的开头都有行号,直接拷贝就要一行行的删除,甚是麻烦,想到linux下的vi编辑器可以完成列 ...
Hive 按某列的部分排序以及删列操作
Hive 按某列的部分排序以及删列操作脑袋果然还是智商不足. 涉及到的小需求: 某个表test 有一列 tc: a字符串+b字符串+c字符串拼接组成把test表,按b字符串排序输出遇到的 ...
修改所有列_宝塔面板安装完的一些列操作
推荐教程虚拟机建站总目录 - 辉哥博客www.haah.net 前言新安装的宝塔会有很多地方需要配置,如果懂的大佬可以跳过,如果是小白可以按照辉哥的教程一步步操作,辉哥是以虚拟机进行操作的,但是 ...
一句SQL实现获取自增列操作
今天做了一个应用,对TAB_1表进行插入操作的时候,需要获取自增ID的值,插入到TAB_2里面,隐隐约约记得SQL里面有个全局变量@@IDENTITY可以实现这样的业务需要,凭着感觉写了下面的SQL语 ...
iView学习笔记(三)：表格搜索，过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
宝塔开启_宝塔面板安装完的一些列操作
前言新安装的宝塔会有很多地方需要配置,如果懂的大佬可以跳过,如果是小白可以按照辉哥的教程一步步操作,辉哥是以虚拟机进行操作的,但是服务器也是一样的道理! 安全入口因为现在使用宝塔面板的人数在激增. ...
列赋值为列表_Pandas入门-3-新增数据列操作
在数据分析过程中,常常会依据一定条件进行新数据列的增加,以便于我们对数据更好地分析.接下来,一起学习如何在Pandas的数据类型中进行新增数据列操作. 知识点: 直接赋值 .apply .assign ...
cgi进程设置多少宝塔_宝塔面板安装完的一些列操作
推荐教程虚拟机建站总目录 - 辉哥博客www.haah.net 前言新安装的宝塔会有很多地方需要配置,如果懂的大佬可以跳过,如果是小白可以按照辉哥的教程一步步操作,辉哥是以虚拟机进行操作的,但是 ...
pandas使用笔记(二)列操作
文章目录 DataFrame基本列操作 DataFrame常用列处理 DataFrame基本列操作 import pandas as pd import numpy as np# 设置实验数据 l = ...
Oracle-1：的列操作(增加列,修改列,删除列)，包括操作多列
Oracle的列操作(增加列,修改列,删除列),包括操作多列增加一列: alter table emp4 add test varchar2(10); 修改一列: alter table emp4 ...

关于fabricjs移动、放大等一些列操作后位置不对的问题

关于fabricjs移动、放大等一些列操作后位置不对的问题相关推荐

最新文章

热门文章