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

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 - 矩形达到最小尺寸后无法调整其大小

Paper.JS - Can´t resize rectangle after it reaches minimum size

javascript

paperjs