Raphael JS合并路径 [英] Raphael JS combine paths

问题描述

我在SVG和Raphael上还很陌生，但是我已经使用Illustrator多年了，所以我对它的工作方式有一些假设.我想结合两条应该返回单个元素的路径.

I'm pretty new at SVG and Raphael, but I've been using Illustrator for many years, so I have some assumptions on how it works. I want to combine two paths which should return a single element.

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

I need to make a speech bubble, but it could be anything really. In this case I tried to make two rect, one with round corners and another square rect which was rotated. It looked alright, but when I tried to move the speech bubble, the rotated element moved in the wrong direction, because of the 45 degree rotation.

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

How can I compbine paths which I can later manipulate as if it was a single element/path?

推荐答案

如果您是说要合并路径，例如使用Illustrator Pathfinder面板-将多条路径变成一条路径(而不是一组路径)，则合并重叠-我会我非常确定没有直接的Raphael或SVG等效产品.

If you mean merging paths like using the Illustrator Pathfinder panel - turning several paths into one path (not a set of paths), merging overlap - I'm pretty sure there's no direct Raphael or SVG equivalent.

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

The closest thing is, creating a compound path (aka composite path) - the equivalent of cmd-8 or Object > Make Compound Path in Illustrator. This merges paths together into one path, but doesn't remove areas of overlap.

基本上，对于一组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开始.

Basically, for a set paper.set( paper.path('M0,0 4,0 0,4z'),paper.path('M9,9 4,9 9,4z') );, an equivalent compound path would be paper.path('M0,0 4,0 0,4z M9,9 4,9 9,4z'); - just joining the path definitions into one, each starting with its own M.

与Raphael集的一些区别:

• 更少的开销(这只是一条复杂的路径，而不是几个单独的单独路径元素)
• 将其移动，排序等时，您会感到惊讶的更少:
  • 应用于Raphael集合的事物依次应用于每个项目，而不是作为一个整体应用于集合-例如，toFront()更改集合中 的顺序，并以 每个项目 为中心，就像Illustrator的transform each一样，除非您为变换提供静态坐标.
  • 应用于复合路径的事物将作为一个单元应用于整个复合路径.
  • Less overhead (it's just one complex path, not several separate individual path elements)
  • Fewer surprises when you move it, sort it, etc:
    • Things applied to a Raphael set apply to each item in turn, not to the set as a unit - so for example toFront() changes the order within the set, and transforms centre around each item, like Illustrator's transform each, unless you give the transform static co-ordinates.
    • Things applied to a compound path, however, apply to the whole compound path as one unit.

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

    JSBIN demo - compare the gradients, and see how the compound pair is just one path on the DOM.

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

    Here's a simple plugin that adds the ability to take a set and create a compound path from it:

    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
    

    请注意，它仅将路径组合在一起-如果需要将其他形状与路径组合，则需要先将其转换为路径的方法.

    Note that it only combines paths in a set - if you need to combine other shapes with paths, you'll need a way to convert them into paths first.

    这篇关于Raphael JS合并路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！