扭曲、剪切或扭曲图像-拉斐尔、JavaScript或PHP

我试图扭曲/剪切/扭曲一幅图像，比如：

我正在使用

raphaeljavascript库

来实现它。但我发现拉斐尔很坚强。我看到一些网站也在使用拉斐尔图书馆

它尝试了以下代码：

<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>

用拉斐尔创作

---

现在，谁能指导我“怎么做”。或者有其他选择做同样的事情。

< P>如果你可以，考虑先使用。它非常简单，应该可以很好地满足您的需要

第二，考虑服务器端库。PHP GD似乎可以，wikipedia可以帮助您如何使用它们进行剪切贴图

---

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

与元素相关的矩阵需要更改，并重新应用于任何变换集。由于API中缺少该部分，因此使用拉斐尔剪切元件时尤其需要这样做

在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()});

---

希望这有帮助。

你读过这个问题吗：（不是很重复，但它的答案对你有帮助）@Spudley thanx用于你的重播，但这个解决方案不适用于图像扭曲。检查下面发布的Raphael的解决方案，其实很简单。：）纯粹和扭曲是一回事吗？