3
我已经根据paperjs.org中的HitTest示例创建了一个小脚本。这个想法是有一个矩形，并能够移动和调整它的大小。它几乎可以工作，但是当我将它调整到我指定的最小尺寸（10x10）时，出于某种原因，即使我释放拖动事件并再次尝试，我也无法再调整它的大小。Paper.JS - 在达到最小尺寸后无法调整矩形大小
var hitOptions = {
\t segments: true,
\t stroke: true,
\t fill: true,
\t 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) {
\t segment = path = null;
\t var hitResult = project.hitTest(event.point, hitOptions);
\t if (!hitResult)
\t \t return;
hitType = hitResult.type;
\t if (event.modifiers.shift) {
\t \t if (hitResult.type == 'segment') {
\t \t \t hitResult.segment.remove();
\t \t };
\t \t return;
\t }
\t if (hitResult) {
\t \t path = hitResult.item;
\t \t if (hitResult.type == 'segment') {
\t \t \t segment = hitResult.segment;
\t \t }
\t }
\t movePath = hitResult.type == 'fill';
\t if (movePath) {
\t \t project.activeLayer.addChild(hitResult.item);
\t }
\t clickPos = checkHitPosition(event);
}
function onMouseMove(event) {
changeCursor(event);
\t project.activeLayer.selected = false;
\t if (event.item)
\t \t event.item.selected = true;
}
function onMouseDrag(event) {
\t if (hitType == "stroke" || hitType == "segment") {
resizeRectangle(path, event);
\t } else {
\t \t path.position += event.delta;
\t }
}
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";
}
}
}