Raphael JS结合了路径

Question

我是SVG和Raphael的新手，但我已经使用Illustrator很多年了，所以我对它的工作方式有一些假设。我想组合两个应返回单个元素的路径。

我需要制作一个讲话泡泡，但它可能是真的。在这种情况下，我尝试制作两个rect，一个有圆角，另一个有rect旋转。它看起来还不错，但是当我试图移动讲话气泡时，由于旋转45度，旋转的元素向错误的方向移动。

如何组合我以后可以操作的路径，就像它是单个元素/路径一样？

Answer 1

如果你的意思是合并路径，比如使用Illustrator Pathfinder面板 - 将几条路径转换成一条路径（不是一组路径），合并重叠 - 我很确定没有直接的Raphael或SVG等价物。< / p>

最接近的是，创建复合路径（也称为复合路径） - 相当于Illustrator中的cmd-8或Object > Make Compound Path。这会将路径合并为一条路径，但不会删除重叠区域。

基本上，对于集合paper.set( paper.path('M0,0 4,0 0,4z'),paper.path('M9,9 4,9 9,4z') );，等效的复合路径为paper.path('M0,0 4,0 0,4z M9,9 4,9 9,4z'); - 只需将路径定义合并为一个，每个路径定义都以其自己的M开头。

Raphael的一些不同之处：

• 开销较少（只是一条复杂的路径，而不是几个单独的路径元素）
• 移动它，排序等时会有更少的惊喜：
  • 应用于Raphael集的内容依次应用于每个项目，而不是作为一个单元的集合 - 例如toFront()更改 中的顺序除了你给出变换静态坐标之外，集合和变换以 每个项目 为中心，就像Illustrator的transform each一样。
  • 适用于复合路径的内容适用于整个复合路径作为一个单元。
• 复合路径的子路径不可能具有不同的属性
• 像渐变这样的东西在整个复合路径中应用一次，而对于集合，每个单独路径上都会有单独的渐变

JSBIN demo - 比较渐变，看看化合物对如何只是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

请注意，它只组合集合中的路径 - 如果您需要将其他形状与路径组合在一起，则需要先将它们转换为路径的方法。

Answer 2

首先，你可以将你的2个元素推入Raphael集合，然后用Element.transform()移动。这将允许您应用移动处理程序一次，而不是两次。

同样针对您的问题，它实际上是documented：

  

...还有另外的“绝对”翻译，旋转和   比例：T，R和S.它们不会将之前的转换变为   帐户。例如，... T100,0将始终移动元素100 px   如果有r90，那么... t100,0可以垂直移动它   之前。只需比较r90t100,0和r90T100,0的结果。 ...

Answer 3

您可以转到 DEMO

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()创建三角形更容易，而不用担心旋转。 祝你好运;）