有没有办法用 Raphael.js 裁剪图像？答案

【问题标题】：Is there a way to crop an image with Raphael.js?有没有办法用 Raphael.js 裁剪图像？
【发布时间】：2013-05-29 02:49:34
【问题描述】：

我正在尝试将部分图像放入 raphael 对象中。缩放图像效果很好，但是当我尝试翻译它时，它最终会返回图像的错误部分。我正在使用“S1.5,1.5,0,0”来缩放图像，也就是说，我没有在中点周围缩放它，所以缩放它的效果很好。但是，当我尝试偏移图像时，生成的图像片段是偏移的。

也许在 Raphael 中还有另一种方法可以做到这一点。我想要完成的是使用图像的片段作为 Raphael 中的图像对象，我需要将一个矩形从外部图像复制到其中。比如：

将原始图像片段（x0 = 100，y0 = 120，宽度 = 300，高度 = 250）复制到具有尺寸（宽度 = 150 和 125）的图像对象。

我一直在寻找答案，但没有什么真正有用的。

编辑：

小提琴是

/w9XSf/12/

在上面的示例中，我从原始图像（即 612 x 325 像素）中抓取一个 100 x 60 像素的区域，并尝试将其显示在输出图像上，即 500 x 300 像素。

秤有效，但它抓取的区域不是我需要的。如果我从 0、0 抓取，它确实有效。但是，当我从 originsl 图像的左上角移动时，它给我的实际区域离我实际需要的区域更远:(。

有什么想法吗？（我已经尝试在转换字符串中交换 T 和 S 的顺序）。

谢谢。

【问题讨论】：

你能分享代码吗？还是小提琴？

标签： raphael crop

【解决方案1】：

使用 Raphael，以下代码创建一个容器，用于显示图像，并进行适当的翻译和缩放。 http://jsfiddle.net/s6DHf/ 也提供了该解决方案的实时版本。这是实际问题的分叉版本。

var outputW = 525,
    outputH = 300;
    sourceX = 100,
    sourceY = 100,
    scaleX = 1.5,
    scaleY = 1.5,
    paper = new Raphael("image", outputW, outputH),
    bgImg = paper.image("http://cdn3.whatculture.com/wp-content/uploads/2013/04/MAN-OF-STEEL-e1365755036183.jpg", 0, 0, 350, 200)
        .transform("t" + sourceX + "," + sourceY + "s" + scaleX +","+ scaleY + ",0,0");

检查“s”和“t”（小写）的使用，分别表示相对缩放和相对平移。问题是由于使用了“S”和“T”（大写），它们分别是关于绝对缩放和平移的。

拉斐尔参考：http://raphaeljs.com/reference.html#Element.transform

希望这会有所帮助。

【讨论】：