1

さて、タイトルが非常に曖昧であることはわかっていますが、ここに私のより具体的な質問があります。現在、使用しているトリミングツールからのデータポイントを保存するためにPHPとSQLを使用する必要がないようにしています。トリミングツールを使用すると、左上（x、y）の座標と右下（x、y）の座標が得られ、PHPのデータベースに送信してきれいな画像を作成できます。

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"}）;で埋めるだけです。これを行う方法についての提案は素晴らしいでしょう。

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 に答える