在 paperjs 中选择形状时,例如使用以下代码:

var p = new Shape.Circle(new Point(200, 200), 100)
p.strokeColor = 'black';
p.bounds.selected = true;

结果是一个带有 handles on edges 的边界矩形。

如何像图片 bounding rectangle with middle handles 那样轻松地在边界矩形边的中间添加句柄?

最佳答案

Path 的边界矩形的每一边的中点已经存储在:

  • p.bounds.topCenter
  • p.bounds.bottomCenter
  • p.bounds.leftCenter
  • p.bounds.rightCenter

  • 因此,在这些点上创建形状变得相当简单:
    var p = new Shape.Circle(new Point(200, 200), 100)
    p.strokeColor = 'black';
    p.bounds.selected = true;
    
    [
      p.bounds.topCenter,
      p.bounds.bottomCenter,
      p.bounds.leftCenter,
      p.bounds.rightCenter
    ].forEach(function(midpoint) {
      var handle = new Path.Rectangle(new Rectangle(midpoint.subtract(5), 10));
      handle.fillColor = '#1A9FE9';
    })
    

    这是代码的 Sketch

    当您执行以下操作时,您无法更改 Paper.js 绘制的默认选择边界矩形: item.selected = true 。每次要选择某些东西时,都必须自己绘制它们。

    在这种情况下,我通常会写一个函数来为我选择形状;该函数还将绘制我的自定义边界矩形。

    例如:
    var p = new Shape.Circle(new Point(200, 200), 100)
    p.strokeColor = 'black';
    
    function selectItem(item) {
      item.selected = true;
    
      [
        item.bounds.topCenter,
        item.bounds.bottomCenter,
        item.bounds.leftCenter,
        item.bounds.rightCenter
      ].forEach(function(midpoint) {
        var handle = new Path.Rectangle(new Rectangle(midpoint.subtract(5), 10));
        handle.fillColor = '#1A9FE9';
      })
    }
    
    selectItem(p)
    

    关于javascript - 在选定形状的选择边界矩形上添加中间点句柄,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48812438/

    10-12 00:04