Javascript 如何创建可以使用仿射矩阵缩放/转换的paper.js Path.Circle，但始终保持圆半径不变？

我有一个paper.js层，用户可以在其中绘制不同的路径（圆、线等）。可以使用鼠标滚动或拖动来平移或缩放该层。我使用仿射矩阵变换来缩放/平移该层中的路径。这相当有效

我要找的是创建一个圆（Path.circle对象），可以使用矩阵进行平移和缩放，只是它的半径必须始终固定（例如5px）。所以基本上矩阵变换只需要应用于圆的位置，而不需要应用于圆的轮廓

下面是一个半径为20px transformedPath的圆的示例，该圆被缩放到2x。问题是如何在应用矩阵变换时保持圆的半径变换路径固定（半径=20px）

var transformedPath = new paper.Path.Circle(100,100,20);

transformedPath.strokeColor = 'black';

paper.project.activeLayer.matrix = new paper.Matrix(
  2, 0,
  0, 2,
  0, 0
);

---

更新。下面是一个基于sasensi建议的解决方案的更通用的（代码如下）。在此示例中，蓝色圆的半径保持不变（这是正确的），但问题是蓝色圆也保持在相同的位置。

理想的结果是两个圆都移动到新位置，但蓝色圆的半径保持不变

// draw a normal circle
var normalCircle = new Path.Circle({
    center: new Point(100,100),
    radius: 50,
    fillColor: 'orange',
});

// draw another circle that will have scale transformation reversed
var notScalingCircle = new Path.Circle({
    center: new Point(100,100),
    radius: 30,
    fillColor: 'blue',
});

// draw instructions
new PointText({
    content: 'press mouse button down to zoom in and see that blue circle size does not change',
    point: view.center + [0, -80],
    justification: 'center'
});

function transformLayer(matrix) {
    // scale layer
    // project.activeLayer.applyMatrix = false;
    project.activeLayer.matrix = matrix;

    // scale item with inverted amount to make it display like if it was not scaled with the layer
    notScalingCircle.matrix = matrix.clone().invert();
}

var matrix = new paper.Matrix(
        2,0,
        0,1.5,
        50,30
    );

// on mouse down...
function onMouseDown() {
    // ...scale up
    transformLayer(matrix);
}

// on mouse up...
function onMouseUp() {
    // ...scale down
    transformLayer(matrix.clone().invert());
}

---

我认为最好的方法是，当你用给定的数量缩放你的图层时，用反转的数量缩放你的圆圈。
这将使您的圆看起来像未缩放的圆。
下面是一个演示解决方案的示例：

// draw a normal circle
var normalCircle = new Path.Circle({
    center: view.center,
    radius: 50,
    fillColor: 'orange'
});

// draw another circle that will have scale transformation reversed
var notScalingCircle = new Path.Circle({
    center: view.center,
    radius: 30,
    fillColor: 'blue'
});

// draw instructions
new PointText({
    content: 'press mouse button down to zoom in and see that blue circle size does not change',
    point: view.center + [0, -80],
    justification: 'center'
});

function scaleLayer(amount) {
    // scale layer
    project.activeLayer.scale(amount, view.center);
    // scale item with inverted amount to make it display like if it was not scaled with the layer
    notScalingCircle.scale(1 / amount);
}

// on mouse down...
function onMouseDown() {
    // ...scale up
    scaleLayer(3);
}

// on mouse up...
function onMouseUp() {
    // ...scale down
    scaleLayer(1 / 3);
}

编辑 作为对新示例的响应，您只需反转项目上的缩放变换，而不是所有矩阵（也包括平移和旋转）。
以下是更正的：

---

我认为最好的方法是，当你用给定的数量缩放你的图层时，用反转的数量缩放你的圆圈。
这将使您的圆看起来像未缩放的圆。
下面是一个演示解决方案的示例：

// draw a normal circle
var normalCircle = new Path.Circle({
    center: view.center,
    radius: 50,
    fillColor: 'orange'
});

// draw another circle that will have scale transformation reversed
var notScalingCircle = new Path.Circle({
    center: view.center,
    radius: 30,
    fillColor: 'blue'
});

// draw instructions
new PointText({
    content: 'press mouse button down to zoom in and see that blue circle size does not change',
    point: view.center + [0, -80],
    justification: 'center'
});

function scaleLayer(amount) {
    // scale layer
    project.activeLayer.scale(amount, view.center);
    // scale item with inverted amount to make it display like if it was not scaled with the layer
    notScalingCircle.scale(1 / amount);
}

// on mouse down...
function onMouseDown() {
    // ...scale up
    scaleLayer(3);
}

// on mouse up...
function onMouseUp() {
    // ...scale down
    scaleLayer(1 / 3);
}

编辑 作为对新示例的响应，您只需反转项目上的缩放变换，而不是所有矩阵（也包括平移和旋转）。
以下是更正的：

---

谢谢这看起来是一个很好的解决方案，但只有将圆放置在[0,0]时，它才能正常工作。为了说明我的意思，我用一个更一般的例子编辑了你的草图（见下一篇评论的链接）。问题是，鼠标按下时，蓝色圆圈停留在同一位置。由于字符限制，我似乎无法在评论中与您共享链接，因此我将用它更新我的原始帖子。好的，我会看一看，我的例子只是关于一般原则，但它必须适应您的实际用例。尝试制作一个尽可能接近您的实际用例的例子，我会帮助您解决它。我用UPD更新了我的原始帖子，但我认为我们现在离最终解决方案更近了。谢谢谢谢这看起来是一个很好的解决方案，但只有将圆放置在[0,0]时，它才能正常工作。为了说明我的意思，我用一个更一般的例子编辑了你的草图（见下一篇评论的链接）。问题是，鼠标按下时，蓝色圆圈停留在同一位置。由于字符限制，我似乎无法在评论中与您共享链接，因此我将用它更新我的原始帖子。好的，我会看一看，我的例子只是关于一般原则，但它必须适应您的实际用例。尝试制作一个尽可能接近您的实际用例的例子，我会帮助您解决它。我用UPD更新了我的原始帖子，但我认为我们现在离最终解决方案更近了。谢谢