Question

我已经基于paperjs.org中的HitTest示例创建了一个小脚本。我们的想法是拥有一个Rectangle，并能够移动和调整它。它几乎正常工作但是，当我将其调整到我指定的最小尺寸（10x10）时，由于某种原因，我不能再调整它，即使我发布拖动事件并再试一次。

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 = 10;
var minWidth = 10;

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) {
        path.bounds.top += event.delta.y;
    }
}

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

问题是代码将矩形缩小到最小尺寸（minWidth和minHeight）以下。您可以添加一行

console.log(path.bounds.width, path.bounds.height)

在resizeRectangle的底部，看看矩形如何变得小于minWidth和minHeight。

然后，当调用每个resizeXYZZY函数时，检查if(path.bounds.height >= minHeight)（或宽度）失败并且不进行任何更改，因此矩形不能再变大。

要修复它，resizeTop函数需要以不同的方式工作：

var adj = min(event.delta.y, path.bounds.height-minHeight);
path.bounds.top += adj;

应该对resizeBottom，Left和Right进行相应的更改。

这可以避免将矩形设置为小于最小值，并且还会删除任何阻止它再次生长的检查。

Paper.JS - 达到最小尺寸后无法调整矩形的大小

1 个答案: