问Raphael JS组合路径

EN

给你，演示

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等效的路径。

最近的事情是，创建一个复合路径(也称为复合路径)-相当于插图中的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集的一些差异：

• 减少开销(这只是一个复杂的路径，而不是几个单独的路径元素)
• 当您移动它、排序它等时，更少的惊喜：
  • 应用于拉斐尔集合的东西依次应用于每一项，而不是作为一个单元应用于集合--例如，toFront()更改集合内的order ，并围绕每一项进行中心转换，如Illustrator的transform each，除非您给出转换的静态协调。
  • 然而，应用于复合路径的事物作为一个单元应用于整个复合路径。

​

• 复合路径的子路径不可能有不同的属性
• 像渐变这样的东西只在整个复合路径中应用一次，而对于集合，则在每条单独的路径上都会有不同的梯度。

JSBIN演示 --比较渐变，看看复合对是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

注意，它只组合集合中的路径--如果需要将其他形状与路径组合起来，那么首先需要一种将它们转换为路径的方法。

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

另外，对于你的问题，它是随意的记录在案

..。也有替代的“绝对”平移、旋转和标度: T，R和S，它们不会考虑先前的转换。例如，...T100,0总是按时间移动元素100 px，而如果以前有r90，...t100,0可以垂直移动它。比较r90T100,0和r90t100,0的结果。..。