拉斐尔剪辑图像问题

Posted

技术标签:

【中文标题】拉斐尔剪辑图像问题【英文标题】: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
);​

【讨论】:

以上是关于拉斐尔剪辑图像问题的主要内容,如果未能解决你的问题,请参考以下文章

svg 剪辑图像并显示中风

如何在moviepy中的图像剪辑上设置音频剪辑?

SfTabView 标题剪辑缩放图像

设置影片剪辑图像/背景

CSS,将内圈剪辑到图像

UIButton 的剪辑图像