Question

目前正在进行SVG编辑2.6：

当选择框与对象b.box（边界框）相交时，选择工具会选择对象。

我认为这是错误的用户体验。

选择工具应该只选择以下对象：

- 吞噬整个对象 - 或者 - 与实际对象相交

我迷失在整个app的1000左右的LOC中。任何有想法的人，我可以在其中使用代码来使其工作和/或有关如何实现上述任何建议的任何可能的想法？

Answer 1

为了在选择框'吞噬整个对象'时选择元素，你可以试试这个： -

1）在选择框时，检查元素的四个角是否都在选择框内。你可以使用getBBox（）获得四个元素点。例如： -

var bbox=element.getBBox();
var x=bbox.x;
var y=bbox.y;
var width=bbox.width;
var height=bbox.height;

var point1={
x:x,
y:y
};

var point2={
x:x+width,
y:y
};

var point3={
x:x+width,
y:y+height
};

var point4={
x:x,
y:y+height
};

现在用选择矩形比较所有点，如果所有点都在选择矩形内，则选择make元素。

2）现在关于'实际对象'。我认为你的意思是元素的实际形状，而不是BBox。为此，一种解决方案是将您的形状转换为“路径”，然后获取路径的所有“节点”。最后将所有这些节点（点）与选择矩逐一进行比较。

要获取路径中的点数，请尝试以下函数： -

 function path2Array(path) {

                        var pointsArray = new Array();
                        for (var i = 0; i < path.getTotalLength(); i++) {
                                var point = path.getPointAtLength(i);
                                var cordinatesXY = {
                                        x: point.x,
                                        y: point.y
                                }    
                                pointsArray.push(cordinatesXY);
                        } 
                        return pointsArray;
                }

（这就是我想出来的）。： - ）

选择SVG元素，其中选择框完全吞没对象

1 个答案: