拖動對象編程

我有海誓山盟的頂部3米的矩形像這樣：拖動對象編程

new Fabric.Rect({ 
    width: 200 - index * 30, 
    height: 20, 
    hasBorders: false, 
    selectable: false, 
    hasControls: false 
});

，然後我有NEAR檢測（未在矩形）的點擊的點擊事件的矩形，並且使頂部矩形（最高3）可選擇的（將其拖動）的疊層中的一個：

var first = this.first().shape; // Fabric.Rect 
canvas.setActiveObject(first);

然而，這並沒有設置在對象上的光標，拖動對象。

我該怎麼做才能讓對象被選中，立即移動到光標處，並且一旦點擊事件觸發就能夠被拖動？

來源

2017-03-14 XLordalX

如果我能正確理解你，這應該讓你相當接近。

單擊畫布黑色方塊內部和紅色物體外部的任意位置。

var canvas = new fabric.Canvas('c', { 
 
    selection: false, 
 
}); 
 
var rectangle = new fabric.Rect({ 
 
    fill: 'red', 
 
    left: 10, 
 
    top: 10, 
 
    width: 100, 
 
    height: 100 //, 
 
    //padding: 50 
 
}); 
 
canvas.on('mouse:down', function(env) { 
 
    var x = env.e.offsetX; 
 
    var y = env.e.offsetY; 
 
    rectangle.setLeft(x - rectangle.width/2); 
 
    rectangle.setTop(y - rectangle.height/2); 
 
    canvas.setActiveObject(rectangle); 
 
    rectangle.setCoords(); 
 
    canvas.renderAll(); 
 
    canvas.on('mouse:move', function(env) { 
 
    var x = env.e.offsetX; 
 
    var y = env.e.offsetY; 
 
    rectangle.setLeft(x - rectangle.width/2); 
 
    rectangle.setTop(y - rectangle.height/2); 
 
    rectangle.setCoords(); 
 
    canvas.renderAll(); 
 
    }); 
 
    canvas.on('mouse:up', function(env) { 
 
    canvas.off('mouse:move'); 
 
    }); 
 
}); 
 
canvas.add(rectangle); 
 
canvas.renderAll();

#c { 
 
    border: 1px solid black; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script> 
 
<canvas id="c" width="200" height="200"></canvas>

我故意在矩形註釋掉padding，但離開它的代碼，如果你想使用它作爲你的近邏輯，而不是你已經擁有。如果您選擇使用padding作爲NEAR邏輯，則需要將畫布上的mouse:down事件更改爲畫布上的object:selected事件。另外，如果你還沒有這樣做，你可能想仔細看看這個Objects Bounding Rectangles的例子，看看你的NEAR邏輯http://fabricjs.com/bounding-rectangle的一些進一步的想法。

任何人，讓我知道你怎麼樣，matey！

來源

2017-03-16 03:24:54

拖動對象編程

回答

相關問題