Svg 拉斐尔JS组合路径

我对SVG和Raphael很陌生，但我已经使用Illustrator很多年了，所以我对它的工作原理有一些假设。我想合并两条路径，它们应该返回一个元素

我需要制造一个演讲泡泡，但它可以是任何真正的东西。在本例中，我尝试制作两个

rect

，一个是圆角，另一个是旋转的正方形

rect

。看起来不错，但当我试图移动语音泡泡时，旋转的元素移动到了错误的方向，因为旋转了45度

我如何组合我以后可以像处理单个元素/路径一样处理的路径

---

首先，您可以将两个元素推入Raphael集合，然后使用

Element.transform（）

移动该集合。这将允许您应用移动处理程序一次，而不是两次

同样，对于您的问题，它非常重要：

。。。也有替代的“绝对”平移、旋转和旋转 比例：T、R和S。它们不会将以前的转换纳入 账户例如，…T100,0将始终移动元素100 px 在水平方向上，如果有r90，t100,0可以垂直移动它 之前只需比较r90t100,0和r90t100,0的结果

给你

var paper = Raphael('canvas',400,400),
    r1    = paper.rect(100,100,200,100).attr({fill:'black'}),
    r2    = paper.rect(130,130,140,40,5).attr({fill:'white','stroke':'white'}),
    r3    = paper.path("M200 170L240 170 220 180z").attr({fill:'white', 'stroke':'white'}), 
    p     = paper.set(r1,r2,r3);

// the rest of the code is in the demo

请注意，通过

path（）

创建三角形更容易，而且不必担心旋转。

---

祝你好运；）

如果您指的是使用Illustrator

Pathfinder

面板合并路径-将多条路径转换为一条路径（不是一组路径），合并重叠-我很确定没有直接的Raphael或SVG等价物

最接近的事情是，创建一个复合路径（又称复合路径）——相当于Illustrator中的

cmd-8

或

Object>生成复合路径。这会将路径合并到一个路径中，但不会删除重叠区域

基本上，对于集合
paper.set（paper.path（'M0,0.4,0.4z'）、paper.path（'M9,9.4,9,4z'），等效的复合路径将是
纸路径（'M0,0 4,0 0,4z M9,9 4,9,4z'）-只需将路径定义合并为一个，每个定义都以自己的
M
开始

与拉斐尔集的一些区别：


开销更小（它只是一条复杂的路径，而不是几个单独的路径元素）
移动、排序等操作时，惊喜会减少：

应用于拉斐尔集合的事物依次应用于每个项目，而不是作为一个单元应用于集合-因此，例如
toFront（）
改变集合中的顺序，并围绕每个项目进行变换，就像Illustrator的
变换每个
，除非您给出变换静态坐标
但是，应用于复合路径的内容将作为一个单元应用于整个复合路径

复合路径的子路径不可能具有不同的属性
渐变之类的东西在整个复合路径上应用一次，而对于集合，每个单独的路径上都会有单独的渐变

-比较渐变，看看复合对如何只是DOM上的一条路径


下面是一个简单的插件，它添加了获取集合并从中创建复合路径的功能：

Raphael.st.compoundPath = function(){
    var positions = [];
    this.forEach( function( element ){
        positions.push( element.compoundPath() );
    });
    return positions.join('');
} 
Raphael.el.compoundPath = function(){
    var path = this.attr('path');
    return path ? Raphael.parsePathString( path ).join('') : '';
}

然后像这样使用它：

var someSet = paper.set(paper.path('M0,0 4,0 0,4z'),paper.path('M9,9 4,9 9,4z'));
var compPath = paper.path( someSet.compoundPath() );
someSet.remove(); // if you want to replace the set with a compound path

请注意，它仅在一个集合中组合路径-如果需要将其他形状与路径组合，则需要先将它们转换为路径。
我认为我为您提供了很好的解决方案。不，你好。这是一个老生常谈的问题，但你还没有回应帮助过你的人。你会考虑现在这样做吗？嗨@ USE56845。我在寻找与你相反的解决方案。你将如何打破一条复合路径？我的问题是：嗨，布莱恩。我在寻找与你相反的解决方案。你将如何打破一条复合路径？我的问题是：