fabricjs-将图像拖到画布上

Question

我有以下提琴手，试图将图像拖到画布上加载的另一幅图像上。

{{3}}

“图片”图像最初将被加载到画布上。我想将“ Sticker”图像拖动到画布上，之后我希望能够调整大小和旋转。

我的最后一次尝试是没有FabricJS和香草JS，例如：

function drop(ev) {
    ev.preventDefault();
    startOffsetX = ev.offsetX;
    startOffsetY = ev.offsetY;
    var dropX = ev.clientX - canvasLeft - startOffsetX;
    var dropY = ev.clientY - canvasTop - startOffsetY;
    var id = ev.dataTransfer.getData("Text");
    var dropElement = document.getElementById(id);
    ctx.drawImage(dropElement, dropX, dropY);
    var cloneImg = new Image();
    cloneImg.src = dropElement.src;
    boxes.push({
        img: cloneImg,
        x: dropX,
        y: dropY,
        w: 100,
        h: 100
    });
}

但是这只是将“贴纸”加载到画布中，而我没有做得更多，这涉及很多工作，这就是为什么我现在尝试使用库。

我一直在尝试用FabricJS做到这一点，但是我没有成功，而且我很迷茫。该文档很长而且非常详细，但是我无法弄清楚我需要什么。

我该怎么做？