在 FabricJS 中绘制后无法 select 个对象

Question

我正在尝试在 canvas 上自由绘制矩形。

这是我的 JSFiddle。

代码：

var canvas1 = new fabric.Canvas("canvas2");
var freeDrawing = true;
var divPos = {};
var offset = $("#canvas2").offset();
$(document).mousemove(function(e) {
    divPos = {
        left : e.pageX - offset.left,
        top : e.pageY - offset.top
    };
});
$('#2').click(function() {

    console.log("Button 2 cilcked");

    // Declaring the variables
    var isMouseDown = false;
    var refRect;

    // Setting the mouse events
    canvas1.on('mouse:down', function(event) {
        // Defining the procedure
        isMouseDown = true;
        // Getting yhe mouse Co-ordinates
        // Creating the rectangle object
        if (freeDrawing) {
            var rect = new fabric.Rect({
                left : divPos.left,
                top : divPos.top,
                width : 0,
                height : 0,
                stroke : 'red',
                strokeWidth : 3,
                fill : ''
            });
            canvas1.add(rect);
            refRect = rect; // **Reference of rectangle object
        }

    });

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

        if (!isMouseDown) {
            return;
        }
        // Getting yhe mouse Co-ordinates
        if (freeDrawing) {
            var posX = divPos.left;
            var posY = divPos.top;

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

    });

    canvas1.on('mouse:up', function() {
        // alert("mouse up!");
        isMouseDown = false;
        // freeDrawing=false; // **Disables line drawing
    });
});

我面临的问题是绘制矩形后我无法移动、调整大小或至少 select 绘制的矩形。

Answer 1

错误是您没有在鼠标松开时添加对象。只需像这样更改 mouse:up 事件函数：

 canvas1.on('mouse:up', function() {
    // alert("mouse up!");
    canvas1.add(refRect);
    isMouseDown = false;
    // freeDrawing=false; // **Disables line drawing
});

它将正常工作。 :)

Answer 2

我也遇到了同样的问题，感谢提供的解决方案。如果您在此 fiddle 中注意到，移动形状时会创建重复对象。

如何解决问题。

$(document).ready(function(){
    //Getting the canvas
 var canvas1 = new fabric.Canvas("canvas2");
    var freeDrawing = true;
    var divPos = {};
    var offset = $("#canvas2").offset();
    $(document).mousemove(function(e){
        divPos = {
            left: e.pageX - offset.left,
            top: e.pageY - offset.top
        };
    });
    $('#2').click(function(){

        console.log("Button 2 cilcked");

        //Declaring the variables
        var isMouseDown=false;
        var refRect;

        //Setting the mouse events
        canvas1.on('mouse:down',function(event){
            //Defining the procedure
            isMouseDown=true;
            //Getting yhe mouse Co-ordinates
            //Creating the rectangle object
            if(freeDrawing) {
            var rect=new fabric.Rect({
                left:divPos.left,
                top:divPos.top,
                width:0,
                height:0,
                stroke:'red',
                strokeWidth:3,
                fill:''
            });
            canvas1.add(rect);
            refRect=rect;  //**Reference of rectangle object
           }

        });

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

            if(!isMouseDown)
            {
                return;
            }
            //Getting yhe mouse Co-ordinates
            if(freeDrawing) {
                var posX=divPos.left;
                var posY=divPos.top;

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

        });


        canvas1.on('mouse:up',function(){
            //alert("mouse up!");
            canvas1.add(refRect);
            isMouseDown=false;
            //freeDrawing=false;  // **Disables line drawing
        });
    });
});

JS Fiddle Link 这里

http://jsfiddle.net/PrakashS/8u1cqasa/75/

Answer 3

None 其他答案的实现对我有用。所有似乎都与最新的 fabric.js 版本不兼容或存在重要问题。

所以我实现了自己的（检查 HTML 来源中的 JS）

https://cancerberosgx.github.io/demos/misc/fabricRectangleFreeDrawing.html?d=9

支持两种模式：一种会在鼠标按下时创建和更新矩形，另一种不会，只会在鼠标弹起时创建矩形
不依赖于 fabric.js 以外的任何其他库（没有 jquery，没有反应，什么都没有）
不使用偏移量或 event.clientX 等来跟踪坐标。它只是使用 fabric event.pointer API 来计算它。这是安全且兼容的，因为它不依赖于 DOM 而仅依赖于 fabric.js public API
精心管理事件监听器待办事项：
我可能还会为 mousemove 添加油门支持

谢谢

在 FabricJS 中绘制后无法 select 个对象

Unable to select objects after drawing in FabricJS

javascript

jquery

html5-canvas

fabricjs