忽略图像选择

Paper.js Ignoring an image selection

本文关键字:选择 图像 略图      更新时间:2023-09-26

我正在使用Paper.js,我正在尝试构建"Selection-Via-Intersection"

详细说明我的意思是用户绘制一个选择矩形,并且其轮廓与选择矩形中的任何一个点相交的项目被选中。

现在路径项都很好,但是栅格图像带来了问题:

是一种忽略选择中的栅格图像或使其以某种方式与栅格一起工作的方法吗(如果是的话,我会感激一个简单的答案,否则我将无法实现它,业余爱好者和所有人)。

与我目前的代码Chrome返回:Uncaught TypeError:无法读取属性'length'的未定义

这是目前为止的代码:

// Returns path points which are contained in the rect. 
function getSegmentsInRect(rect) {
    var segments = [];
    function checkPathItem(item) {
        if (item._locked || !item._visible || item._guide)
            return;
        var children = item.children;
        if (!rect.intersects(item.bounds))
            return;
        if (item instanceof paper.Path) {
            for (var i = 0; i < item.segments.length; i++) {
                if (rect.contains(item.segments[i].point))
                    segments.push(item.segments[i]);
            }
        } else {
            for (var j = children.length-1; j >= 0; j--)
                checkPathItem(children[j]);
        }
    }
    for (var i = paper.project.layers.length - 1; i >= 0; i--) {
        checkPathItem(paper.project.layers[i]);
    }
    return segments;
}
// Returns all items intersecting the rect.
// Note: only the item outlines are tested.
function getPathsIntersectingRect(rect) {
    var paths = [];
    var boundingRect = new paper.Path.Rectangle(rect);
    function checkPathItem(item) {
        var children = item.children;
        if (item.equals(boundingRect))
            return;
        if (!rect.intersects(item.bounds))
            return;
        if (item instanceof paper.PathItem) {
            if (rect.contains(item.bounds)) {
                paths.push(item);
                return;
            }
            var isects = boundingRect.getIntersections(item);
            if (isects.length > 0)
                paths.push(item);
        } else {
            for (var j = children.length-1; j >= 0; j--)
                checkPathItem(children[j]);
        }
    }
    for (var i = 0, l = paper.project.layers.length; i < l; i++) {
        var layer = paper.project.layers[i];
        checkPathItem(layer);
    }
    boundingRect.remove();
    return paths;
}
// Returns bounding box of all selected items.
function getSelectionBounds() {
    var bounds = null;
    var selected = paper.project.selectedItems;
    for (var i = 0; i < selected.length; i++) {
        if (bounds == null)
            bounds = selected[i].bounds.clone();
        else
            bounds = bounds.unite(selected[i].bounds);

这就是我如何定义我的光栅

function placeImage() {
    var raster = new paper.Raster('mona');
    raster.addChild;
    raster.position = paper.view.center;
    raster.selected = true;
    raster.index = 0;
}

我们可以使用item.type来检查与选择矩形相交的项目是否为 "栅格"

我添加了一个额外的IF语句来完成这个任务。

IF(item.type === "Raster"){
return;
}

这样,具有Raster类型的项将被忽略。

然而,如果有一个简单的方法有一个栅格选择矩形这将是一个更好的答案,虽然我建议的解决方案解决了这个问题。

UPDATE: Paper.js v0.9.17使用className而不是type来标识项目的类型。

因此上面的函数变为:

IF(item.className === "Raster"){
    return;
    }