Блог

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

Вот ссылка на эскиз, вы можете выбрать версию 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 amp;amp; bounds.left == point.x) {
                clickPosition = "NW";
            }

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

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

            if (bounds.bottom == point.y amp;amp; 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";
        }
    }
}
 

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, который работает с любой версией.