KineticJS : 스플라인을 따라 이미지 추가

스플라인을 따라 이미지를 추가하고 싶습니다. 그래서 스플라인이 사용자에 의해 그려지고 나서 그려지면 그 경로를 따라 이미지를 실행하고 싶습니다. 근본적으로, 이미지는 스플라인 경로를 따라 반복됩니다. 이것이 어떻게 달성 될 수 있는지에 대한 아이디어가 있습니까?KineticJS : 스플라인을 따라 이미지 추가

출처

2014-01-15 KodiakSA

당신은) 당신은 (mySpline.getPoints를 호출하여 Kinetic.Spline의 시작점을 얻을 수있는 스플라인을 따라

을 간격으로 마커 (또는 이미지)를 배치 할 수 있습니다.
내부 mySpline.getTensionPoints를 호출하여 스플라인 곡선 정의를 가져올 수 있습니다.
제 곡선 이차 곡선 (controlX, controlY, endX, ENDY)
중간 곡선 차 곡선이다이다. (control1X, control1Y, control2X, control2Y, endX, endY);
마지막 곡선은 이차 곡선 (controlX, controlY, endX, 앤디)이 정보와 약간의 수학으로

, 당신은 각 곡선에 간격 마커 (또는 이미지)를 배치 할 수 있습니다.

enter image description here

는 다음 코드와 데모입니다 : http://jsfiddle.net/m1erickson/8mb9r/

<!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-v5.0.0.min.js"></script> 
<style> 
body{padding:20px;} 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:400px; 
    height:350px; 
} 
</style>   
<script> 
$(function(){ 

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


    var spline = new Kinetic.Line({ 
     points: [20,100,340,100,200,200,50,200], 
     stroke: 'green', 
     strokeWidth: 3, 
     lineCap: 'round', 
     tension: 1, 
    }); 
    layer.add(spline); 
    layer.draw(); 

// 
// the following code places markers along the spline at interval 
// 

    showSplineMarkers(spline,0.25); 

    function showSplineMarkers(spline,interval){ 
     var points = spline.getPoints(); 
     var length = points.length; 
     var tension = spline.getTension(); 
     var closed = spline.getClosed(); 
     var tp, len, n, pt1, pt2, pt3, pt4; 
     var intervalT=interval; 
     var spots=[]; 

     pt1={x:points[0],y:points[1]}; // starting point of spline 


     // return if not a spline (tension==0) 
     // return when insufficient spline points are declared 

     if(tension==0 || length<=4){ return; } 

     // walk along the spline and place markets at interval 

     tp = spline.getTensionPoints(); 
     len = tp.length; 
     n = closed ? 0 : 4; 


     // the first curve of the spline is Quadratic 

     if (!closed) { 
      pt2={x:tp[0],y:tp[1]}; 
      pt3={x:tp[2],y:tp[3]}; 
      placeAlongQuad(intervalT,pt1,pt2,pt3); 
      pt1=pt3; 
     } 

     // all intermediate curves of the spline are CubicBezier 

     while(n < len - 2) { 
      pt2={x:tp[n++],y:tp[n++]}; 
      pt3={x:tp[n++],y:tp[n++]}; 
      pt4={x:tp[n++],y:tp[n++]}; 
      placeAlongCubicBezier(intervalT,pt1,pt2,pt3,pt4); 
      pt1=pt4; 
     } 

     // the last curve of the spline is Quadratic 

     if (!closed) { 
      pt2={x:tp[len-2],y:tp[len-1]}; 
      pt3={x:points[length-2],y:points[length-1]}; 
      placeAlongQuad(intervalT,pt1,pt2,pt3); 
     } 

    } // end showSplineMarkers 


    // place markers at interval along the Quad curve 

    function placeAlongQuad(intervalT,pt1,pt2,pt3){ 
     for(var i=0.00;i<=1.00;i+=intervalT){ 
      var pt=getQuadraticBezierXYatT(pt1,pt2,pt3,i); 
      spot(pt.x,pt.y); 
     } 
    } 

    // place markers at interval along CubicBez curve 

    function placeAlongCubicBezier(intervalT,pt1,pt2,pt3,pt4){ 
     for(var i=0.00;i<=1.00;i+=intervalT){ 
      var pt=getCubicBezierXYatT(pt1,pt2,pt3,pt4,i); 
      spot(pt.x,pt.y); 
     } 
    } 

    // draw a marker 

    function spot(x,y){ 
     var n=new Kinetic.Circle({ 
      x:x, 
      y:y, 
      radius:4, 
      fill:"red" 
     }); 
     layer.add(n); 
     layer.draw(); 
    } 

    // get XY at interval on Quad 

    function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) { 
     var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; 
     var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; 
     return({x:x,y:y}); 
    } 

    // get XY at interval on CubicBez 

    function getCubicBezierXYatT(startPt,controlPt1,controlPt2,endPt,T){ 
     var x=CubicN(T,startPt.x,controlPt1.x,controlPt2.x,endPt.x); 
     var y=CubicN(T,startPt.y,controlPt1.y,controlPt2.y,endPt.y); 
     return({x:x,y:y}); 
    } 

    // cubic helper formula at T 
    function CubicN(T, a,b,c,d) { 
     var t2 = T * T; 
     var t3 = t2 * T; 
     return a + (-a * 3 + T * (3 * a - a * T)) * T 
     + (3 * b + T * (-6 * b + b * 3 * T)) * T 
     + (c * 3 - c * 3 * T) * t2 
     + d * t3; 
    } 

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

</script>  
</head> 

<body> 
    <div id="container"></div> 
</body> 
</html>

출처

2014-01-15 22:28:15 markE

OK,하지만 당신은 마커가 고정 된 거리로 얻을 수 있습니다. 나는 이미지를 늘리고 싶지 않다. 그러니까 내 이미지의 폭이 100 픽셀이라고 가정 해 봅시다. 마커를 마디에 100px 길이로 스플라인에 올려 놓으면 어떻게됩니까? 스플라인 길이가 길어질수록 곡선이 길어질 수 있습니다. 이것에 대한 도움을 주셔서 감사합니다! 그 반응은 이미 많은 도움이되었습니다! – KodiakSA

매우 작은 간격 (0.01의 T)으로 커브를 걸어두고 간격 사이를 이동 한 거리를 더해야합니다. 이렇게 거리를 계산하십시오. * (y-previousY) 100px (또는 무엇이든) 걸었 으면 마커를 놓습니다 (이미지 배치). – markE

KineticJS : 스플라인을 따라 이미지 추가

답변

관련 문제