2

我认为 HTML5 的 SVG 会做到这一点。所以我玩了Raphael JS。

我想要的是类似于有一个相框，掩盖底层图片。它需要可扩展。

所以我想用 svg 或类似的东西定义“相框”。然后定义遮罩区域。然后最后根据对象定义下面的图片。

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

除了使用 Raphael 之外，还有什么类似的方法可以做到这一点？我发现我无法在 Raphael 中定义一个掩码来使用它。我只需要它在 Firefox 和 Chrome 中工作，并且库越简单越好。总的来说，我只希望绘制大约 50 个元素，那么适合的方法呢？（我认为 SVG 是比 2d Canvas 更好的选择）。我不需要鼠标与对象交互。

谢谢

4

3 回答 3

4

SVG 可以做到这一点，但 Raphaël 不支持掩码（可能是一些 VML 限制）。但是，支持简单的矩形剪裁，请参阅Raphaël 文档（您想要clip-rect，这是 Raphaël 的 svg 的抽象/有限版本clip-path）。

可以在此处和此处找到一些 SVG 中的剪切和遮罩示例。

于 2013-02-26T10:28:56.057 回答
3

Canvas can do what you’re asking.

Just put 2 canvas’ on top of each other. The bottom canvas is the frame. The top canvas (which is smaller than the frame) is the picture. Then you can animate all you want on the picture. If your animation is simple, you might not even need a canvas library to keep track of your drawn elements. Excellent performance too since you’re not having the DOM track your elements as with SVG.

BTW, you could do the same with 1 canvas drawn on top of an SVG frame if you already have your frame drawn in SVG. Actually, you could even use an image for the frame if you wanted.

Here is code and a Fiddle: 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 回答
0

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

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

不幸的是，需要登录才能下载代码，但 FB/G+ 连接会很快完成这项工作！

于 2013-10-11T11:31:18.847 回答