3

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

我需要制造一个讲话泡泡，但它可以是任何东西。在这种情况下，我尝试制作两个rect，一个有圆角，另一个rect是旋转的正方形。看起来不错，但是当我尝试移动对话气泡时，由于旋转了 45 度，旋转的元素向错误的方向移动。

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

讲话泡泡的例子

4

3 回答 3

2

如果您的意思是合并路径，例如使用 IllustratorPathfinder面板 - 将多条路径变成一条路径（不是一组路径），合并重叠 - 我很确定没有直接的 Raphael 或 SVG 等价物。

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

基本上，对于一个 set 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()更改集合内的顺序，并围绕每个项目进行变换中心，如 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

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

于 2013-12-04T15:06:34.233 回答
2

给你演示

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()而不必担心旋转。祝你好运 ;）

于 2013-08-27T16:24:31.247 回答
1

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

同样对于您的问题，它已记录在案：

...还有替代的“绝对”平移、旋转和缩放：T、R 和 S。它们不会考虑先前的转换。例如，...T100,0 将始终水平移动元素 100 px，而 ...t100,0 如果之前有 r90 则可以垂直移动它。只需比较 r90t100,0 和 r90T100,0 的结果。...

于 2013-08-27T09:53:11.223 回答