扭曲或剪切或倾斜图像 - Raphael，JavaScript或PHP

Question

我试图扭曲/剪切/倾斜像这样的图像：

我正在使用Raphael Javascript 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>

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

Answer 1

如果可以，请先考虑使用the new CSS3 transform。这很简单，应该做你需要的。

其次，考虑服务器端库。 PHP GD似乎support affine transforms，维基百科可以帮助我们使用它们进行剪切映射。

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

Answer 2

与元素关联的矩阵需要更改并重新应用于任何变换集。由于缺少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()});

希望这有帮助。