은 방법 : 여기 KinecticJS

와 (정의) 캔버스 모양으로 그리기 (HTML5) 비디오 내 예입니다 : http://jsbin.com/urofan/7/edit이 가능 바로 것을 내가 아닌 사각형 모양, 사용자 정의 모양으로 비디오를 그리는 싶습니다 은 방법 : 여기 KinecticJS

입니다

지금? (추 신 : 모양은 드래그 가능합니다.) StackO 나 웹에서 모두 직사각형 드로잉을위한 것입니다 ...

향후 모양은 조정 가능한 반경과 위치 (드래그 가능하고 크기 조정 가능)가있는 원이됩니다.

도움 주셔서 감사합니다. 앨런.

출처

2013-06-26 Allan Stepps

클립 방법을 사용하여 경로에 이미지 (비디오 프레임 잡기)를 포함 할 수 있습니다.

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>

출처

2013-06-26 18:39:17 markE

감사합니다! 그 위대한 작품. 그냥 내 그림 함수에서 context.clip()이 필요합니다 : http://jsbin.com/urofan/9/ –

은 방법 : 여기 KinecticJS

답변

관련 문제