Question

以下是我的示例：http://jsbin.com/urofan/7/edit

我想将视频绘制成自定义形状，而不是矩形，现在可能吗？（PS：形状是可拖动的）我在StackO或网络中找到的所有内容都是用于矩形绘图......

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

感谢您的帮助。艾伦。

Answer 1

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

enter image description here

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

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

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>

如何：使用KinecticJS将（HTML5）视频绘制成（自定义）画布形状

1 个答案: