Question

我正在尝试在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 && 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，

如果要调整路径大小/缩放比例，建议使用private Object getObject(final byte[] data) throws MyException { String lastErrorMessage = ""; for (final Jaxb2Marshaller marshaller : this.marshallers) { try { return marshaller.unmarshal(new StreamSource(new ByteArrayInputStream(data))); } catch (final XmlMappingException e) { LOGGER.warn("Invalid XML", e); lastErrorMessage = e.getMessage(); } } throw new MyException(lastErrorMessage); }方法（http://paperjs.org/reference/item/#scale-hor-ver）。

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

Path.scale

祝你有美好的一天！

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

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

1 个答案: