2

私は HTML5 の SVG がこれを行うと思っていました。だから私はRaphael JSで遊んだ。

私が欲しいのは、下にある絵を隠して、額縁を作るようなものです。スケーラブルである必要があります。

だから私はsvgなどで「額縁」を定義したい。次に、マスク領域を定義します。次に、オブジェクトの観点から下の画像を最後に定義します。

最後に、写真と見なすオブジェクトをアニメーション化します。

これを行うには、ラファエルを使用する以外にどのような方法がありますか? Raphael では、それを使用してルールを作成するマスクを定義できないことがわかりました。Firefox と Chrome で動作する必要があるだけで、ライブラリはシンプルであるほど良いです。全部で50くらいしか描けないと思うので、それに合う方法はありますか？(2d Canvas よりも SVG の方が適していると思います)。オブジェクトとのマウス操作は必要ありません。

ありがとう

4

3 に答える 3

4

SVG はこれを行うことができますが、Raphaël はマスクをサポートしていません (おそらく VML の制限)。ただし、単純な長方形のクリッピングがサポートされています。Raphaël のドキュメントを参照してください(必要な場合clip-rectは、Raphaël の抽象化/限定バージョンの svgclip-pathです)。

SVG でのクリッピングとマスキングのいくつかの例は、こことここにあります。

于 2013-02-26T10:28:56.057 に答える
3

キャンバスは、あなたが求めていることを実行できます。

2 つのキャンバスを重ねるだけです。下のキャンバスはフレームです。上部のキャンバス (フレームよりも小さい) が絵です。次に、画像に必要なすべてをアニメーション化できます。アニメーションが単純な場合は、描画された要素を追跡するためのキャンバス ライブラリさえ必要ないかもしれません。SVG のように DOM に要素を追跡させないため、パフォーマンスも優れています。

ところで、フレームが既に SVG で描画されている場合は、SVG フレームの上に描画された 1 つのキャンバスで同じことを行うことができます。実際、必要に応じてフレームに画像を使用することもできます。

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/9Tj3s/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #container{
      position:relative;
      border:1px solid green;
      width:1380px;
      height:1315px;
    }
    #frame{
      position:absolute;
      top:0px;
      left:0px;
      border:1px solid red;
    }
    #picture{
      position:absolute;
      top:66px;
      left:67px;
      border:1px solid blue;
    }
</style>

<script>
    $(function(){

        var frame=document.getElementById("frame");
        var ctxFrame=frame.getContext("2d");
        var picture=document.getElementById("picture");
        var ctxPicture=picture.getContext("2d");

        var img=new Image();
        img.onload=function(){
            ctxFrame.drawImage(this,0,0,frame.width,frame.height);
        } 
        img.src="http://www.themezoom-neuroeconomics.com/images/5/5e/Golden-frame.jpg";

        var dx= 4;
        var dy=4;
        var y=150;
        var x=10;
        function draw(){
            ctxPicture.clearRect(0,0,243,182);
            ctxPicture.beginPath();
            ctxPicture.fillStyle="#0000ff";
            ctxPicture.arc(x,y,20,0,Math.PI*2,true);
            ctxPicture.closePath();
            ctxPicture.fill();
            if( x<10 || x>225)  dx=-dx;
            if( y<10 || y>160)  dy=-dy;
            x+=dx;
            y+=dy;
          }
        setInterval(draw,60); 

    }); // end $(function(){});
</script>

</head>

<body>
    <div id="container">
        <canvas id="frame" width=380 height=315></canvas>
        <canvas id="picture" width=243 height=182></canvas>
    </div>
</body>
</html>
于 2013-02-26T05:08:04.567 に答える