Изменение размера не работает в paperjs 0.11.8, но работает для 0.9.25

Question

Я пытаюсь изменить размер прямоугольника в paper.js.Я могу сделать это для более старых версий paperjs (например, 0.9.25), но это не работает для последней версии 0.11.8.Я не уверен, почему это происходит, любая помощь будет высоко оценена.

Вот ссылка Sketch, вы можете выбрать версию 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,

Если вы хотите изменить размер / масштаб вашего пути, я рекомендую использовать метод 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 , который работает с каждой версией.