Question

我目前正在使用kineticJs v5.1，我正在创建一个曲线锯拼图，我必须用网格线创建块作为用户将块放入块中的指南，目前我通过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);
}

KineticJs：为拼图创建gridLines

1 个答案: