fabricjs - перетаскивание изображений на холст - PullRequest
Новая
       7

fabricjs - перетаскивание изображений на холст

0 голосов
/ 11 октября 2018

У меня есть следующая скрипка, где я пытаюсь перетащить изображения на другое изображение, загруженное на холст.

Скрипка

Изображение "picture" будетизначально будет загружен на холсте.Я хотел бы перетащить изображение «Наклейка» на холст, после чего мне бы хотелось иметь возможность изменять размеры и поворачивать.

Моя последняя попытка была без 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, но мне это не удалось, и я довольно растерялся.Документация длинная и очень подробная, но я не могу понять, для чего она мне нужна.

Как я могу это сделать?

...