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

【问题标题】：Grid layout issue with Fabric.js 1.4.0 versionFabric.js 1.4.0 版本的网格布局问题
【发布时间】：2014-02-14 04:26:15
【问题描述】：

我正在开发基于 Fabric.js 的项目。我在使用 Fabric.js 1.4.0 版本的网格布局时遇到问题，I Text 属性 1.4.0 js 无法正确应用网格属性。但是当我使用带有简单 Text 属性网格布局的 Fabric.js 1.3.0 版本时，效果很好。

下面是使用 Fabric.js 1.3.0 和 Text 属性时的屏幕截图和链接详细信息。您可以在这里看到所有网格布局都很完美。

下面是使用 Fabric.js 1.4.0 和 IText 属性时的屏幕截图和链接详细信息。您可以在这里看到所有网格布局都是错误的布局。

下面是我的两个 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();
});

【问题讨论】：

更改行的 originX/originY

标签： canvas fabricjs

【解决方案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();
});

【讨论】：