16

Fabric.js を使い始めたばかりです (言わざるを得ませんが、感銘を受けました)。

ファブリック オブジェクトにグリッドを追加したいと考えています。次のコードでは、グリッド キャンバスをファブリック キャンバスのすぐ上に配置しています。ここでの問題は、ファブリック オブジェクトを移動できないことです。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
  <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js'></script>

</head>
<body>

<div style="height:480px;width:640px;border:1px solid #ccc;position:relative;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">

 <canvas id="rubber" width="800" height="800" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="myCanvas" width="800" height="800" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

<script>
//<![CDATA[ 
$(window).load(function(){
$(document).ready(function () {

    function renderGrid(x_size,y_size, color)
    {
        var canvas = $("#myCanvas").get(0);
        var context = canvas.getContext("2d");

        context.save();
        context.lineWidth = 0.5;
        context.strokeStyle = color;

        // horizontal grid lines
        for(var i = 0; i <= canvas.height; i = i + x_size)
        {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(canvas.width, i);
            context.closePath();
            context.stroke();
        }

        // vertical grid lines
        for(var j = 0; j <= canvas.width; j = j + y_size)
        {
            context.beginPath();
            context.moveTo(j, 0);
            context.lineTo(j, canvas.height);
            context.closePath();
            context.stroke();
        }

        context.restore();
    }

    renderGrid(10,15, "gray");
});

});//]]>  

  var canvas = new fabric.Canvas('rubber');
  canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));

  canvas.selectionColor = 'rgba(0,255,0,0.3)';
  canvas.selectionBorderColor = 'red';
  canvas.selectionLineWidth = 5;
</script>


</body>
</html>

Fabric自体でこれを行う方法があることを願っています。

どんな助けでも素晴らしいでしょう、ありがとう!

4

8 に答える 8

12

この 2 行のコードは機能します。

var gridsize = 5;
for(var x=1;x<(canvas.width/gridsize);x++)
                        {
                            canvas.add(new fabric.Line([100*x, 0, 100*x, 600],{ stroke: "#000000", strokeWidth: 1, selectable:false, strokeDashArray: [5, 5]}));
                            canvas.add(new fabric.Line([0, 100*x, 600, 100*x],{ stroke: "#000000", strokeWidth: 1, selectable:false, strokeDashArray: [5, 5]}));
                    }
于 2013-11-26T03:12:25.453 に答える
4

これがお役に立てば幸いです----

function draw_grid(grid_size) {

  grid_size || (grid_size = 25);
  currentCanvasWidth = canvas.getWidth();
  currentcanvasHeight = canvas.getHeight();


  // Drawing vertical lines
  var x;
  for (x = 0; x <= currentCanvasWidth; x += grid_size) {
      this.grid_context.moveTo(x + 0.5, 0);
      this.grid_context.lineTo(x + 0.5, currentCanvasHeight);
  }

  // Drawing horizontal lines
  var y;
  for (y = 0; y <= currentCanvasHeight; y += grid_size) {
      this.grid_context.moveTo(0, y + 0.5);
      this.grid_context.lineTo(currentCanvasWidth, y + 0.5);
  }

  grid_size = grid_size;
  this.grid_context.strokeStyle = "black";
  this.grid_context.stroke();
}
于 2013-06-29T12:12:28.757 に答える
3

グリッドを動的に生成する必要がない場合は、fabric.js が提供するネイティブ オーバーレイ イメージ機能を検討することをお勧めします。

var canvas = new fabric.Canvas('rubber');
canvas.setOverlayImage('grid.png', canvas.renderAll.bind(canvas));

キャンバス上のオブジェクトとの相互作用をまったく妨げません。

于 2013-06-27T10:25:17.437 に答える
0

これが私の解決策で、Fabric Js 4で動作します。最後に、オブジェクトの移動時にグリッドを追加し、オブジェクトの移動終了時にグリッドを削除する2つのイベントリスナーがあります。(@draeli 回答の改善https://stackoverflow.com/a/35936606/1727357 )

(function () {
    const gcd = (a, b) => {
        if (!b) {
            return a;
        }
        return gcd(b, a % b);
    }
    const gridWidth = canvas.getWidth();
    const gridHeight = canvas.getHeight();

    const oGridGroup = [];
    console.log(gcd(gridWidth, gridHeight));

    const gridRows = gcd(gridWidth, gridHeight);
    const gridCols = gcd(gridWidth, gridHeight);

    const lineOption = { stroke: 'rgba(0,0,0,.1)', strokeWidth: 1, selectable: false, evented: false };

    for (let i = 0; i <= gridWidth; i += gridCols) {
        oGridGroup.push(new fabric.Line([i, 0, i, gridHeight], lineOption));
    }
    for (let i = 0; i <= gridHeight; i += gridRows) {
        oGridGroup.push(new fabric.Line([0, i, gridWidth, i], lineOption));
    }

    const theGorup = new fabric.Group(oGridGroup);
    theGorup.set({
        selectable: false,
        evented: false
    })

    canvas.on('mouse:down', function (event) {
        if (event.target) {
            canvas.add(theGorup);
        }
    });

    canvas.on('mouse:up', function (event) {
        canvas.remove(theGorup);

    });

}())
于 2020-08-26T09:10:55.703 に答える
0

更新しました：

回答は、rafi によって投稿されたコードに基づいています。

  1. 不足している grid_context を更新しました。

  2. 「<your canvas Id>」をキャンバス ID の文字列に置き換えてください。たとえば「myCanvas」。

  3. 通常、キャンバス上で行う操作はキャンバス上のグリッドをクリアするため、fabric.js キャンバスに after:render イベントを登録して再描画します。そのため、いつでも見ることができます。

     var canvas = new fabric.Canvas(<your canvas Id>);
 canvas.on('after:render',function(ctx){
       draw_grid(25);
 });

 function draw_grid(grid_size) {
    grid_size || (grid_size = 25);
    var currentCanvas = document.getElementById(<your canvas Id>); 
    var grid_context = currentCanvas.getContext("2d"); 

    var currentCanvasWidth = canvas.getWidth();
    var currentCanvasHeight = canvas.getHeight();

    // Drawing vertical lines
    var x;
    for (x = 0; x <= currentCanvasWidth; x += grid_size) {
       grid_context.moveTo(x + 0.5, 0);
       grid_context.lineTo(x + 0.5, currentCanvasHeight);
    }

    // Drawing horizontal lines
    var y;
    for (y = 0; y <= currentCanvasHeight; y += grid_size) {
      grid_context.moveTo(0, y + 0.5);
      grid_context.lineTo(currentCanvasWidth, y + 0.5);
    }
   grid_context.strokeStyle = "#0000002b";
   grid_context.stroke();
 }
于 2020-09-11T19:30:28.923 に答える