拖放功能，当fabric.Canvas初始化

我有这个画布在HTML和d & d失去了正常工作：拖放功能，当fabric.Canvas初始化

<canvas id="canvas" width="800" height="450" ondragover="onDragOver($event)" ondrop="onDrop($event)"></canvas>

，但是当我想创建fabric.js的实例，使使用该API，D功能会丢失。

this.canvasObj = new fabric.Canvas('canvas', {});

如何保留功能？

来源

2017-04-15 utiq

拖动&拖放功能，是因为失去，当你创建的fabric.js帆布一个新的实例，它会自动在你的帆布面料，上面创建一个新的canvas元素（一类upper-canvas）这显然没有拖放功能。因此，您需要将这些功能添加到新创建的画布中。

/* for demonstration */ 
 
var ctx = document.getElementById('canvas').getContext('2d'); 
 
var text = document.getElementById('text'); 
 

 
function onDragOver(event) { 
 
    event.preventDefault(); 
 
} 
 
function onDrop(event) { 
 
    document.body.removeChild(text); 
 
    draw(); 
 
} 
 
function draw() { 
 
    ctx.clearRect(0, 0, 200, 200) 
 
    ctx.font = '14px Verdana' 
 
    ctx.fillText(text.innerText, 10, 100); 
 
    requestAnimationFrame(draw); 
 
} 
 

 
/* main part */ 
 
var canvasObj = new fabric.Canvas('canvas'); 
 
var upper_canvas = document.querySelector('.upper-canvas'); 
 
upper_canvas.ondrop = onDrop; 
 
upper_canvas.ondragover = onDragOver;

canvas { 
 
    border: 1px solid black; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.min.js"></script> 
 
<p draggable="true" id="text">Drag me into the canvas!</p> 
 
<canvas id="canvas" width="200" height="200" ondrop="onDrop(event)" ondragover="onDragOver(event)"></canvas>

来源

2017-04-15 18:47:07

拖放功能，当fabric.Canvas初始化

回答

相关问题