配置自动绘制边界的样式 box/selection 轮廓

Question

我想在 paperjs 中增加边界矩形的笔画宽度。这可能吗？

这是我的代码：

var circlePath = new Path.Ellipse(new Point(50, 50), 50);
circlePath.style = {
    fillColor: 'white',
    strokeColor: 'black',
    strokeWidth: 5
};

circlePath.bounds.strokeWidth = 10;
circlePath.bounds.selected = true;

在这里，我正在尝试 circlePath.bounds.strokeWidth = 10，但它不起作用。这里是 Sketch link.

另外，bounds只显示了4个角点。但是在文档中，我可以看到 6 点。如何在我的案例中显示 6 分？

Documentation

Answer 1

虽然有 open issues for this feature.

，但 PaperJS 中的选择轮廓并不是那么可配置

然而，在绘制自定义边界框的 Item 上编写我们自己的方法相对容易。

下面是一些示例代码：

paper.setup(document.querySelector('canvas'))

paper.Item.prototype.select = function(selected = true) {
  // Hide PaperJS selection outlines since we draw our own.
  this.selectedColor = new paper.Color(0, 0, 0, 0)
  this.selected = selected
 
  if (!selected) return this.bbox.remove()

  this.bbox = new paper.Group({
    // lock this so it doesn't respond to mouse events etc..
    locked: true,
    children: [
      // add the bbox...
      new paper.Path.Rectangle({
        rectangle: this.strokeBounds,
        strokeColor: 'red',
        strokeWidth: 4
      })
    ]
  })
  
  // ... and the handles.
  ;[
    'topLeft',
    'topCenter',
    'topRight',
    'leftCenter',
    'bottomLeft',
    'bottomRight',
    'bottomCenter',
    'rightCenter'
  ].forEach(pos => {
    this.bbox.addChild(new paper.Path.Circle({ 
      position: this.bounds[pos], 
      radius: 5, 
      fillColor: 'blue' 
    }))
  })
}

// ... and use it like this.

const circle = new paper.Path.Circle(new paper.Point(100, 70), 50)
circle.fillColor = 'black'

circle.select(true)

canvas[resize] {
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.min.js"></script>

<canvas resize></canvas>

Answer 2

您可以模拟将矩形作为边界框。参见 Sketch

配置自动绘制边界的样式 box/selection 轮廓

Configure style of auto-drawn bounding box/selection outlines

paperjs