javascript - 在选定形状的选择边界矩形上添加中点 handle

Question

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

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

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

我如何轻松地在边界矩形边的中间添加 handle ，如图所示 bounding rectangle with middle handles ？

Answer 1

您的路径的边界矩形每边的中点已经存储在:

• 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)