我正在使用 Fabric js 开发一个应用程序来在一个画布上绘制线条、矩形和圆形。还有另一个功能可以将图像拖放到画布上。但是当我向应用程序添加拖放功能时,其他三个功能不起作用。我找到了这篇文章。但我无法将它与我的集成。
function initCanvas() {
$('.canvas-container').each(function (index) {
var canvasContainer = $(this)[0];
var canvasObject = $("canvas", this)[0];
var url = $(this).data('floorplan');
var canvas = window._canvas = new fabric.Canvas(canvasObject);
canvas.setHeight(400);
canvas.setWidth(500);
canvas.setBackgroundImage(url, canvas.renderAll.bind(canvas));
var imageOffsetX, imageOffsetY;
function handleDragStart(e) {
[].forEach.call(images, function (img) {
img.classList.remove('img_dragging');
});
this.classList.add('img_dragging');
var imageOffset = $(this).offset();
imageOffsetX = e.clientX - imageOffset.left;
imageOffsetY = e.clientY - imageOffset.top;
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'copy';
return false;
}
function handleDragEnter(e) …
Run Code Online (Sandbox Code Playgroud)