Jointjs 放大缩小问题

最新推荐文章于 2023-04-20 11:10:25 发布

hosealee

最新推荐文章于 2023-04-20 11:10:25 发布

阅读量592

点赞数

分类专栏：数据可视化文章标签：数据可视化 canvas

本文链接：https://blog.csdn.net/hosealee/article/details/112707560

版权

数据可视化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在JointJS项目中通过监听鼠标滚轮事件来实现在页面鼠标位置为中心的放大缩小功能。通过handleCellMouseWheel函数处理滚轮事件，结合scaleToPoint方法进行坐标转换和矩阵缩放，确保了流程图的平滑缩放，并且缩放范围限制在MIN_SCALE和MAX_SCALE之间。

摘要由CSDN通过智能技术生成

在项目中使用了jointjs绘制高交互流程图，需要根据鼠标滚轮滚动实现放大缩小功能，缩放中心在页面鼠标处。最终核心实现代码如下：


handleCellMouseWheel = (cellView, e, x, y, delta) => {
		e.preventDefault();
		const oldScale = this.paper.scale().sx;
		const newScale = oldScale + delta * .1;
		scaleToPoint(newScale, x, y);
};

scaleToPoint = (nextScale, x, y) => {
		if (nextScale >= MIN_SCALE && nextScale <= MAX_SCALE) {
			const currentScale = this.paper.scale().sx;

			const beta = currentScale / nextScale;

			const ax = x - (x * beta);
			const ay = y - (y * beta);

			const translate = this.paper.translate();

			const nextTx = translate.tx - ax * nextScale;
			const nextTy = translate.ty - ay * nextScale;

			this.paper.translate(nextTx, nextTy);

			const ctm = this.paper.matrix();

			ctm.a = nextScale;
			ctm.d = nextScale;

			this.paper.matrix(ctm);
		}
	};