：创建拼图块的gridLines

Question

我目前正在使用kineticJs v5.1，我正在创建一个拼图，我必须创建一个带有网格线的块，作为用户将这些块放入块中的指南，目前我正在创建via for循环来绘制它，但不知怎么我在创建它时出错了，为什么？有人能帮忙吗？谢谢:)

VerticalLine

 var verticalLine = new Kinetic.Line({
   for (var i = 0; i <= verticalPieces; i++) {
      var x = pieceWidth * i;
    points: [50, x, 1145, x],
    stroke: 'red',
    strokeWidth: 2,
    lineJoin: 'round',
    /*
     * line segments with a length of 33px
     * with a gap of 10px
     */
    dash: [33, 10]
  });

layer.add(verticalLine);

HorizontalLine

 var HorizontalLine= new Kinetic.Line({
   for (var i = 0; i <= horizontalPieces; i++) {
      var y = pieceHeight * i;
    points: [y, 640 , y, 20],
    stroke: 'red',
    strokeWidth: 2,
    lineJoin: 'round',
    /*
     * line segments with a length of 33px
     * with a gap of 10px
     */
    dash: [33, 10]
  });

layer.add(HorizontalLine);

我的JsFiddle：http://jsfiddle.net/e70n2693/18/

Answer 1

您应该将for循环从行的构造函数映射中删除。您不能将for循环放入映射中，但是可以通过构造函数传递它。试试这个：

for (var i = 0; i <= verticalPieces; i++) {
    var x = pieceWidth * i;

    var verticalLine = new Kinetic.Line({
        points: [50, x, 1145, x],
        stroke: 'red',
        strokeWidth: 2,
        lineJoin: 'round',
        /*
         * line segments with a length of 33px
         * with a gap of 10px
         */
        dash: [33, 10]
    });
    layer.add(verticalLine);
}