图形编辑器基于Paper.js教程21：在画布中创建一个不随视图缩放的矩形，并固定在视图的位置，标尺功能的实现

拿我格子衫来

发布于 2025-01-22 10:07:35

8200

代码可运行

文章被收录于专栏：TopFETopFE

运行总次数：0

代码可运行

在图形编辑器中，一般都会有标尺的功能，标尺工具，能够让用户建立清晰的坐标系，能够知道原点在那里，并且能够大致估算出，尺寸，距离，和当前光标所在的位置。如下图标尺所在的位置：

标尺工具具有以下这样几个特性 1：标尺的尺寸大小不随着视图的缩放而改变 2：固定在画布的四周，一般在上面和左边，有些坐标系是在下面

下面讲一下如何做一个简单的标尺工具之前的文章我已经告诉大家如何做一个不随视图改变大小的圆，圆是最容易实现的，因为，使用缩放比计算半径就可以啦。矩形就稍微麻烦一些，视图缩放后需要对矩形进行反缩放，才能保证大小。这还不算难，难点在计算视图缩放后，矩形应该移动多少才能保持在屏幕的固定位置。

在视图缩放后，让矩形在视觉上不改变大小，核心代码如下:

function afterZoom() {
  var currentZoom = paper.view.zoom;
  var desiredSize = 100; // 屏幕上希望的尺寸
  var scalingFactor = desiredSize / (rectangle.bounds.width * currentZoom);
  rectangle.scale(scalingFactor);
}

在所发后，对一个矩形执行反缩放就能实现矩形在视觉上尺寸一致不变。

下面要实现不管以画布那个位置为缩放中心，对视图进行缩放，矩形都能“不会动”

// 缩放前先获取矩形中心，然后转换为视图的坐标 
var rectangle = paper.project.getItem({ name: "fizzRect" });
// 获取矩形的中心点
var rectCenter = rectangle.bounds.center;
var newViewPosition = paper.view.projectToView(rectCenter);

paper.view.scale(delta, viewPosition);

// 视图缩放后，使用视图坐标，再转换成项目的坐标，重新设置矩形中心点坐标，齐活
var newRectCenter = paper.view.viewToProject(newViewPosition);
// 移动矩形，使其中心保持在相对于视图的相同位置
rectangle.position = newRectCenter;

看一下效果，如下图：默认情况