在选择边界矩形上为所选形状添加中点手柄

Matlocat

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

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

结果是一个边界矩形，边缘带有手柄。

如何像在带有中间手柄的图片包围矩形中那样轻松地在矩形外围的中间添加手柄？

尼古拉斯敏

您的边框矩形各边的中点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';
})

这是代码的草图。

执行以下操作时，您无法更改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)

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。