Fabric.js를 사용하여 직사각형으로 일정한 간격으로 세로선을 그립니다.

Question

일정한 간격으로 직사각형에 세로선을 그려야하며 줄 수는 사용자에 따라 다릅니다.

숫자가 3이면 직사각형에 동일한 간격으로 수직선이 있어야합니다. Fabric.js에서 어떻게 이것을 할 수 있습니까?

마우스 이벤트를 사용하여 사각형을 그릴 수 있습니다.

코드와 바이올린은 다음과 같습니다 :

 //Start when the document is loaded 
    $(document).ready(function(){ 
     var canDraw = true; 

     //Getting the canvas 
     var canvas1= new fabric.Canvas('canvas'); 
     //Setting the canvas properties 
     canvas1.setHeight(400); 
     canvas1.setWidth(1300); 
     canvas1.renderAll(); 
     //End of canvas1 

     //Binding the functions to button_2 
     $('#2').click(function(){ 

      console.log("Button 2 cilcked"); 
      canvas1.isDrawingMode=false; 
      //Declaring the variables 
      var isMouseDown=false; 
      var OriginX=new Array(); 
      var OriginY= new Array(); 
      var refRect; 

      if(canDraw) { 

      //Setting the mouse events 
      canvas1.on('mouse:down',function(event){ 
       //Defining the procedure 
       isMouseDown=true; 
       OriginX=[]; 
       OriginY=[]; 

       //Getting the mouse Co-ordinates 
       var posX=event.e.clientX; 
       var posY=event.e.clientY; 
       OriginX.push(posX); 
       OriginY.push(posY); 

       //Creating the rectangle object 
       var rect=new fabric.Rect({ 
        left:OriginX[0], 
        top:OriginY[0], 
        width:0, 
        height:0, 
        stroke:'red', 

        fill:'white' 
       }); 
       canvas1.add(rect); 
       rect.lockRotation=true; 

       refRect=rect; //**Reference of rectangle object 

      }); 
      } 

      canvas1.on('mouse:move', function(event){ 
       // Defining the procedure 

       if(canDraw) { 
        //Getting the mouse Co-ordinates 
        var posX=event.e.clientX; 
        var posY=event.e.clientY; 

        refRect.setWidth(Math.abs((posX-refRect.get('left')))); 
        refRect.setHeight(Math.abs((posY-refRect.get('top')))); 
        refRect.setCoords(); 
        canvas1.renderAll(); 
       } 
      }); 

      canvas1.on('mouse:up',function(){ 
       canDraw = false; 
      }); 




     }); 
}); 

바이올린 :

http://jsfiddle.net/URWru/116/

Answer 1

당신이 간격에 아래의 코드를 사용하고 변수 "크기"= 폭을 설정하는 경우/(필요한 줄 수) 원하는 결과를 얻을 수 있어야합니다.

var canvas = new fabric.Canvas('canvas'); 

window.onload=function(){ 
var width = canvas.width;//you may specify the rectangle width in your case 
var height = canvas.height;//you may specify the rectangle height in your case 

var j = 0; 
var line = null; 
var rect = []; 
var size = 800/3; 
//divide the rectangles width with the number of lines required in this case the assuming the canvas is the rectangle and the requirement of 3 verticle lines 


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: '#ff001e' 
    }); 

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

} 



canvas.renderAll(); 
    }