動力學JS畫一條虛線箭頭

在KineticJS中，如何繪製一條帶箭頭的虛線？動力學JS畫一條虛線箭頭

例如：

> > > > > >

我知道畫一條虛線，你這樣做：

var line = new Kinetic.Line({ 
      points: [fromx, fromy, tox, toy] 
      stroke: 'red', 
      dashArray: [10, 10] 
     });

如何改變破折號某種形式的一個箭頭指向從一個點到另一個點？使用填充背景將不起作用，因爲可以沿任何方向繪製線條。

來源

2014-09-12 wwwuser

繪製定製Kinetic.Shape含有沿線的路徑放置多個箭頭：

創建含有箭頭的繪製一個臨時畫布。
創建一個Kinetic.Shape，以期望的間隔和與該線相同的角度沿着該線繪製臨時畫布箭頭。

enter image description here

下面是計算線的角度和長度的數學：

var dx=p1.x-p0.x; 
var dy=p1.y-p0.y; 
var angle=Math.atan2(dy,dx); 
var length=Math.sqrt(dx*dx+dy*dy);

下面是反覆繪製的箭頭在沿生產線的路徑的間隔的代碼：

var cos=Math.cos(angle); 
var sin=Math.sin(angle); 

// drawImage each arrow along the line at interval spaceLength 
for(var n=spaceLength;n<length;n+=spaceLength){ 
    var ax=p0.x+n*cos; 
    var ay=p0.y+n*sin; 
    ctx.save(); 
    ctx.translate(ax,ay-5); 
    ctx.rotate(angle); 
    ctx.drawImage(arrow,0,0); 
    ctx.restore(); 
}

示例代碼和演示：http://jsfiddle.net/m1erickson/1z8hynqu/

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

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

    // start & end points of line 
    var p0={x:50,y:100}; 
    var p1={x:250,y:50}; 

    // create a temp canvas with an arrow drawing 
    var arrow=makeArrow(); 

    // make a new arrow-line 
    makeArrowLine(p0,p1,15); 

    // just for demo...show the line segement in red 
    var demoLine=new Kinetic.Line({ 
     x:0,y:0, 
     points:[p0.x,p0.y,p1.x,p1.y], 
     stroke:'red', 
     tension:1, 
    }); 
    layer.add(demoLine); 
    layer.draw(); 


    function makeArrowLine(p0,p1,spaceLength){ 

     // a custom Shape that draws arrows along a line 
     var s=new Kinetic.Shape({ 
      x: 0, 
      y: 0, 
      stroke: 'blue', 
      drawFunc: function(ctx){ 

       // vars needed to position/rotate arrows along line 
       var p0=this.p0; 
       var p1=this.p1; 
       var dx=p1.x-p0.x; 
       var dy=p1.y-p0.y; 
       var angle=Math.atan2(dy,dx); 
       var cos=Math.cos(angle); 
       var sin=Math.sin(angle); 
       var length=Math.sqrt(dx*dx+dy*dy); 

       // drawImage each arrow along the line at interval spaceLength 
       for(var n=spaceLength;n<length;n+=spaceLength){ 
        var ax=p0.x+n*cos; 
        var ay=p0.y+n*sin; 
        ctx.save(); 
        ctx.translate(ax,ay-5); 
        ctx.rotate(angle); 
        ctx.drawImage(arrow,0,0); 
        ctx.restore(); 
       } 

       // required for Kinetic.Shape's 
       ctx.fillStrokeShape(this); 
      } 
     }); 
     s.p0=p0; 
     s.p1=p1; 
     layer.add(s); 
     layer.draw(); 

    } 


    // create a temp canvas containing a drawing of an arrow 
    function makeArrow(){ 
     var c=document.createElement('canvas'); 
     var cctx=c.getContext('2d'); 
     c.width=8; 
     c.height=10; 
     cctx.beginPath(); 
     cctx.moveTo(0,0); 
     cctx.lineTo(8,5); 
     cctx.lineTo(0,10); 
     cctx.stroke(); 
     return(c); 
    } 


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

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

來源

2014-09-12 22:33:22 markE

動力學JS畫一條虛線箭頭

回答

相關問題