Javascript 使用Fabric.js在矩形中以固定间隔绘制垂直线

我想以固定的间隔在矩形中绘制垂直线，线的数量取决于用户

如果数字为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;
            });




        });
 });

小提琴：

---

如果将下面的代码用于一个区间，并设置变量“size”=宽度/（所需行数），则应该会得到所需的结果

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();
    }

var canvas=newfabric.canvas（'canvas'）；
window.onload=function（）{
var width=canvas.width；//您可以在案例中指定矩形宽度
var height=canvas.height；//您可以在案例中指定矩形高度
var j=0；
var-line=null；
var rect=[]；
变量大小=800/3；
//将矩形宽度除以所需的行数，在这种情况下，假设画布为矩形，并且需要3条垂直线
对于（变量i=0；i