Html5 canvas 如何在使用paper.js鼠标拖动时仅更改路径宽度（矩形、圆形）

我曾尝试使用paper.js仅调整画布中项目的宽度 我用以下方法调整了大小，但结果是从矩形/圆的中心调整了左右两侧的大小

function onMouseDrag(event){

(selectedItem.bounds.contains(event.point)) ?
selectedItem.scale(0.9871668311944719,1) : selectedItem.scale(1.013, 1);
}

上面的代码在两个x方向上调整大小

请帮助我仅在一个方向上调整宽度

谢谢

---

苏里巴布。

我不知道你说的只有宽度的比例是什么意思。如果您希望路径比更改

冲程宽度更厚，则可以改为更改
冲程宽度

如果您想知道为什么缩放路径在x轴上的两个方向上都会扩展，那么可以检查路径局部中心的位置。如果路径的某些节点具有相对于该局部中心的负坐标，则使用正值缩放它们会进一步降低它们的坐标

也许应该规范化所有顶点，即直接移动它们，使所有顶点的最小x和y值为0

问候您，祝您好运
您可以使用以下表格在任意点居中缩放操作：

scale(hor, ver, point)

因此，在您的情况下，如果要从选定项目的左中心进行缩放，可以使用：

function onMouseDrag(event){

(selectedItem.bounds.contains(event.point)) ?
selectedItem.scale(0.9871668311944719, 1, selectedItem.bounds.left) : selectedItem.scale(1.013, 1, selectedItem.bounds.left);
}

试试这个：

function onMouseDown(e) {
    var cx = e.point.x;
    var cy = e.point.y;
    var rectangle = new Rectangle(e.point, new Size(1,1));
    path = new Path.Ellipse(rectangle);
    path.strokeColor = 'red';       
}

function onMouseDrag(e) {
    path.remove();
    var x = Math.min(e.point.x, cx),
        y = Math.min(e.point.y, cy),
        w = Math.abs(e.point.x -cx),
        h = Math.abs(e.point.y -cy);
    var rectangle = new Rectangle(x,y,w,h);
    path = new Path.Ellipse(rectangle);
    path.strokeColor = 'red'
}