0

这是我的例子：http: //jsbin.com/urofan/7/edit

我想将视频绘制成自定义形状，而不是矩形，现在可以吗？（PS：形状是可拖动的）我在StackO或网上找到的都是矩形图......

将来，形状将是一个可调整半径和位置（可拖动和调整大小）的圆。

谢谢你的帮助。艾伦。

4

1 回答 1

3

您可以使用剪辑方法将图像（视频帧抓取）包含到路径中。

在此处输入图像描述

首先定义您希望包含视频帧的路径。

请注意，您不必进行填充/描边。

context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.lineTo(250, 400);
context.lineTo(40, 80);
context.closePath();

接下来，从您定义的路径创建一个剪切路径。

在此之后绘制的所有内容都将被剪切到您的剪切路径中。

context.clip();

最后，在剪辑路径中绘制视频和 drawImage 的帧抓取。

帧抓取只会出现在您的剪切路径内。

context.drawImage(0,0,canvas.width,canvas.height);

这是代码和小提琴：http: //jsfiddle.net/m1erickson/aMW74/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 500,
        height: 500
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);


    var img=document.createElement("img");
    img.onload=function(){
        drawClippedImage(img);
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";

    function drawPathForClipping(context){
        context.beginPath();
        context.moveTo(200, 50);
        context.lineTo(420, 80);
        context.lineTo(250, 400);
        context.lineTo(40, 80);
        context.closePath();
    }

    function drawClippedImage(img){

        var shape = new Kinetic.Shape({
          id: 'shape',
          drawFunc: function(canvas) {
            var context = canvas.getContext();

            // define the path that will be used for clipping
            drawPathForClipping(context);

            // make the last path a clipping path
            context.clip();

            // draw a clipped image (frame grab)
            context.drawImage(img,0,0,img.width,img.height);


            // styling, draw the clip path for real as a border
            drawPathForClipping(context);
            canvas.stroke(this);

          },
          stroke: 'black',
          strokeWidth: 4,
          draggable: true
        });

        // add the shape shape to the layer
        layer.add(shape);
        layer.draw();

    }

}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>
于 2013-06-26T18:39:17.123 回答