RaphaelJS图像剪辑 - 不能正常工作

Question

In this jsfiddle我有一张带有两张照片的Raphael画布。第一个是完整的图像（未剪切），第二个是相同的图像但是被剪裁。由于某种原因，第二张图像没有显示出来。这段代码出了什么问题？

的javascript：

var paper = Raphael(document.getElementById('canvas'));

var img = paper.image('http://designsbynickthegeek.com/wp-content/uploads/2012/01/social-header.png', 0, 0, 480, 259 );

var img2 = paper.image('http://designsbynickthegeek.com/wp-content/uploads/2012/01/social-header.png', 0, 300, 40, 40 );

img2.attr({'clip-rect': "0,0,40,40" });

Answer 1

你犯了两个错误。

首先：您缩小了图像尺寸。变化

var img2 = paper.image('http://designsbynickthegeek.com/wp-content/uploads/2012/01/social-header.png', 
                        0, 300, 40, 40 );

到

var img2 = paper.image('http://designsbynickthegeek.com/wp-content/uploads/2012/01/social-header.png', 
                        0, 300, 480, 259 );

秒：您使用了错误的剪裁坐标。变化

img2.attr({'clip-rect': "0,0,40,40" });

到

img2.attr({'clip-rect': "0,300,40,40" });

查看您编辑过的小提琴here。