调整大小在 paperjs 0.11.8 中不起作用，但适用于 0.9.25

Question

我正在尝试调整 paper.js 中的矩形大小。我可以为旧版本的 paperjs（如 0.9.25）执行此操作，但它不适用于最新版本 0.11.8。我不确定为什么会这样，非常感谢任何帮助。

这是 Sketch link，您可以 select 版本到 0.9.25 可以工作，0.11.8 不能工作。

这是我的代码：

var hitOptions = {
    segments: true,
    stroke: true,
    fill: true,
    tolerance: 1
};

project.currentStyle = {
    fillColor: 'green',
    strokeColor: 'black'
};

var rect_a = new Path.Rectangle(new Point(50, 50), 50);

var segment, path, hitType;
var clickPos = null;
var movePath = false;
var minHeight = 1;
var minWidth = 1;

function onMouseDown(event) {
    segment = path = null;
    var hitResult = project.hitTest(event.point, hitOptions);
    if (!hitResult)
        return;

    hitType = hitResult.type;

    if (event.modifiers.shift) {
        if (hitResult.type == 'segment') {
            hitResult.segment.remove();
        };
        return;
    }

    if (hitResult) {
        path = hitResult.item;
        if (hitResult.type == 'segment') {
            segment = hitResult.segment;
        }
    }
    movePath = hitResult.type == 'fill';
    if (movePath) {
        project.activeLayer.addChild(hitResult.item);
    }

    clickPos = checkHitPosition(event);
}

function onMouseMove(event) {
    changeCursor(event);
    project.activeLayer.selected = false;
    if (event.item)
        event.item.selected = true;
}

function onMouseDrag(event) {
    if (hitType == "stroke" || hitType == "segment") {
        resizeRectangle(path, event);
    } else {
        path.position += event.delta;
    }
}

function resizeRectangle(path, event) {
    switch(clickPos) {
        case "SE" :
            resizeBottom(path, event);
            resizeRight(path, event);
            break;
        case "NE" :
            resizeTop(path, event);
            resizeRight(path, event);
            break;
        case "SW" :
            resizeBottom(path, event);
            resizeLeft(path, event);
            break;
        case "NW" :
            resizeTop(path, event);
            resizeLeft(path, event);
            break;
        case "S"  :
            resizeBottom(path, event);
            break;
        case "N"  :
            resizeTop(path, event);
            break;
        case "E"  :
            resizeRight(path, event);
            break;
        case "W"  :
            resizeLeft(path, event);
            break;
    }
}

function resizeTop(path, event) {
    if(path.bounds.height >= minHeight) {
        var adj = Math.min(event.delta.y, path.bounds.height-minHeight);
        path.bounds.top += adj;
    }
}

function resizeBottom(path, event) {
    if(path.bounds.height >= minHeight) {
        path.bounds.bottom += event.delta.y;
    }
}

function resizeLeft(path, event) {
    if(path.bounds.width >= minWidth) {
        path.bounds.left  += event.delta.x;
    }
}

function resizeRight(path, event) {
    if(path.bounds.width >= minWidth) {
        path.bounds.right  += event.delta.x;
    }
}

function checkHitPosition(event) {
    var hitResult = project.hitTest(event.point, hitOptions);
    var clickPosition = null;

    if (hitResult) {
        if (hitResult.type == 'stroke' || hitResult.type == 'segment') {
            var bounds = hitResult.item.bounds;
            var point = hitResult.point;

            if (bounds.top == point.y) {
                clickPosition = "N";
            }

            if (bounds.bottom == point.y) {
                clickPosition = "S";
            }

            if (bounds.left == point.x) {
                clickPosition = "W";
            }

            if (bounds.right == point.x) {
                clickPosition = "E";
            }

            if (bounds.top == point.y && bounds.left == point.x) {
                clickPosition = "NW";
            }

            if (bounds.top == point.y && bounds.right == point.x) {
                clickPosition = "NE";
            }

            if (bounds.bottom == point.y && bounds.left == point.x) {
                clickPosition = "SW";
            }

            if (bounds.bottom == point.y && bounds.right == point.x) {
                clickPosition = "SE";
            }
        } else {
            clickPosition = "C";
        }
    }
    return clickPosition;
};

function changeCursor(event) {
    var hitPosition = checkHitPosition(event);
    if(hitPosition == null ) {
        document.body.style.cursor = "auto";
    } else {
        if (hitPosition == "C") {
            document.body.style.cursor = "all-scroll";
        } else {
            document.body.style.cursor = hitPosition + "-resize";
        }
    }
}

Answer 1

helloworld,

如果你想 resize/scale 你的路径，我建议使用 Path.scale 方法 (http://paperjs.org/reference/item/#scale-hor-ver)。

要将此应用于您的示例，请将您当前的调整大小方法替换为：

function resizeTop(path, event) {
    if(path.bounds.height >= minHeight) {
        var relH = (event.point.y - (path.bounds.bottomCenter.y)) / path.bounds.height;
        path.scale(1, -relH, path.bounds.bottomCenter)
    }
}

function resizeBottom(path, event) {
    if(path.bounds.height >= minHeight) {
        var relH = (event.point.y - (path.bounds.topCenter.y)) / path.bounds.height;
        path.scale(1, relH, path.bounds.topCenter)
    }
}

function resizeLeft(path, event) {
    if(path.bounds.width >= minWidth) {
        var relW = (event.point.x - (path.bounds.rightCenter.x)) / path.bounds.width;
        path.scale(-relW, 1, path.bounds.rightCenter)
    }
}

function resizeRight(path, event) {
    if(path.bounds.width >= minWidth) {
        var relW = (event.point.x - (path.bounds.leftCenter.x)) / path.bounds.width;
        path.scale(relW, 1, path.bounds.leftCenter)
    }
}

祝你有愉快的一天！

-- 编辑--
我重新制作了您的草图并替换了适用于所有版本的代码 sketch。

调整大小在 paperjs 0.11.8 中不起作用，但适用于 0.9.25

Resizing does not work in paperjs 0.11.8 but works for 0.9.25

paperjs