Question

我一直坚持使用paper.js仅调整画布中项目的宽度我已经完成了以下调整大小的方法，但它会导致从矩形/圆的中心调整左右两侧的大小。

function onMouseDrag(event){

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

以上代码在x方向上调整大小。

帮助我只在一个方向调整宽度。

感谢，

suribabu。

Answer 1

您可以使用以下表单将缩放操作置于中心位置：

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);
}

Answer 2

我不确定你的意思只是缩放宽度。如果你想拥有比改变strokeWidth更粗的路径而可能做你想做的事。

如果您想知道为什么缩放路径在x轴上向两个方向扩展，而不是检查路径本地中心的位置。如果路径的某些节点相对于此局部中心具有负坐标，则使用正值缩放它们会使坐标更加减小。

也许您应该对所有顶点进行标准化，意味着直接移动它们，以便所有顶点的最小x和y值都为0.

问候和好运

Answer 3

试试这个：

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'
}

如何在使用paper.js拖动鼠标时仅更改路径宽度（rect，circle）

3 个答案: