Question

我认为HTML5的SVG会这样做。所以我和拉斐尔JS一起玩。

我想要的就是拥有一个相框，掩盖底层画面。它需要具有可扩展性。

所以我想定义一下相框＆＃39;与svg或类似。然后定义遮罩区域。然后最终根据对象定义下面的图片。

最后，我想要为我认为是图片的对象设置动画。

与使用拉斐尔相比，这样做的方式有多么类似？我发现我无法在Raphael中定义一个使用它的规则。我只需要它在Firefox和Chrome中工作，而且库越简单就越好。总的来说我只期望抽取大约50个元素，所以这个方法适合吗？（我认为SVG是比2d Canvas更好的选择）。我不需要与对象进行鼠标交互。

由于

Answer 1

SVG can do this，但Raphaël不支持蒙版（可能是一些VML限制）。但是，支持简单的矩形裁剪，请参阅Raphaël documentation（您想要clip-rect，这是Raphaël的抽象/限制版svg的clip-path）。

可以在here和here找到一些剪辑和屏蔽的示例。

Answer 2

Canvas可以做你想要的。

将2个画布放在彼此的顶部。底部画布是框架。顶部画布（小于框架）就是图片。然后，您可以在图片上设置所有想要的动画。如果动画很简单，您甚至可能不需要画布库来跟踪绘制的元素。由于你没有像SVG一样跟踪你的元素，所以性能也很出色。

顺便说一句，如果已经在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>

Answer 3

您可以在此处找到解决方案：http://www.codeproject.com/Tips/611648/Applying-a-Custom-Mask-on-an-Image-using-Raphael

主要障碍是img url / atts作为数据参数传递给“canvas”元素，这是一个不好的可访问性问题，因为图像被视为形状填充。它是专业人士，接受SVG样式和过滤器，甚至可以在IE8 ++中使用!!

不幸的是，为了下载代码需要登录，但FB / G + connect会很快完成工作！

Raphael JS：无法遮挡物体。另类？

3 个答案: