Raphael剪輯圖像問題

Question

好吧，所以我知道標題非常含糊，但這是我更具體的問題。目前我試圖避免使用PHP和SQL來存儲我使用的裁剪工具中的數據點。裁剪工具爲我提供了左上角（x，y）座標和右下角（x，y）座標，他們希望我將這些座標提交給PHP數據庫，以便製作出美觀的圖像。

我發現拉斐爾，並注意到他們有一個剪輯rect工具，可以讓你剪輯圖像，它會顯示剪輯圖像。我想要做的就是拍下這張剪輯後的圖像，並用它填充Raphael圈。

var paper = Raphael(10, 50, 500, 400); 

     var paperCenter_X = 500/2; 
     var paperCenter_Y = 400/2; 

     //var circle = paper.circle(50, 40, 60); 
     var circle = paper.circle(paperCenter_X, paperCenter_Y, 100); 

     circle.attr("stroke", "#000"); 
     var grabImage = document.getElementById("jelly"); 

     var src = grabImage.src; 
     //alert(src); 
     var img = paper.image(src, 10, 10, 800, 600); 
      img.attr({"clip-rect":"0 0 100 150"}); 
     //var newImage = new Image(); 
     //newImage.src = img.src; 
     alert(newImage.src); 

     circle.attr({fill: 'url("'+img+'")'}); 

所以我評論的東西是我嘗試過的東西，只是不工作。理想情況下，我想要做的只是用img.attr（{「clip-rect」：「0 0 100 150」}）填充圓圈;任何關於如何做到這一點的建議都會很棒。

Answer 1

我懷疑它是否可能與RaphaelJS，但與直接的SVG它可能。

它完成與SVG模式標記。

試試這個代碼在這裏

<?xml version="1.0" encoding="UTF-8"?> 
<svg version="1.1" 
    baseProfile="full" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events"> 
    <title>Text Pattern Fill Example</title> 
    <defs> 
     <pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450"> 
      <image xlink:href="http://lorempixel.com/600/500/" x="0" y="0" 
       width="600" height="450" /> 
     </pattern> 
    </defs> 
    <path d="M5,50 
      l0,100 l100,0 l0,-100 l-100,0 
      M215,100 
      a50,50 0 1 1 -100,0 50,50 0 1 1 100,0 
      M265,50 
      l50,100 l-100,0 l50,-100 
      z" 
      fill="url(#img1)" />  
</svg> 

演示從這裏http://www.boogdesign.com/examples/svg/path-pattern-fill.svg

Answer 2

另一個答案採取 http://jsfiddle.net/5kJSa/

原代碼。

與原始代碼的偏差較小。

我用圓角代替圓的矩形，並使用fill屬性。

<img id="jelly" src="http://lorempixel.com/400/200/" style="display:none;" /> 

<script type="text/javascript"> 
    var paper = Raphael(10, 50, 500, 400); 

     var paperCenter_X = 500/2; 
     var paperCenter_Y = 400/2; 

var grabImage = document.getElementById("jelly"); 
var src = grabImage.src; 

paper.rect(0, 0, 200, 200, 600).attr({ 
    fill: "url("+src+")", 
    "stroke-width": 2 
}); 


// Commenting your original code. 
/* 
     //var circle = paper.circle(50, 40, 60); 
     var circle = paper.circle(paperCenter_X, paperCenter_Y, 100); 

     circle.attr("stroke", "#000"); 
     var grabImage = document.getElementById("jelly"); 

     var src = grabImage.src; 
     //alert(src); 
     var img = paper.image(src, 10, 10, 800, 600); 
      img.attr({"clip-rect":"0 0 100 150"}); 
     //var newImage = new Image(); 
     //newImage.src = img.src; 
     alert(newImage.src); 

circle.attr({fill: 'url("'+img+'")'}); 

*/ 

</script> 
​ 

入住這裏http://jsfiddle.net/8XmqM/

小提琴代碼的一個非常基本的版本是這樣的

var paper = Raphael(10, 50, 500, 500); 
paper.rect(0, 0, 200, 200, 600).attr({ 
    fill: "url(http://lorempixel.com/400/200/)", 
    "stroke-width": 2 
});​