javascript - KineticJS-如何绘制像尺子一样的重复线？

我是KineticJS的新手，我想像尺子一样重复线条。是否有其他方法可以在不调用line1，line2，line3等的情况下建立线路？我尝试使用for来实现，但是会发生错误。有人可以帮忙吗？

我想要的尺子：

我的错误代码：

for (int i = 0; i < 10; i++) {
    var rects = new Kinetic.Rect({
            x: 70,
            y: 75,
            width: 3,
            height: 10,
            fill: 'grey'
        });
    layer.add(rects);
}

JsFiddle

谢谢

最佳答案

您可以像这样制作尺子：

从一组开始。
添加带有渐变背景的Rect。
添加带有标记的自定义形状。

这是代码和小提琴：http://jsfiddle.net/m1erickson/UcZ9H/

<!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.7.2.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);

    var ruler=new Kinetic.Group({
        x:50,
        y:50,
        width:265,
        height:70,
        draggable:true
    });
    layer.add(ruler);

    var rulerBG=new Kinetic.Rect({
        x:0,
        y:0,
        width:265,
        height:70,
        fillLinearGradientStartPoint: [107, 0],
        fillLinearGradientEndPoint: [107, 70],
        fillLinearGradientColorStops: [0,'white', .75,"rgba(236,247,252,1)", 1,"rgba(204,234,246,1)"],
        stroke:"rgba(204,234,246,1)",
        strokeWidth:.5
    });
    ruler.add(rulerBG);

    var rulerMarks = new Kinetic.Shape({
      x:0,
      y:0,
      drawFunc: function(context) {
        context.beginPath();
        for(var i=0;i<5;i++){
            context.moveTo(10+i*50,50);
            context.lineTo(10+i*50,30);
            context.fillText((i*20),10+i*50-5,20);
            for(var j=0;j<5;j++){
                context.moveTo(10+i*50+j*10,45);
                context.lineTo(10+i*50+j*10,35);
            }
        }
        context.moveTo(5*50,50);
        context.lineTo(5*50,30);
        context.fillText((5*20),5*50-8,20);

        context.fillStrokeShape(this);
      },
      stroke: 'black',
      strokeWidth:2
    });
    ruler.add(rulerMarks);

    layer.draw();


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

</script>
</head>

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