在FabricJS

Question

我想在画布上释放绘制矩形。

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

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

Answer 1

错误是否在鼠标启动时最终没有添加对象。只需更改鼠标：向上事件功能，如下所示：

library(dplyr)
library(tidyr)

df %>%
  count(run, rank) %>%
  spread(rank, n, fill = 0)

# Source: local data frame [3 x 4]
# 
#      run     1     2     3
#   (fctr) (int) (int) (int)
# 1     v1     2     2     0
# 2     v2     2     2     0
# 3     v3     0     0     4

它会正常工作。 ：）

Answer 2

其他答案的实现都没有为我工作。所有这些似乎都与最新的fabric.js版本不兼容或存在重要问题。

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

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

• 支持两种模式：一种会在onmousedown下创建和更新矩形，而另一种不会并且仅会在onmouseup上创建矩形
• 除了fabric.js之外，不依赖于其他任何库（没有jquery，没有任何反应）
• 不使用偏移量或event.clientX等来跟踪坐标。它仅使用fabric event.pointer API进行计算。这是安全且兼容的，因为它不依赖于DOM，而仅依赖于fabric.js公共API
• 认真管理事件监听器 待办事项：
• 我可能还会为mousemove添加油门支持

谢谢

Answer 3

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

如何解决问题。

$(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 here。

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