KineticJS：沿樣條線添加圖像

我想沿樣條線添加圖像。所以樣條線是由用戶繪製的，然後在繪製之後，我想沿着它的路徑運行圖像。從根本上說，圖像將沿着樣條線的路徑重複關於如何實現這一點的任何想法？KineticJS：沿樣條線添加圖像

2014-01-15 KodiakSA

你可以把間隔標記（或圖像）沿着花鍵

你可以通過調用mySpline.getPoints得到Kinetic.Spline的起點（）。
您可以通過調用內部mySpline.getTensionPoints來獲取樣條曲線的曲線定義。
第一曲線是二次曲線由（controlX，controlY，endX，恩迪）
中間曲線是三次曲線。（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，但你可以得到的標誌是一個固定的距離。我不想拉伸圖像。因此，假設我的圖像寬度爲100px，那麼如何在樣條線上每隔100px放置一個標記，因爲樣條曲線的長度可能會更長。感謝您的幫助！這個迴應已經幫了很多！ – KodiakSA

您必須以非常小的間隔步進曲線（T爲0.01），並添加在間隔之間行進的距離計算如下的距離：Math.sqrt（（x-previousX）*（x-previousX）+（y-beforeY） *（y-previousY）。在你走完100px（或其他）之後，你放下一個標記（放置一個圖像）。 – markE

KineticJS：沿樣條線添加圖像

回答

相關問題