理性

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的“全部拟合”功能将需要此计算。

Answer 1

您可以unite（合并）所有元素中的所有bounds。

这将返回一个紧密适合所有元素的Rectangle，也就是边界框。

这里是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中所有项目的边界框？

理性

2 个答案: