如何获取包含 Paper.js 中所有项目的边界框？

Question

我们如何获得包含项目中所有项目的边界 Rectangle？

目前我正在一一计算：

calc-bounds = (scope) ->
    fit = {}
    for layer in scope.project.layers
        for item in layer.children
            for <[ top left ]>
                if item.bounds[..] < fit[..] or not fit[..]?
                    fit[..] = item.bounds[..]
            for <[ bottom right ]>
                if item.bounds[..] > fit[..] or not fit[..]?
                    fit[..] = item.bounds[..]
    #console.log "fit bounds: ", fit
    top-left = new scope.Point fit.left, fit.top
    bottom-right = new scope.Point fit.right, fit.bottom
    new scope.Rectangle top-left, bottom-right

理由

设置project.center和project.zoom的"Fit all"函数需要这个计算。

Answer 1

您可以 unite (merge) all the bounds 所有元素。

这将return一个Rectangle紧密适合所有元素，a.k.a一个边界框。

这里是 Sketch。

代码如下：

var items = [
    new Path.Circle({
        position: new Point(100, 200),
        radius: 50,
        fillColor: 'blue'
    }),
    new Path.Circle({
        position: new Point(200, 70),
        radius: 50,
        fillColor: 'purple'
    }),
    new Path.Circle({
        position: new Point(400, 100),
        radius: 50,
        fillColor: 'magenta'
    })
]

// Unite all bounds from all items.
var unitedBounds = items.reduce((bbox, item) => {
    return !bbox ? item.bounds : bbox.unite(item.bounds)
}, null)

// Draw the united bounds.
var bbox = new Path.Rectangle(unitedBounds)
bbox.strokeColor = 'black'

Answer 2

您可以使用图层边界或对要绑定的元素进行分组，而不是使用@nicholaswmin

中的减少技巧

这里是a sketch with both solutions

const items = [
    new Path.Circle({
        position: new Point(100, 200),
        radius: 50,
        fillColor: 'blue'
    }),
    new Path.Circle({
        position: new Point(200, 70),
        radius: 50,
        fillColor: 'purple'
    }),
    new Path.Circle({
        position: new Point(400, 100),
        radius: 50,
        fillColor: 'magenta'
    })
]

// Use the layer bounds
const layerBounds = project.activeLayer.bounds

// Group all needed items and use the bounds
const groupBounds = (new Group(items)).bounds

// Draw the bounds.
const bbox = new Path.Rectangle(layerBounds)
const bbox2 = new Path.Rectangle(groupBounds)

bbox.strokeWidth = 3
bbox.strokeColor = 'blue'

bbox2.strokeWidth = 6
bbox2.strokeColor = 'red'
bbox2.dashArray = [10, 10]

如何获取包含 Paper.js 中所有项目的边界框？

How to get bounding box that contains all items in Paper.js?

paperjs

理由