1

我正在尝试扭曲/剪切/倾斜图像，如下所示：

在此处输入图像描述

我正在使用 Raphael Javascript Library它。但我发现拉斐尔非常坚强。我看到一些网站也在使用 Raphael Library。

它尝试了以下代码：

<svg height="90" width="120" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <desc>Created with Raphaël</desc>
                        <defs>
                        <pattern patternTransform="translate(0,0)" width="120" height="90" patternUnits="userSpaceOnUse" y="0" x="0" id="r-4133963223e7aa40438195ae1cdf6892dc">
                    <image height="90" width="120" xlink:href="images/photo2.jpg" y="0" x="0"></image>
                    </pattern>
                        </defs>
                        <path style="fill: url(&quot;#r-4133963223e7aa40438195ae1cdf6892dc&quot;) none;" d="M0,30L240,0L240,50L0,82L0,10" stroke="none" fill="url(#r-4133963223e7aa40438195ae1cdf6892dc)"></path>

                        </svg>

现在，任何人都可以指导我“如何做”。或者有没有其他方法可以做同样的事情。

4

2 回答 2

2

如果可以，请考虑首先使用新的 CSS3转换。这很简单，应该可以很好地完成您需要的工作。

其次，考虑一个服务器端库。PHP GD 似乎支持仿射变换，维基百科可以帮助您了解如何将它们用于剪切映射。

第三，您还可以在 Javascript 中实现剪切映射。（虽然我之前必须这样做；如果事实证明这有帮助，我会发布它）这只花了大约 150 loc，但它比第一个解决方案要困难得多。

于 2013-05-17T14:08:31.700 回答
1

与元素关联的矩阵需要更改并重新应用于任何一组转换。由于缺少 API 的那部分，这尤其需要使用 Raphael 剪切元素。

在 a、b、c、d、e 和 f 的矩阵属性中，我们需要将 b 和/或 c 分别更改为沿 y 轴和/或 x 轴剪切。

var paper = Raphael(0,0,500,500),
    element = paper.rect(100,100,200,100).attr({fill: "#ff0000"}),
    // Transformation matrix of the element is retrieved
    matrix = element.matrix;
// Shearing factor along y-axis set (work on matrix.c to shear along x-axis)
matrix.b = 0.1;
// Re-apply the matrix to the element via "transform" property.
element.attr({transform: matrix.toTransformString()});

希望这可以帮助。

于 2013-05-17T16:05:08.220 回答