有没有办法用Raphael.js裁剪图像?

时间:2013-05-29 02:49:34

标签: raphael crop

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

也许在拉斐尔有另一种方式可以做到这一点。 我想要完成的是在Raphael中使用图像片段作为图像对象,我需要将一个矩形从外部图像复制到其中。 类似的东西:

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

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

编辑:

小提琴是

/ w9XSf / 12 /

在上面的示例中,我从原始图像(612 x 325px)抓取100 x 60px区域,并尝试在输出图像上显示它,即500 x 300px。

规模有效,但它抓住的区域不是我需要的区域。 如果我从0,0抓住它确实有效。 但是,当我从原始图像的左上角移动时,它给我的实际区域远离我实际需要的区域:(。

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

感谢。

1 个答案:

答案 0 :(得分: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

希望这有帮助。