拉斐尔剪辑图像问题

Posted 2023-02-25

【中文标题】拉斐尔剪辑图像问题

【英文标题】：Raphael Clip Image Issue

【发布时间】：2012-07-12 13:18:22

【问题描述】：

好的，我知道标题很模糊，但这是我更具体的问题。目前，我试图避免使用 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"); 填充圆圈。任何关于如何做到这一点的建议都会很棒。

【参考方案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"  >
            <image xlink:href="http://lorempixel.com/600/500/" x="0" y="0"
                  />
        </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

【讨论】：

我能够使用 php 很好地完成它。我建议这条路线。

没有问题，我认为您需要 Raphael 解决方案 :)

【参考方案2】：

另一个答案。

与您的原始代码略有偏差。

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

<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
);​