Question

按钮＆＃39; b＆＃39;函数返回0甚至来自for循环的控制台日志在鼠标移动过程中正确地打印出所有点。

我的猜测是因为b.onclick正在从on（＆＃39; mouse：move）函数中调用数据，但是我怎么能得到它呢？

No change have been made between canvas.getPointer(o.e) 'for-loop' and Console.log(pointerPoints.length) yet, for some reason, it returns 0.

    <canvas id="myCanvas" style="width: 500; height: 500"></canvas>
     <button id="button" class="btn btn-info"># 1</button>

var $ = function(id){return document.getElementById(id)};

var canvas = new fabric.Canvas('myCanvas');
var b = $('button');

var isDown = false, pointerPoints;

canvas.on('mouse:over', function(e){ 

    canvas.isDrawingMode = true;    
});

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

canvas.on('mouse:move', function(o){    

    var pointsPointer = [];

    if (isDown == true){

        var pointer = canvas.getPointer(o.e);
        var px = pointer.x; //o.e.layerX
        var py = pointer.y; //o.e.layerY

        pointsPointer.push({x:px, y:py});   
    };  
    pointerPoints = pointsPointer;  

    for(let i = 0; i < pointerPoints.length; i++){      
        console.log('Pointer ', pointerPoints[i]);
    };  
});
b.onclick = function(){
    console.log('Pointer ', pointerPoints.length);  
}

Answer 1

var getEl = function(id) {
    return document.getElementById(id)
};

var canvas = new fabric.Canvas('myCanvas');
canvas.isDrawingMode = true;
var b = getEl('button');

var isDown = false,
    pointerPoints = [];

//canvas.on('mouse:over', function(e){ 
//});

canvas.on('mouse:down', function(o) {
    isDown = true;
});

canvas.on('mouse:move', function(o) {
    if (isDown == true) {
        var pointer = canvas.getPointer(o.e);
        var px = pointer.x; //o.e.layerX
        var py = pointer.y; //o.e.layerY
        pointerPoints.push({
            x: px,
            y: py
        });
    };
    //for(let i = 0; i < pointerPoints.length; i++){		
    //console.log('Pointer ', pointerPoints[i]);
    //};	
});
canvas.on('mouse:up', function(o) {
    isDown = false;
})

b.onclick = function() {
    console.log('Pointer ', pointerPoints.length);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.min.js"></script>
<canvas id="myCanvas" style="width: 500; height: 500"></canvas>
<button id="button" class="btn btn-info"># 1</button>

FabricJS如何从on（＆＃39; mouse：move）函数中检索数据？

1 个答案: