KineticJs:为拼图创建网格线

KineticJs : Creating gridLines for puzzle pieces

本文关键字：创建 网格线 拼图 KineticJs      更新时间：2023-09-26

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

垂直线

 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);

水平线

 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/

您应该从该行的构造函数映射中取出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);
}
相关文章：