个人中心
gpt4 book ai didi

javascript - Kinetic JS绘制虚线箭头线

转载 作者：行者123 更新时间：2023-12-03 11:51:34 28 4
gpt4 key购买 nike

在 KineticJS 中，如何绘制一 strip 有箭头的虚线？

例如:

> > > > > >

我知道你会画一条虚线:

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

如何将破折号更改为某种形式的从一个点指向另一个点的箭头？使用填充背景不起作用，因为可以向任何方向绘制线条。

最佳答案

绘制一个自定义 Kinetic.Shape，其中包含沿线路径放置的多个箭头:

  • 创建一个包含箭头图形的临时 Canvas 。

  • 创建一个 Kinetic.Shape，以所需的间隔和与线相同的 Angular 沿线绘制临时 Canvas 箭头。

enter image description here

以下是计算直线 Angular 和长度的数学公式:

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>

关于javascript - Kinetic JS绘制虚线箭头线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25813396/

28 4 0
文章推荐： javascript - 如何将所选列表转换为 JavaScript 中的自定义列表？
文章推荐： Javascript两个 "For"循环循环从3个数组中获取数据
文章推荐： javascript - 使用模块模式，为什么引用未定义？
文章推荐： javascript - 循环遍历 Backbone $el 中的 tr 元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com