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链接。

此外，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

配置自动绘制的边框/选择轮廓的样式

2 个答案: