Fabric.js 1.4.0版本的网格布局问题

Question

我正在开发基于Fabric.js的项目。我面临Fabric.js 1.4.0版本的网格布局问题，I Text属性1.4.0 js没有正确应用网格属性。但是当我使用Fabric.js 1.3.0版本时，简单的Text属性网格布局工作得很好。

Bellow是使用Fabric.js 1.3.0＆amp; amp;屏幕截图和链接细节。文本属性。您可以在这里看到所有网格布局都很完美。

Bellow是使用Fabric.js 1.4.0＆amp; amp;屏幕截图和链接细节。 IText属性。你可以在这里看到所有网格布局都是错误的布局。

Bellow是我的两个fabricjs版本的网格布局功能代码。（1.3.0和1.4.0）

 document.getElementById('grid').addEventListener('click', function (e) {
     //alert("grid");
 //$("#grid").click(function() {
   var width = canvas.width;
var height = canvas.height;
//alert(width);
//alert(height);
var j = 0;
var line = null;
var rect = [];
var size = 20;
console.log(width + ":" + height);
 for (var i = 0; i < Math.ceil(width / 20); ++i) {
    rect[0] = i * size;
    rect[1] = 0;
    rect[2] = i * size;
    rect[3] = height;
    line = null;

    line = new fabric.Line(rect, {
        stroke: '#999',
        opacity: 0.5
    });
      line.selectable = false;
      canvas.add(line);
       line.sendToBack();
        }
for (i = 0; i < Math.ceil(height / 20); ++i) {
    rect[0] = 0;
    rect[1] = i * size;
    rect[2] = width;
    rect[3] = i * size;
    line = null;
    line = new fabric.Line(rect, {
        stroke: '#999',
        opacity: 0.5
    });
    line.selectable = false;
  canvas.add(line);
    line.sendToBack();
   }
   canvas.renderAll();
});

Answer 1

如果您使用带有fabricjs 1.4.0的网格，可以回答这个问题。

document.getElementById('grid').addEventListener('click', function (e) {
     //alert("grid");
 //$("#grid").click(function() {
   var width = canvas.width ;
var height = canvas.height ;
//alert(width);
//alert(height);
var j = 0;
var line = null;
var rect = [];
var size = 20;
console.log(width + ":" + height);
 for (var i = 0; i < Math.ceil(width / 20); ++i ) {
    // alert(i);
    rect[0] = i * size;
    rect[1] = 0;
    rect[2] = i * size;
    rect[3] = height;


    line = null;

    line = new fabric.Line(rect, {
        stroke: '#999',
        opacity: 0.5,
         top: 0



    });
      line.selectable = false;
      canvas.add(line);
       line.sendToBack();
        }
for (i = 0; i < Math.ceil(height / 20); ++i ) {
    //alert(i);
    rect[0] = 0;
    rect[1] = i * size;
    rect[2] = width;
    rect[3] = i * size;


    line = null;
    line = new fabric.Line(rect, {
        stroke: '#999',
        opacity: 0.5,
        left:0,

        });
    line.selectable = false;
  canvas.add(line);
    line.sendToBack();
   }
   canvas.renderAll();
});