Question

我在HTML中使用了这个画布，D＆amp; D工作得很好：

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

但是当我想创建一个fabric.js实例来使用API时，D＆amp; D功能就会丢失。

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

如何保留功能？

Answer 1

The Drag＆amp;删除功能会丢失，因为当您创建 fabric.js 画布的新实例时，它会自动创建一个新的画布元素（带有类set enable_seqscan to off; explain analyse select jsondata from test where jsondata->'keyset' @> '10' QUERY PLAN -------------------------------------------------------------------------------------------------------------------- Bitmap Heap Scan on test (cost=8.00..12.02 rows=1 width=55) (actual time=0.024..0.025 rows=2 loops=1) Recheck Cond: ((jsondata -> 'keyset'::text) @> '10'::jsonb) Heap Blocks: exact=1 -> Bitmap Index Scan on test_keyset (cost=0.00..8.00 rows=1 width=0) (actual time=0.014..0.014 rows=2 loops=1) Index Cond: ((jsondata -> 'keyset'::text) @> '10'::jsonb) Planning time: 0.576 ms Execution time: 0.066 ms (7 rows)）原始画布的顶部，显然没有拖放功能。

所以，您还需要将这些功能添加到新创建的画布中。

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;
}

拖拽初始化fabric.Canvas时丢弃功能丢失

1 个答案: