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

Question

我基于paperjs.org的HitTest示例创建了一个小脚本。这个脚本的想法是创建一个矩形并能够移动和调整它的大小。虽然它几乎实现了，但当我将其调整到我指定的最小尺寸（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";
        }
    }
}

- Luis Fernando Nascimento

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进行相应的更改。

这样可以避免将矩形设置得比最小值还要小，并且还会移除任何阻止其再次增长的检查。

- bmacnaughton