使用fabric js在画布上两次鼠标点击之间绘制矩形答案

【问题标题】：Draw rectangle between two mouse clicks on canvas using fabric js使用fabric js在画布上两次鼠标点击之间绘制矩形
【发布时间】：2016-03-04 21:50:39
【问题描述】：

我是 Fabric js 的初学者。我想在具有背景图像的画布上绘制一个矩形。第一次当用户在画布上按下鼠标时得到坐标，然后用户鼠标向上，然后当他再次按下鼠标时，应该在这些点之间绘制矩形，这些点是左上点和右下点。我很困惑如何做到这一点。

我正在分享我用来绘制画布和设置背景图像的代码，它还可以绘制和画线。

<html lang="en" >
<head>
    <meta charset="utf-8" />
    <title>HTML5 canvas - Image color picker | Script Tutorials</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js" ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
</head>

<body>
    <div class="container">
        <div class="column1">
            <canvas id="panel" width="700" height="350"></canvas>
        </div>
    <div style="clear:both;"></div>
</div>
</body>

<script>
(function() {
    var canvas = new fabric.Canvas('panel', { selection: false });

    var line, isDown;

    canvas.on('mouse:down', function(o){
        isDown = true;
        var pointer = canvas.getPointer(o.e);
        var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
        console.log(points);

        line = new fabric.Line(points, {
            strokeWidth: 5,
            fill: 'red',
            stroke: 'red',
            originX: 'center',
            originY: 'center'
        });
        canvas.add(line);
    });

    canvas.on('mouse:move', function(o){
        if (!isDown) return;
        var pointer = canvas.getPointer(o.e);
        line.set({ x2: pointer.x, y2: pointer.y });
        canvas.renderAll();
    });

    canvas.on('mouse:up', function(o){
        isDown = false;
    });

    fabric.Image.fromURL('fedex.jpg', function (img) {
        canvas.add(img.set({
            width: 700,
            height:350,
            left: 350,
            top: 175,
            selectable: false,
        }));
    });
})();
</script>

【问题讨论】：

您好。您收到的反对票可能是要求紧急；请注意，总的来说，这只会惹恼这里的志愿者读者。请不要将其添加到您的问题中，谢谢。

标签： html canvas fabricjs

【解决方案1】：

修改您的代码如下：

(function() {
var canvas = new fabric.Canvas('panel');

var line, isDown, startPosition={}, rect,drawingMode=true;

canvas.on('mouse:down', function(event){
 if (!drawingMode) return;
    isDown = true;
    console.log(event.e.clientX,event.e.clientY);
    startPosition.x=event.e.clientX;
    startPosition.y=event.e.clientY;

    console.log(startPosition);

        rect=new fabric.Rect({
            left:event.e.clientX,
            top:event.e.clientY,
            width:0,
            height:0,
            stroke:'red',
            strokeWidth:3,
            fill:''
        });
        canvas.add(rect);
});

canvas.on('mouse:move', function(event){
    if (!isDown || !drawingMode) return;

     rect.setWidth(Math.abs( event.e.clientX-startPosition.x ));
     rect.setHeight(Math.abs( event.e.clientY -startPosition.y ));

    canvas.renderAll();
});

canvas.on('mouse:up', function(){
    isDown = false;
     canvas.add(rect);
});

canvas.on('object:selected', function(){
    drawingMode = false;         
});

canvas.on('object:selected', function(){
    drawingMode = false;         
});
canvas.on('selection:cleared', function(){  
    drawingMode = true;      
});

})();

这将用鼠标绘制矩形。
See in Fiddle

【讨论】：

感谢您的帮助。但是希望在鼠标单击时实现，例如当用户单击两点时，应该绘制矩形，并且应该在日志中显示矩形的所有坐标。
更新了小提琴以避免鼠标位置和坐标jsfiddle.net/asturur/m04c3smj/7之间的偏移@