1

好的，我知道标题很模糊，但这是我更具体的问题。目前，我试图避免使用 PHP 和 SQL 来存储我正在使用的裁剪工具中的数据点。裁剪工具为我提供了左上角 (x,y) 坐标和右下角 (x, y) 坐标，他们希望我将它们提交给 PHP 数据库以制作漂亮的图片。

我找到了 Raphael 并注意到他们有一个 clip-rect 工具，可以让你剪裁图像，它会显示剪裁的图像。我想要做的是拍摄那个剪裁的图像并用它填充拉斐尔圆。

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"}); 填充圆圈。关于如何做到这一点的任何建议都会很棒。

4

2 回答 2

2

我怀疑它是否可能使用 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://jsfiddle.net/5kJSa/

原始代码取自这里http://www.boogdesign.com/examples/svg/path-pattern-fill.svg

于 2012-07-31T17:39:52.587 回答
0

另一个答案。

与原始代码的小偏差。

我使用带圆角的矩形而不是圆形，并使用了填充属性。

<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
});​
于 2012-07-31T17:55:52.657 回答