1

我是 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);
}

提琴手

谢谢

4

1 回答 1

3

你可以像这样制作你的尺子：

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

在此处输入图像描述

这是代码和小提琴：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>
于 2013-11-06T03:53:10.870 回答