使用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

如果在間隔中使用以下代碼，並將變量“ size”設置為width /（所需的行數），則應獲得所需的結果

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