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

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

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

标尺工具具有以下这样几个特性 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.;
var newViewPosition = paper.view.projectToView(rectCenter);

paper.view.scale(delta, viewPosition);

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

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

缩放后

对于画布的移动，更加简单只需调整 上标尺中心点的y值，或者左标尺中心点的x值。