修改網格高度/寬度

我正在開發一個項目，該項目是我喜歡的遊戲的世界規劃師/構建者。我想使網格100 * 54.我一直在JSFiddle上弄了一些代碼，我似乎無法得到我想要的。我想方格的大小爲16 * 16修改網格高度/寬度

var canvas = new fabric.Canvas('c', { 
 
    selection: false 
 
}); 
 
var grid = 50; 
 

 

 
// create grid 
 

 
for (var i = 0; i < (600/grid); i++) { 
 
    canvas.add(new fabric.Line([i * grid, 0, i * grid, 600], { 
 
    stroke: '#ccc', 
 
    selectable: false 
 
    })); 
 
    canvas.add(new fabric.Line([0, i * grid, 600, i * grid], { 
 
    stroke: '#ccc', 
 
    selectable: false 
 
    })) 
 
} 
 

 
// add objects 
 

 
canvas.add(new fabric.Rect({ 
 
    left: 100, 
 
    top: 100, 
 
    width: 50, 
 
    height: 50, 
 
    fill: '#faa', 
 
    lockRotation: true, 
 
    lockScalingX: true, 
 
    lockScalingY: true, 
 
    originX: 'left', 
 
    originY: 'top', 
 
    centeredRotation: true, 
 
    hasControls: false 
 
})); 
 

 

 
// snap to grid 
 

 
canvas.on('object:moving', function(options) { 
 
    options.target.set({ 
 
    left: Math.round(options.target.left/grid) * grid, 
 
    top: Math.round(options.target.top/grid) * grid 
 
    }); 
 
});

canvas { 
 
    border: 1px solid #ccc; 
 
}

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script> 
 
<canvas id="c" width="600" height="600"></canvas>

來源

2016-02-26 RazerDoge

這種工作方式：網格是網格將有多大的像素。您需要兩個for循環來指示每個循環的行數。 for循環根據它經過的循環數生成網格。（所以54表示54行）。

2000表示行將以像素爲單位的時間。

工作代碼：

var canvas = new fabric.Canvas('c', { 
 
    selection: false 
 
}); 
 
var grid = 16; 
 

 

 
// create grid 
 

 
for (var i = 0; i < 100; i++) { 
 
    canvas.add(new fabric.Line([i * grid, 0, i * grid, 2000], { 
 
    stroke: '#ccc', 
 
    selectable: false 
 
    })); // horizontal 
 
} 
 

 
for (var i = 0; i < 54; i++) { 
 
    canvas.add(new fabric.Line([0, i * grid, 2000, i * grid], { 
 
    stroke: '#ccc', 
 
    selectable: false 
 
    })); // vertical 
 
} 
 

 
// add objects 
 

 
canvas.add(new fabric.Rect({ 
 
    left: 16, 
 
    top: 16, 
 
    width: 16, 
 
    height: 16, 
 
    fill: '#faa', 
 
    lockRotation: true, 
 
    lockScalingX: true, 
 
    lockScalingY: true, 
 
    originX: 'left', 
 
    originY: 'top', 
 
    centeredRotation: true, 
 
    hasControls: false 
 
})); 
 

 
// add objects 
 

 
canvas.add(new fabric.Rect({ 
 
    left: 16, 
 
    top: 16, 
 
    width: 16, 
 
    height: 16, 
 
    fill: '#faa', 
 
    lockRotation: true, 
 
    lockScalingX: true, 
 
    lockScalingY: true, 
 
    originX: 'left', 
 
    originY: 'top', 
 
    centeredRotation: true, 
 
    hasControls: false 
 
})); 
 

 
// snap to grid 
 

 
canvas.on('object:moving', function(options) { 
 
    options.target.set({ 
 
    left: Math.round(options.target.left/grid) * grid, 
 
    top: Math.round(options.target.top/grid) * grid 
 
    }); 
 
});

canvas { 
 
    border: 1px solid #ccc; 
 
}

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script> 
 
<canvas id="c" width="1600px" height="865px" ></canvas>

來源

2016-02-26 19:11:04 Spideynn

修改網格高度/寬度

回答

相關問題