使用 Fabric.js 在矩形中以规则的间隔绘制垂直线答案

【问题标题】：Draw vertical lines at regular intervals in rectangle using Fabric.js使用 Fabric.js 在矩形中以规则的间隔绘制垂直线
【发布时间】：2014-03-13 02:46:14
【问题描述】：

我想在一个矩形中定期绘制垂直线，线数取决于用户。

如果数字是 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/

【问题讨论】：

标签： javascript jquery fabricjs

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

【讨论】：