在FabricJS中绘图后无法选择对象

Unable to select objects after drawing in FabricJS

本文关键字：选择 对象 FabricJS 绘图      更新时间：2023-09-26

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

这是我的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
    });
});

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

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

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

它会工作的很好。:)

我也面临同样的问题，感谢提供的解决方案。如果你注意到在这个小提琴，复制对象创建时移动的形状。

如何解决这个问题。

$(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
        });
    });
});
http://jsfiddle.net/PrakashS/8u1cqasa/75/

其他答案的实现都不适合我。似乎都不兼容最新的fabric.js版本或有重要的问题。

所以我实现了我自己的(检查HTML源中的JS)

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

  • 支持两种模式:一种模式将创建和更新矩形onmousedown，另一种模式不会，只创建矩形onmouseup
  • 不依赖于fabric.js以外的任何库(没有jquery，没有react，没有其他)
  • 不使用偏移量或事件。clientX等来跟踪坐标。它只是使用织物事件。指针API来计算它。这是安全和兼容的，因为它不依赖于DOM，只依赖于fabric.js的公共API
  • 仔细管理事件侦听器待办事项:
  • 我可能还会添加油门支持鼠标移动

谢谢

相关文章：