KineticJs：爲拼圖創建網格線

Question

我目前使用的是kineticJs v5.1，我創建了一個曲線鋸難題，我必須創建網格線塊作爲用戶指南，以適合塊到塊，目前我我創建通過循環繪製它，但不知何故，我有錯誤創建它，爲什麼？任何人都可以幫忙嗎？謝謝:)

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

Horizo​​ntalLine

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