Question

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

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

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://jsfiddle.net/5kJSa/

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

Answer 2

另一个答案。

与原始代码的偏差很小。

我使用带圆角的rect而不是circle并使用了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
});

Raphael Clip图像问题

2 个答案: